<template>
  <view class="bg">
	<view class="service-top">
		<view class="title">{{detail.issue}}</view>
		<view class="content" v-html="detail.answer"></view>
		<view class="useful">
			<view>以上答案是否解决您的问题?</view>
			<view class="operation" @click="setUseful(1)">
				<image v-show="is_useful==0" :src="showImg('/uploads/20241203/2e5b01e978f07b882f7da19ad60f53c4.png')"></image>
				<image v-show="is_useful==1" :src="showImg('/uploads/20241203/7e87b3ae9b0c7b84317516010d4f3f31.png')"></image>
				有用(99+)
			</view>
			<view class="operation" @click="setUseful(2)">
				<image v-show="is_useful==0" :src="showImg('/uploads/20241203/73cfb278be1e7d7ba0f7b55effbc2ea1.png')"></image>
				<image v-show="is_useful==2" :src="showImg('/uploads/20241203/5f86738db034b23c63a069c553fc17c0.png')"></image>
				没用(99+)
			</view>
		</view>
	</view>
	
	<view style="height: 20rpx;background: #F7F7F7;"></view>
  
	<view class="common-question">
		<view class="title">可能你还想问</view>

		<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 {
		id: null,
		questionList: [],
		detail: {},
		is_useful: 0,
    }
  },
  onLoad(options) {
	this.id = options.id
	  if (!this.id) {
		  this.goBack()
	  } else {
		  this.getDetail()
	  }
  },
  
  methods: {
	  getDetail () {
		 this.Post({id: this.id}, '/api/Answer/getAnswerDetail').then(res=>{
			 this.detail = res.data
		 })
	  },
	  viewDetail(item) {
		  uni.navigateTo({
			url: `/subPackages/onlineService/detail?id=${item.id}`
		  })
	  },
	  setUseful (val) {
		  let value = val
		  if (this.is_useful == value) {
			  value = 0
		  }
		  // this.Post({id: this.id, is_useful: value}, '').then(res=>{
		  // 		this.is_useful = value
		  // })
	  },
	  goBattle() {
	  	window.open('https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=Mzg5NTU1MzE2NQ==#wechat_redirect');
	  },
  }
}
</script>
 
<style lang="scss" scoped>
	*{
		box-sizing: border-box;
	}
	.bg{
		width: 100%;
		min-height: calc(100vh - 44px);
		background: #FFFFFF;
	}
	.service-top{
		padding: 20rpx 26rpx;
		.title{
			font-weight: bold;
			font-size: 31rpx;
			color: #96684F;
		}
		.content{
			padding: 28rpx 0 60rpx;
		}
		.useful{
			display: flex;
			align-items: center;
			color: #666666;
			font-weight: 500;
			font-size: 24rpx;
		}
		.operation{
			display: flex;
			align-items: center;
			padding-left: 29rpx;
			image{
				width: 40rpx;
				height: 50rpx;
				margin-right: 4rpx;
			}
		}
	}

	
	.common-question{
		padding: 26rpx 26rpx;
		.title{
			font-weight: bold;
			font-size: 31rpx;
			color: #333333;
			padding-bottom: 26rpx;
			border-bottom: 1px solid #D8D8D8;;
		}
		.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>
 