<template>
	<view class="question-body">
		<view class="nothing" v-if="questionList.length === 0">
			<image src="/static/img/pic.svg" mode=""></image>
			<view class="nothingText">
				暂无常见问题
			</view>
		</view>
		<view class="questionItem" v-for="(item,index) in questionList" :key="index" @click="goQuestionDetail(item.id)">
			<view class="questionTitle">
				{{item.title}}
			</view>
			<view class="">
				<image src="/static/img/right.svg" mode="" style="width: 19rpx;height: 32rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {getQuestionList} from '@/api/newIndex.js'
	export default {
		data() {
			return {
				questionList:[],
				current: 1,
				size: 20,
				total: 0
			}
		},
		mounted() {
			this.initQuestionList()
		},
		methods: {
			/*页面滚动到底部 换页*/
			onReachBottom: function() {
				if (this.questionList.length >= this.total) {
					uni.showToast({
						title: '到底了',
						icon: 'none'
					})
					return
				}
				this.initQuestionList()
			},
			/*下拉刷新*/
			onPullDownRefresh: function() {
				this.current = 1
				this.questionList = []
				this.initQuestionList()
			},
			goQuestionDetail(data){
				
				uni.navigateTo({
					url:`/pageMy/help/questions/questionDetail?id=${data}`
				})
			},
			initQuestionList(){
				uni.showLoading({
					title:'请求中'
				})
				getQuestionList(
				"",
				"",
				"",
				this.current,
				this.size
				).then(e=>{
					this.current++
					this.questionList = [...this.questionList, ...e.data.data.records]
					this.total = e.data.data.total
					uni.hideLoading()
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.hideLoading()
					uni.stopPullDownRefresh();
				})
			}
		}
	}
</script>

<style>
	.nothingText {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		color: #666666;
		text-align: center;
		margin-top: 20rpx;
	}
	
	.nothing image {
		width: 400rpx;
		height: 200rpx;
		display: block;
		padding-top: 50%;
		margin: 0 auto;
	}
	
	.nothing {
		width: 100%;
		height: 100vh;
	
		background-color: #fefefe;
	}
	.questionItem{
		font-family: PingFangSC-Regular;
		font-size: 32rpx;
		color: #333333; 
		height: 110rpx;
		line-height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.question-body{
		background-color: #fefefe;
		margin-top: 20rpx;
		padding:0 30rpx;
	}
	.questionTitle{
		color: #333333;
	}
	.questionContent{
		display: flex;
		justify-content: start;
		align-items: center;
		font-size: 26rpx;
	}
	.contentText{
		color: #7F7F7F;
		width: 600rpx;
		white-space: nowrap; 
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.toQuestionDetail{
		color: #02A7F0;
		cursor: pointer;
		width: 60rpx;
		text-align: center;
		
	}
page{background-color: #f6f6f6;}
</style>
