<template>
	<view>
		<u-navbar :is-back="true" title='帮助中心' title-color="#000" :border-bottom="false" :background="true" id="navbar">
		</u-navbar>
		<image src="https://api.ccttiot.com/smartmeter/img/static/ufS7gK1UMf2qgXlzUw1u" class="imgbj" mode=""></image>
        <view class="box">
        	<view class="serch">
        		<image src="https://api.ccttiot.com/smartmeter/img/static/uQ7koGotmd07EoqfPkQ8" mode=""></image> <input type="text" v-model="keyword" placeholder="请输入您的问题" /> <view @click="btnsousuo" class="sousuo">搜索</view>
        	</view>
			<view class="name">
				常见问题
			</view>
			<view class="list">
				<view class="list_item" v-for="(item,index) in list" :key="index">
				    <view class="lt">
				    	<image :src="item.classifyPicture" mode=""></image>
				    	<view class="">{{item.classifyName}}</view>
				    </view>
				    <view class="rt">
				    	<view class="" v-for="(val,indexs) in item.articleList" :key="indexs" @click="btnxq(val.articleId)">{{val.title}}</view>
				    </view>
				</view>
			</view>
			<view class="bot" @click="btnkf">
				找不到答案？<text>联系客服吧</text>
			</view>
        </view>
		
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				keyword:''
			}
		},
		onLoad() {
		    this.getlist()
		},
		methods: {
			getlist(){
				this.$u.get(`/app/article/mch/help?keyword=${this.keyword}`).then(res => {
					if(res.code == 200){
						this.list = res.data
					}
				})
			},
			btnsousuo(){
				this.getlist()
			},
			btnkf(){
				uni.navigateTo({
					url:'/page_user/Feedback'
				})
			},
			btnxq(articleId){
				uni.navigateTo({
					url:'/pages/daili/bangzhuxq?articleId=' + articleId
				})
			}
		}
	}
</script>																				

<style lang="less">
	.imgbj{
		width: 750rpx;
		height: 548rpx;
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box{
		margin-top: 296rpx;
		width: 750rpx;
		height: 1130rpx;
		background: #FFFFFF;
		border-radius:50rpx 50rpx 0 0;
		padding-top: 32rpx;
		box-sizing: border-box;
		.bot{
			width: 100%;
			text-align: center;
			font-size: 32rpx;
			color: #3D3D3D;
			margin-top: 30rpx;
			text{
				color: #8883F0;
			}
		}
		.list{
			width: 724rpx;
			margin: auto;
			margin-top: 32rpx;
			// padding: 22rpx 0;
			box-sizing: border-box;
			max-height: 840rpx;
			border-top: 1rpx solid #D8D8D8; 
			border-bottom: 1rpx solid #D8D8D8;
			.list_item:last-child{
				border: none;
			}
			.list_item{
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1rpx solid #D8D8D8;
				.lt{	
					width: 200rpx;
					text-align: center;
					padding: 20rpx 0;
					box-sizing: border-box;
					image{
						width: 80rpx;
						height: 80rpx;
					}
					view{
						font-size: 30rpx;
						color: #3D3D3D;
					}
				}
				.rt{
					width: 513rpx;
					view{
						height: 86rpx;
						line-height: 86rpx;
						border-bottom: 1rpx solid #D8D8D8;
					}
					view:last-child{
						border: none;
					}
				}		
			}
		}
		.name{
			font-weight: 600;
			font-size: 36rpx;
			color: #3D3D3D;
			width: 100%;
			margin-top: 32rpx;
			padding-left: 40rpx;
			box-sizing: border-box;
		}
		.serch{
			width: 670rpx;
			height: 86rpx;
			background: #F0F0F0;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			margin: auto;
			display: flex;
			align-items: center;
			padding-left: 38rpx;
			box-sizing: border-box;
			image{
				margin-right: 22rpx;
				width: 32rpx;
				height: 32rpx;
			}
			input{
				width: 460rpx;
				height: 86rpx;
				background: #F0F0F0;
				line-height: 86rpx;
			}
			.sousuo{
				border-left: 1px solid #95989D;
				font-size: 30rpx;
				color: #3D3D3D;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				width: 136rpx;
			}
		}
	}
	
</style>