<template>
	<view class="page">
		<u-navbar :title="tit" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff" title-size='36'
			height='50'></u-navbar>
		<view class="serch">
			<u-search placeholder="搜索问题" height="72" :showAction="false" v-model="keyword" @change="sousuo" shape="square"></u-search>
		</view>

		<view class="list" >
			<view class="tab">
				<u-tabs :list="list" :is-scroll="true" :current="current" active-color="#8883F0" bar-width="80"
					gutter="40" item-width="200" @change="change"></u-tabs>
			</view>
			<view class="wenti" v-for="(item,index) in listitem" :key="index">
				<view class="wzwt" @click="btnxq(item.articleId)">
					<text>{{item.title}}</text> <u-icon name="arrow-right"></u-icon>
				</view>

			</view>
			<view class="huan" @click="btnhuan" v-if="current == 0">
				<image src="https://api.ccttiot.com/smartmeter/img/static/uQyHxbK49U3S5f4uLU6m" mode="aspectFit"></image> 换一换
			</view>
		</view>
		<view class="" v-if="flag" style="width: 100%;margin-top: 170rpx;text-align: center;">
			<image src="https://api.ccttiot.com/smartmeter/img/static/uO8bv6yv8Icg5hlbKccj" mode="aspectFit" style="width: 430rpx;height: 430rpx;"></image>
			<text
				style="display: block;font-size: 32rpx;color: #808080;margin-top: 30rpx;font-weight: 400;">您搜索的问题暂无相关分类</text>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				current: 0,
				classifyId: '',
				listitem: [],
				huanindex: 1,
				keyword: '',
				flag:false,
				tit:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.tit = '帮助中心'
			}else{
				this.tit = '常见问题'
			}
			this.getfenlei()
			setTimeout(() => {
				this.getlists()
			}, 1000)
		},
		// 分享到好友（会话）
		  onShareAppMessage: function () {  
		    return {  
		      title: '创想物联',  
		      path: '/pages/shouye/index'  
		    }  
		  },  
		  
		  // 分享到朋友圈  
		  onShareTimeline: function () {  
		    return {  
		      title: '创想物联',  
		      query: '',  
		      path: '/pages/shouye/index'  
		    }  
		  },
		methods: {
			sousuo() {
				this.huanindex = 1
				this.getfenlei()
			},

			getfenlei() {
				this.$u.get('/app/article/problem/list', {
					keyword: this.keyword
				}).then(res => {
					let sum = res.total
					if(sum > 0){
						this.flag = false
					}else{
						this.flag = true
					}
					if (res.rows.length != 0) {
						this.list = res.rows.map(row => ({
							name: row.classifyName,
							classifyId: row.classifyId
						}))
						if (this.list.length != 0) {
							this.classifyId = this.list[1].classifyId
							this.getlists()
						}
					} else {
						this.listitem = []
					}
				})
			},
			btnhuan() {
				if (this.list.length != 0) {
					this.classifyId = this.list[this.huanindex++].classifyId
					// this.current++
					if (this.huanindex == this.list.length) {
						this.huanindex = 1
					}
					// if(this.current == this.list.length){
					// 	this.current = 0
					// }
					this.getlists()
				}

			},
			btnxq(id) {
				uni.navigateTo({
					url: '/page_fenbao/statulist/question/xiangqing/index?id=' + id
				})
			},
			change(index) {
				if (index == 0) {
					this.classifyId = this.list[index + 1].classifyId
					this.current = index;
					this.getlists()
				} else {
					this.classifyId = this.list[index].classifyId
					this.current = index;
					this.getlists()
				}
			},
			getlists() {
				this.$u.get('/app/article/list?classifyId=' + this.classifyId + '&pageNum=' + 1 + '&pageSize=' + 6).then(
					res => {
						if (res.code == 200) {
							this.listitem = res.rows
							// console.log(this.listitem);
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title{
		padding-bottom: 22rpx;
	}
	/deep/ .uicon-nav-back{
		padding-bottom: 22rpx;
	}

	page {
		// background-color: ;
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.page {
		width: 750rpx;
		padding-left: 34rpx;
		padding-right: 34rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;

		.serch {
			margin-top:20rpx;
		}

		.list {
			width: 680rpx;
			height: 640rpx;
			background: #FFFFFF;
			margin-top: 46rpx;
			border-radius: 15rpx;
			padding: 10rpx 32rpx;
			box-sizing: border-box;
			overflow: hidden;

			// overflow-x: scroll;
			.tab {
				width: 650rpx;
				margin-bottom: 38rpx;
				// display: flex;

			}

			.wenti {
				.wzwt {
					display: flex;
					justify-content: space-between;
					margin-bottom: 38rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #3D3D3D;
				}
			}

			.huan {
				image {
					width: 28rpx;
					height: 28rpx;
					vertical-align: middle;
					margin-right: 10rpx;
				}
                margin-top: 20rpx;
				width: 100%;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}

	.active {
		border-bottom: 6rpx solid #D9D8FF;
		padding-bottom: 10rpx;
		border-radius: 3rpx 3rpx 3rpx 3rpx;
	}
</style>