<template>
	<view class="helpCenter">
		<far-bottom></far-bottom>
		<scroll-view class="scrollView" :style="{ height: phoneHight }" :scroll-y="true" :lower-threshold="0" @scrolltolower="load">
		<!-- 头部搜索框 -->
		<view class="search">
			<image :src="imgfixUrls + 'merchant/serach.png'" />
			<input placeholder="请输入关键字进行搜索" @blur="getSearch" v-model="search"/>
		</view>
		<!-- 头部搜索框 -->

		<!-- 背景图 -->
		<swiper class="helpCenterImg" :indicator-dots="indicatorDots" :indicator-active-color="indicatorActiveColor" :autoplay="autoplay" :interval="interval" :circular="circular" v-if="helpInfo.adv.length!=0">
			<swiper-item v-for="(item,index) in helpInfo.adv" :key="index" @click="go(item.url)"><image :src="item.img" class="Imgs"/></swiper-item>
		</swiper>
		<!-- 背景图 -->

		<!-- 按钮 -->
		<view class="buttonView">
			<view v-for="(item,index) in helpInfo.class" @click="goList(item.name,item.id)">
				<view><image :src="item.img" /></view>
				<span>{{item.name}}</span>
			</view>
		</view>
		<!-- 按钮 -->
		
		<!-- 帮助提示 -->
		<view class="helpTips">
			<view class="helpTipsPackage" >
				<span>常见问题</span>
			</view>
		</view>
		<!-- 帮助提示 -->
		
		<!-- 帮助列表 -->
		
			<view class="scrollPackage">
				<view class="bzMb" v-for="(item,index) in problemList" @click="goHelpInfo(item.id)">
					<span>{{item.title}}</span>
					<image :src="imgfixUrls + 'merchant/right.svg'"/>
				</view>
			</view>
			
		</scroll-view>
		<!-- 帮助列表 -->
	</view>
</template>

<script>
import App from '@/common/js/app.js';

// #ifdef H5
import wxApi from '@/common/js/wxApi.js';
// #endif
	
export default {
	data() {
		return {
			helpInfo:{},
			page:1,
			problemList:[],
			indicatorDots: true,
			indicatorActiveColor: 'white',
			vertical: true,
			autoplay: true,
			interval: 2000,
			circular: true,
			phoneHight:0,
			total:null,
			search:''
		};
	},
	onLoad(e){
		this.init()
	},
	mounted(){
		let _this=this
		
		uni.getSystemInfo({
			success(res) {
				_this.phoneHight = res.windowHeight+'px';
			}
		});
	},
	methods:{
		init(){
			let _this=this
			_this.getHelpInfo()
			_this.getProblemList()
		},
		// 搜索
		getSearch(){
			let _this=this
			_this.page=1
			_this.problemList=[]
			let data={
				is_recommend:0,
				type_id:0,
				page:_this.page,
				page_index:10,
				search:_this.search
			}
			App._post_form('&p=helper&do=problemList',data,res=>{
				_this.problemList=[..._this.problemList,...res.data.list]
			})
		},
		// 跳转问题列表
		goList(title,id){
			App.navigationTo({
				url:'pages/subPages/helpCenter/problemList/problemList?title='+title+'&id='+id
			})
		},
		// 跳转详情
		goHelpInfo(id){
			App.navigationTo({
				url:'pages/subPages/helpCenter/helpDetails/helpDetails?id='+id
			})
		},
		load(){
			let _this=this
			if(_this.page==_this.total){
				
			}else{
				_this.page++
				_this.getProblemList()
			}
		},
		// 跳转
		go(url){
			App.navigationTo({
				url:url
			})
		},
		// 帮助中心信息获取
		getHelpInfo(){
			let _this=this
			let data={}
			App._post_form('&p=helper&do=helpInfo',data,res=>{
				_this.helpInfo=res.data
			})
		},
		// 获取问题列表
		getProblemList(){
			let _this=this
			let data={
				is_recommend:1,
				type_id:0,
				page:_this.page,
				page_index:10
			}
			App._post_form('&p=helper&do=problemList',data,res=>{
				_this.problemList=[..._this.problemList,...res.data.list]
				_this.total=res.data.total
				console.info(_this.problemList)
			})
		}
	}
};
</script>

<style lang="less" scoped>
.scrollPackage{
	padding:0 30upx;
}	
.bzMb{
	border-bottom: 1upx solid rgba(238,238,238,1);
	height: 105upx;
	display: flex;
	justify-content: space-between;
	>span{
		vertical-align: middle;
		line-height: 105upx;
		font-size:28upx;
		lor:rgba(51,51,51,1);
	}
	>image{
		margin: 45upx 0 0 0;
		vertical-align: middle;
		height:20upx;
		width: 20upx;
	}
}	
.Imgs{
	width: 750upx;
	height: 560upx;
}	
.helpTips{
	background: #F8F8F8;
}	
.helpTipsPackage{
	padding: 30upx;
	>span{
		font-size:24upx;
		lor:rgba(153,153,153,1);
	}
}	
.buttonView {
	margin:20upx 0 0 0;
	padding-bottom:30upx;
	> view {
		text-align: center;
		display: inline-block;
		width: 25%;
		vertical-align: middle;
		> view {
			margin:20upx auto 0 auto;
			width: 50upx;
			> image {
				width: 50upx;
				height: 50upx;
			}
		}
		> span {
			margin: 20upx 0 0 0;
			font-size: 24upx;
			
			
			color: rgba(51, 51, 51, 1);
		}
	}
}
.helpCenter {
	font-size: 0;
}
page {
	background: #ffffff;
	overflow-x: hidden;
}
.search {
	margin: 20upx auto 0 auto;
	width: 690upx;
	height: 76upx;
	background: rgba(246, 246, 246, 1);
	border-radius: 38upx;
	> image {
		margin-left: 30upx;
		vertical-align: middle;
		width: 28upx;
		height: 28upx;
	}
	> input {
		padding-left: 30upx;
		vertical-align: middle;
		display: inline-block;
		width: 400upx;
		height: 100%;
		font-size: 24upx;
		
		
		color: rgba(51, 51, 51, 1);
	}
}
.helpCenterImg {
	margin: 20upx auto 0 auto;
	overflow: hidden;
	border-radius: 10upx;
	width: 750upx;
	height: 560upx;
	> image {
		width: 750upx;
		height: 560upx;
	}
}
</style>
