<template>
  <view class="mian">
	<view class="head">
		<view class="eval_tag" v-for="(item,index) in reviewTags" :key="index" @click="referClick(item,index)"  :class="act == index?'eval_tag_active':''" ><image v-if="item.imgUrl" class="eval_tag_img" :src="item.imgUrl" mode="widthFix"></image>{{item.tag}} <text v-if="item.num >= 1">{{item.num >= 5000?'5000+':item.num}}</text></view>
	</view>	
	<view class="eval_item" v-for="(item,index) in List" :key="index">
		<view class="eval_item_top">
			<view class="eval_item_l">
				<image class="eval_item_userimg" :src="item.avatar" mode="widthFix"></image>
				<view class="eval_item_username">{{item.nickname}}</view>
				<!-- <view class="eval_item_userdesc">买过3次</view> -->
				<view class="eval_item_usertext"><image class="eval_item_usertext_img" :src="item.evalImg" lazy-load mode="widthFix"></image>{{item.evalName}}</view>
			</view>
			<view class="eval_item_r"></view>
		</view>
		<view class="eval_item_text"><text>{{item.comment}}</text></view>
		<view class="eval_item_ul">
			
			<view class="eval_item_li" v-for="(pics,index) in item.pics" :key="index">
				<image :src="pics" lazy-load mode="widthFix"  @click.stop="previewImage(item,index)"></image>
			</view>
		
		</view>
		<view class="eval_item_bottom">
			<view class="eval_item_time">{{item.createTime}}</view>
			<!-- <view class="eval_item_numa"><image src="../../static/eval/heart.png" lazy-load mode="widthFix"></image>67</view> -->
		</view>
	</view>
	<view style="height: 200rpx;"></view>
	<!-- 底部 -->
	<view class="footer">
		<view class="footer_cont">
			<view class="footer_l">
				<view class="footer_li">
					<view class="footer_icon">
						<image  class="footer_icon_img" src="../../static/shopdetail/collect.png" mode="widthFix"></image>
					</view>
					<view class="footer_name">收藏</view>
				</view>
				<view class="footer_li" @click="goCart()">
					<view class="footer_icon">
						<view class="footer_amount">45</view>
						<image  class="footer_icon_img" src="../../static/shopdetail/cart.png" mode="widthFix"></image>
					</view>
					<view class="footer_name">购物车</view>
				</view>
			</view>
			<view class="footer_r">
				<view class="footer_btn border_l">加入购物车</view>
				<view class="footer_btn footer_btn_bcg border_r" @click="orderConfirm">立即下单</view>
			</view>
		</view>
	</view>
  </view>
</template>

<script setup>
import { computed,ref,onMounted,onUnmounted,getCurrentInstance,nextTick } 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
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop,token } = storeToRefs(counterStore);
import { replyconfig,replylist } from '@/server/api'
const productId = ref('');//产品id
const havePics = ref('');//有图传1
const latest = ref('');//查最新传1
const limits = ref(10);//一页查多少条
const pages = ref(0);//第几页
const tag = ref('');//评论标名称
const type = ref(0);//评论等级:0全部，1好评，2中评，3差评
const total = ref(0);
const reviewTags = ref([]);
const picsCount = ref('');
const sumCount = ref('');
const decs = ref('');
const List = ref([]);
const act = ref(0);
const referClick=(item,index)=>{
	if(act.value == index) return false;
	act.value = index;
	if(index == 0){
		havePics.value = '';
		latest.value = '';
		tag.value = '';
		type.type = 0;
	}else if(index == 1 && item.tag == '图片'){
		havePics.value = 1;
		latest.value = '';
		tag.value = '';
		type.type = 0;
	}else if(index == 2){
		havePics.value = '';
		latest.value = 1;
		tag.value = '';
		type.type = 0;
	}else{
		havePics.value = '';
		latest.value = '';
		tag.value = item.tag;
		type.type = 0;
	}
	List.value = [];
	total.value = 0;
	decs.value = '';
	pages.value = 0;
	api_replylist()
}
const api_replyconfig=()=>{
		return replyconfig(productId.value).then(({data}) => {
			let arr = [
				{tag:"全部",num:data.sumCount},
				{tag:'最新',num:0,imgUrl:'../../static/eval/newest.png'},
			]
			let imgArr = [
				{tag:'图片',num:data.picsCount,imgUrl:'../../static/eval/img.png'}
			]
			if(data.picsCount >= 1){
				arr.splice(1,0, ...imgArr); // 在索引 1 的位置插入，不删除任何元素
			}
			data.reviewTags.unshift(...arr);
			if(tag.value){
				data.reviewTags.forEach((item,index)=>{
					if(tag.value == item.tag){act.value = index}
				})
			}
			reviewTags.value = data.reviewTags;
			picsCount.value = data.picsCount;
			sumCount.value = data.sumCount;
		})
		.then(()=>api_replylist())
		.catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
	}
const previewImage=(item,i)=>{
	  uni.previewImage({
	      current: i,
	      urls:item.pics
	  });
	};
const api_replylist=()=>{
		pages.value = pages.value + 1;
		decs.value = "—— 加载中... ——";
		if(List.value.length > 0 && List.value.length >= total.value){
			decs.value = "—— 嗷呜，已经到底啦 ——";
			return false
		}
		const params = {
			productId:productId.value,
			page:pages.value,
			limit:limits.value
		};
		if(havePics.value){
			params.havePics = havePics.value;
		}
		if(latest.value){
			params.latest = latest.value;
		}
		if(tag.value){
			params.tag = tag.value;
		}
		if(type.value == 1 || type.value == 2 || type.value == 3){
			params.type = type.value
		}else{
			params.type = type.value;
		}
		return replylist(params).then(({data}) => {
			total.value = data.total;
			decs.value = '—— 上拉加载更多 ——'
			data.list.forEach((item,index)=>{
				if(item.score >= 4){
					item.evalName = '好评',
					item.evalImg = '../../static/eval/praise.png'
				}else if(item.score > 2 && item.score < 4){
					item.evalName = '中评',
					item.evalImg = '../../static/eval/praise.png'
				}else if(item.score <= 2){
					item.evalName = '差评',
					item.evalImg = '../../static/eval/praise.png'
				}else{
					item.evalName = '',
					item.evalImg = ''
				}
			})
			List.value = List.value.concat(data.list);
			if(List.value < total.value){
				decs.value = '—— 上拉加载更多 ——'
			}else{
				decs.value = '—— 嗷呜，已经到底啦 ——';
			}
		}).catch(({message}) => {
			uni.showModal({
				content:message,
				showCancel: false
			})
		})
}
onLoad((options) => {
	if(options.productId){
		productId.value = options.productId;
	}
	if(options.havePics){
		havePics.value = options.havePics;
	}
	if(options.latest){
		latest.value = options.latest;
	}
	if(options.tag){
		tag.value = options.tag;
	}
	if(options.type == 0 || options.type == 1 || options.type == 2 || options.type == 3){
		type.value = options.type;;
	}
	api_replyconfig();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{
	List.value = [];
	total.value = 0;
	decs.value = '';
	pages.value = 0;
	api_replyconfig();
	uni.stopPullDownRefresh();
})
onReachBottom(()=>{
	api_replylist();
})
</script>

<style lang="scss">
	@import './style.scss';
</style>