<template>
	<view class="bg">
		<view class="top-box">
			<uni-icons color="#333333" type="left" size="18" @click.native="goBack()"></uni-icons>
			<view class="search-box">
				<uni-icons color="#96684F" type="search" size="20" ></uni-icons>
				<input type="text" class="input" placeholder="请输入搜索关键字" v-model="keywords" @confirm="search" />
			</view>
			<view class="btn" @click="search()">搜索</view>
		</view>
		
		<view class="common-question">
			<view class="question-list">
				<view class="item" v-for="(item,i) in questionList" :key="i" @click="viewDetail(item)">
					<view class="text-overflow" style="padding-right: 20rpx;">{{item.issue}}</view>
					<uni-icons color="#999999" type="right" size="14"></uni-icons>
				</view>
			</view>
			
			<view class="more-question" @click="goBattle">没找到想要的答案？一键呼唤<text style="color: #DC2525;">人工客服</text></view>
		
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
				questionList: [],
			}
		},
		onLoad(options) {
			this.keywords = ""
			let type = options.type
			let id = options.id
			if (type == 'tag') {
				this.getQuestionByTagId(id)
			} else if (type == 'type') {
				this.getQuestionByTypeId(id)
			}
		},
		onShow() {
			
		},
		methods: {
			getQuestionByTypeId (id) {
			  this.Post({type_id: id}, '/api/Answer/getAnswerByType').then(res=>{
					this.questionList = (res.data || [])
			  })	  
			},
			getQuestionByTagId (id) {
			  this.Post({tag_id: id}, '/api/Answer/getAnswerByTag').then(res=>{
					this.questionList = (res.data || [])
			  })	  
			},
			search () {
				this.keywords = this.keywords.trim()
				if (!this.keywords) {
					uni.showToast({
						title:"请输入搜索关键词",
						icon:"none"
					})
					return
				}
				this.Post({name: this.keywords}, '/api/Answer/search').then(res=>{
					this.questionList = (res.data || [])
				})	
				
			},
			viewDetail(item) {
				  uni.navigateTo({
					url: `/subPackages/onlineService/detail?id=${item.id}`
				  })
			},
			goBattle() {
				window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect');
			},
			
			
		}
	}
</script>
<style scoped lang="scss">
	*{
		box-sizing: border-box;
	}
	.bg {
		min-height: 100vh;
		background: white;
		position: relative;
		padding: 0 24rpx 40rpx;
	}

	.top-box {
		height: 84rpx;;
		padding: 12rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #D8D8D8;
		position: fixed;
		top: 0;
		left: 24rpx;
		right: 24rpx;
		background: white;
		.search-box{
			width: 493rpx;
			height: 60rpx;
			border: 1px solid #96684F;
			display: flex;
			align-items: center;
			padding: 15rpx 19rpx;
			.input {
				flex: 1;
				border: none;
				outline: none;
				background: none;
				color: #666;
				margin: 0 20rpx;
			}
		}
		.btn {
			width: 120rpx;
			height: 60rpx;
			background: #96684F;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.common-question{
		padding-top: 80rpx;
		.question-list{
			.item{
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 31rpx;
				color: #000000;
				border-bottom: 1px solid #D8D8D8;;
			}
		}
	}
	.more-question{
		width: 520rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 7rpx;
		border: 1px solid #999999;
		font-weight: 500;
		font-size: 27rpx;
		color: #000000;
		margin: 54rpx auto 0;
	}
</style>
