<template>
  <view class="main">	
	<view class="cont">
		<view class="cont_top">
			<view class="cont_top_l">
				<view class="cont_top_text">商品评价 <text class="cont_top_num">{{count}}</text>/{{evalList.length}}</view>
				<view class="cont_top_btn">一键好评</view>
			</view>
			<view class="cont_top_r">匿名</view>
		</view>
		
		
		<template v-for="(item,index) in evalList" :key="index">
			<view class="cont_shop" @click="unfold(item)">
				<view class="cont_shop_l">
					<view class="cont_shop_img">
						<image class="cont_shop_imgUrl" :src="item.image" mode="widthFix"></image>
					</view>
					<view class="cont_shop_x">
						<view class="cont_shop_title"><text>{{item.storeName}}</text></view>
						<view class="cont_shop_type">
							<block v-for="(i,idx) in item.list" :key="idx">
								<view @click.stop="clickEval(item,i)" class="cont_goos" :class="i.checkedShow?'cont_goos_aver':''"><image class="cont_goos_img" :src="i.checkedShow?i.imgUrl_aver:i.imgUrl" mode="widthFix"></image>{{i.name}}</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<block v-if="item.show">
				<view class="cont_shop_edit">
					<view class="cont_text">
						<image class="cont_text_img" src="../../static/eval/editeval.png"></image>
						<textarea class="cont_textarea" :disable-default-padding="isIos" placeholder="可以从新鲜度、包装等多个角度描述哦～" v-model="item.comment"></textarea>
					</view>
					<view class="cont_ul">
						
						<view class="cont_li" v-for="(img,i) in item.uploadImg" :key="i">
							<view class="cont_upload_remove" @click="delImg(item,i)">
								<image class="cont_upload_remove_img" src="../../static/eval/closeImg.png" mode="widthFix"></image>
							</view>
							<image class="cont_li_img" :src="img" mode="aspectFill"></image>
						</view>
						
						<view class="cont_li cont_upload" @click="chooseImage(item)" v-if="item.uploadImg.length <= 5">
							<image class="cont_upload_img" src="../../static/eval/adds.png" mode="widthFix"></image>
							<view class="cont_upload_text">添加图片</view>
						</view>
						
					</view>
				</view>
				<view class="cont_shop_border"></view>
			</block>
		</template>
	
	</view>
	<view style="height: 300rpx;"></view>
	
	<view class="footer">
		<view class="footer_btn" :class="count == 0?'opy':''">提交</view>
	</view>
  </view>
</template>

<script setup>
import { loads } from '@/utils/index.js'
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"
import { orderReplyproduct } from "@/server/api.js"
const counterStore = useCounterStore(); // 使用 Store
const { proxy } = getCurrentInstance();
//使用pinia：storeToRefs方法包裹(保持响应式更新，不使用视图无法更新)
const {statusHeight,headerHeight,statusBartop } = storeToRefs(counterStore);
const active = ref(0);
const isIos = ref(false);
const orderNo = ref("");
const evalList = ref([]);

const count = computed(() => {
	const count = evalList.value.filter(item => item.productScore > 0);
	return count.length
});

const System = () =>{
	const phone = wx.getSystemInfoSync();
	if (phone.platform == 'ios') {
	    isIos.value = true
	} else if (phone.platform == 'android') {
	    isIos.value = false
	}
};
const unfold = (e) =>{
	evalList.value.forEach((item,index)=>{
		if(e.id == item.id){item.show = !item.show;}
	})
}
const clickEval = (item,i) =>{
	let productScore = 0;
	evalList.value.forEach(evalList=>{
		if(item.id == evalList.id){
			evalList.list.forEach(item=>{
				if(i.id == item.id){
					item.checkedShow = true;
					if(i.id == 1){
						productScore = 2;
					}else if(i.id == 2){
						productScore = 4;
					}else{
						productScore = 5;
					}
				}else{
					item.checkedShow = false;
				}
			})
			if(item.id == evalList.id){
				item.show = true;
				item.productScore = productScore;
			}
		}
	})
}
const api_orderReplyproduct=()=>{
	loads('', true)
	const params = {
		orderNo:orderNo.value
	}
	return orderReplyproduct(params).then(({data}) => {
		uni.hideLoading();
		data.forEach((item,index) => {
			item.id = index+1;
			if(data.length > 1){
				item.show = false;
			}else{
				item.show = true;
			}
			item.comment = "";
			item.pics = "";
			item.productScore = 0;
			item.serviceScore = 0;
			item.uploadImg = [];
			item.list = [
				{
				   id:1,
				   imgUrl:'../../static/eval/negative.png',
				   imgUrl_aver:'../../static/eval/negative_aver.png',
				   name:"差评",
				   checkedShow:false
				},
				{
				   id:2,
				   imgUrl:'../../static/eval/ordinary.png',
				   imgUrl_aver:'../../static/eval/ordinary_aver.png',
				   name:"一般",
				   checkedShow:false
				},
				{
				   id:3,
				   imgUrl:'../../static/eval/good.png',
				   imgUrl_aver:'../../static/eval/good_aver.png',
				   name:"好评",
				   checkedShow:false
				}
			]
		})
		evalList.value = data;
	}).catch(({message}) => {
		uni.hideLoading();
		uni.showModal({
			content:message,
			showCancel: false,
			success: () => {
				uni.navigateBack({
					delta:1
				})
			}
		})
	})
}
//删除上传图片
const delImg = (e,i) =>{
	evalList.value.forEach(item=>{
		if(e.id == item.id){
			console.log('000000')
			const tempFileimg = item.uploadImg.slice()
			// const picture = this.picture.slice()
			tempFileimg.splice(i, 1)
			// picture.splice(i, 1)
			item.uploadImg = tempFileimg
			// this.picture = picture
		}
	})
}
//选择图片
const chooseImage = (e) => {
  uni.chooseImage({
    count: 6, // 最多选择6张
    sizeType: ['original', 'compressed'], // 可选择原图或压缩图
    sourceType: ['album', 'camera'], // 可从相册或相机选择
    success: (res) => {
      // imageList.value = res.tempFilePaths; // 获取临时路径
	  evalList.value.forEach(item=>{
		  if(e.id == item.id){
			item.uploadImg.push(res.tempFilePaths)
		  }
	  })
	  console.log('evalList--',evalList.value);
    },
    fail: (err) => {
      console.error('选择图片失败:', err);
      uni.showToast({ title: '选择图片失败', icon: 'none' });
    }
  });
};



onLoad((options) => {
	System();
	if(options.orderNo){
		orderNo.value = options.orderNo;
	}
	api_orderReplyproduct();
});
onShow(() => {});
onReady(()=>{})
onPullDownRefresh(()=>{})
onReachBottom(()=>{})
</script>

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