<template>
	<view class="shop_comment" v-if="sumCount > 0" @click="evals()">
		<view class="shop_comment_head">
			<view class="shop_comment_head_title">商品评论({{sumCount >= 10000?'1万+':sumCount}})</view>
			<view class="shop_comment_head_arrow">全部</view>
		</view>
		<view class="shop_comment_tag" v-if="reviewTags.length">
			<view class="shop_comment_item" v-for="(item,index) in reviewTags" :key="index"  @click.stop="evals(item.tag)">{{item.tag}}({{item.num}})</view>
		</view>
		<view class="shop_comment_cont">
			<view class="shop_comment_cont_ul">
				<view class="shop_comment_cont_l">
					<image class="shop_comment_cont_userimg" :src="productReply.avatar" mode="widthFix"></image>
					<view class="shop_comment_cont_username">{{productReply.nickname}}</view>
					<view class="shop_comment_cont_amount">
						<image class="shop_comment_cont_img" :src="productReply.evalImg" lazy-load mode="widthFix"></image>{{productReply.evalName}}
					</view>
				</view>
				<view class="shop_comment_cont_ip"></view>
			</view>
			<view class="shop_comment_m">
				<view class="shop_comment_title"><text>{{productReply.comment}}</text></view>
				<view class="shop_comment_item" >
					<image v-for="(img,index) in productReply.pics" :key="index" class="shop_comment_itemImg" :src="img" mode="widthFix" @click.stop="previewImage(index)"></image>
				</view>
			</view>
		</view>
	</view>
	<!-- 常见问题 -->
	<view class="shop_comment" v-if="problemNum > 0" @click="faqList">
		<view class="shop_comment_head">
			<view class="shop_comment_head_title">常见问题({{problemNum}})</view>
			<view class="shop_comment_head_arrow">全部</view>
		</view>
		<view class="faqlist">
			<view class="shop_ask shop_padding"><text>{{productProblem.content}}</text></view>
			<!-- <view class="shop_answer shop_padding"><text>虾头中含有一种叫做酪氨酸酶的酶，当虾死亡后，这种酶会催化虾体内的酪氨酸生成黑色素，导致虾头变黑。这是一种自然现象，通常不影响虾肉的食用安全。</text></view> -->
		</view>
	</view>
</template>

<script setup>
	import { computed,ref,onMounted } from 'vue';
	import { useCounterStore } from '@/store/counter'; // 引入 Pinia Store
	import { storeToRefs } from 'pinia';//实现解构付值
	import { onLoad,onShow,onPullDownRefresh,onPageScroll,onReachBottom,onReady } from "@dcloudio/uni-app"
	const counterStore = useCounterStore(); // 使用 Store
	//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
	const { token } = storeToRefs(counterStore);
	//使用pinia：方法还是从原来的counterStore中解构赋值
	const { replyconfig,replyproduct } = counterStore;
	const problemNum = ref('');
	const productProblem = ref({});
	const productReply = ref({});
	const replyChance = ref('');
	const reviewTags = ref([]);
	const picsCount = ref('');
	const sumCount = ref('');
	const props = defineProps({
		apiType:{
			type:Number,
			default:1 //1为首页5为热门推荐
		}
	})
	const api_replyproduct=()=>{
		const params = {}
		return replyproduct(props.apiType,params,token.value).then(({data}) => {
			problemNum.value = data.problemNum;
			productProblem.value = data.productProblem;
			if(data.sumCount){
				if(data.productReply.score >= 4){
					data.productReply.evalName = '好评';
					data.productReply.evalImg = '../../static/eval/praise.png';
				}else if(data.productReply.score > 2 && data.productReply.score < 4){
					data.productReply.evalName = '中评';
					data.productReply.evalImg = '../../static/eval/praise.png';
				}else if(data.productReply.score <= 2){
					data.productReply.evalName = '差评';
					data.productReply.evalImg = '../../static/eval/praise.png';
				}
			}
			productReply.value = data.productReply;
			replyChance.value = data.replyChance;
		}).catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
	}
	const api_replyconfig=()=>{
		const params = {}
		return replyconfig(props.apiType,params,token.value).then(({data}) => {
			reviewTags.value = data.reviewTags;
			picsCount.value = data.picsCount;
			sumCount.value = data.sumCount;
		})
		.then(()=>api_replyproduct())
		.catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
	}
	const previewImage=(i)=>{
	  uni.previewImage({
	      current: i,
	      urls:productReply.value.pics
	  });
	};
	const evals=(tag)=>{
		let url = '';
		if(tag){
			url=`/shopProDetail/evallist/evallist?productId=${props.apiType}&tag=${tag}`
		}else{
			url=`/shopProDetail/evallist/evallist?productId=${props.apiType}`
		}
		console.log('url',url);
		uni.navigateTo({
			url
		})
	};
	const faqList=()=>{
		uni.navigateTo({
			url:`/shopProDetail/faqList/faqList?productId=${props.apiType}`
		})
	}
	//生命周期钩子
	onMounted(() => {
		api_replyconfig();
	});
	onPullDownRefresh(()=>{
		api_replyconfig();
		uni.stopPullDownRefresh();
	})
	onReachBottom(()=>{})
</script>
<style lang="scss">
	.shop_comment{
		background: #FFFFFF;
		margin: 20rpx 20rpx 0rpx 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 8rpx rgba(0,0,0,.05);
		.shop_comment_head{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 40rpx 20rpx 20rpx;
			.shop_comment_head_title{
				font-size: 30rpx;
				color: #000000;
				font-weight: 500;
			}
			.shop_comment_head_arrow{
				font-size: 26rpx;
				color: #999999;
				position: relative;
			}
			.shop_comment_head_arrow::after {
			  content: '';
			  position: absolute;
			  top: 50%;
			  left: 100%;
			  transform: translate3d(0, -50%, 0) rotate(45deg);
			  width: 13rpx;
			  height: 13rpx;
			  border-top: 3rpx solid #999999;
			  border-right: 3rpx solid #999999;
			}
		}
		.shop_comment_tag{
			display: flex;
			overflow: hidden;
			flex-wrap: wrap;
			margin: 0rpx 20rpx 0rpx 20rpx;
			border-bottom: 1rpx solid #f6f6f6;
			.shop_comment_item{
				padding: 0rpx 20rpx 0rpx 20rpx;
				height: 45rpx;
				background: #FFD7D7;
				border-radius: 50rpx;
				border: 1px solid #FFA0A0;
				color: #FF5D5D;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 23rpx;
				margin-right: 10rpx;
				margin-bottom: 20rpx;
			}
		}
		.shop_comment_cont{
			padding: 0rpx 20rpx 0rpx 20rpx;
			.shop_comment_cont_ul{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 0;
				.shop_comment_cont_l{
					display: flex;
					align-items: center;
					.shop_comment_cont_userimg{
						width: 60rpx;
						height: 60rpx;
						border-radius: 50rpx;
						display: block;
						background-color: #f6f6f6;
					}
					.shop_comment_cont_username{
						color: #000000;
						font-size: 26rpx;
						margin-left: 15rpx;
					}
					.shop_comment_cont_amount{
						margin-left: 10rpx;
						width: 95rpx;
						height: 37rpx;
						background: linear-gradient(90deg,#FAEAD3 0%,#FED4AE 100%);
						border-radius: 4rpx;
						color: #745030;
						font-size: 22rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						.shop_comment_cont_img{
							width: 23rpx;
							height: 23rpx;
							display: block;
							margin-right: 5rpx;
						}
					}
				}
				.shop_comment_cont_ip{
					color: #999;
					font-size: 23rpx;
				}
			}
			.shop_comment_m{
				overflow: hidden;
				.shop_comment_title{
						font-size: 27rpx;
						color: #333333;
				}
				.shop_comment_item{
					margin: 20rpx 0;
					display: flex;
					flex-wrap: wrap;
					.shop_comment_itemImg{
						width: 155rpx;
						height: 155rpx;
						border-radius: 20rpx;
						display: block;
						margin-right: 20rpx;
					}
				}
			}
		}
		.faqlist{
			padding: 0rpx 20rpx 20rpx 20rpx;
			.shop_ask{
				font-size: 27rpx;
				color: #333333;
				font-weight: 500;
			}
			.shop_answer{
				font-size: 26rpx;
				color: #666666;
				margin-top: 10rpx;
			}
			.shop_padding text{
				 vertical-align: middle;
			}
			.shop_ask::before {
			  vertical-align: middle;
			  content: "";
			  display: inline-block;
			  width: 30rpx;
			  height: 30rpx;
			  background-image: url('../../static/shopdetail/ask.png');
			  background-size: cover;
			  margin-right: 10rpx; /* 调整图片与标题的间距 */
			}
			.shop_answer::before {
			  content: "";
			  display: inline-block;
			  width: 30rpx;
			  height: 30rpx;
			  background-image: url('../../static/shopdetail/answer.png');
			  background-size: cover;
			  margin-right: 10rpx; /* 调整图片与标题的间距 */
			  vertical-align: middle;
			}
		}
		
	}
</style>