<!-- 订单评价页 -->
<template>
	<view class="wanl-comment">
		<view class="edgeInsetTop"></view>

		<!-- 商品评价卡片（每个商品一张） -->
		<view class="subject margin-lr-bj bg-white radius-bock margin-bottom-bj" v-for="(item, index) in goodsList" :key="item.id">
			<!-- 商品信息 -->
			<view class="goods padding-bj">
				<view class="cu-avatar radius-bock" :style="{ backgroundImage: 'url(' + item.image + ')' }"></view>
				<view class="content">
					<view class="text-lg text-cut"><text>{{ item.title }}</text></view>
					<view class="wanl-gray-dark">{{ item.difference }}</view>
				</view>
			</view>

			<!-- 好评/中评/差评选择 -->
			<view class="comment padding-lr-bj padding-top-bj">
				<view class="comment-title">{{ $t('orderComment.goodsReview') }}</view>
				<view class="comment-operate">
					<view class="item" :class="{ action: item.state == 0 }" @tap="stateType(0, index)"><text class="wlIcon-haoping"></text>{{ $t('mall.comment.good') }}</view>
					<view class="item" :class="{ action: item.state == 1 }" @tap="stateType(1, index)"><text class="wlIcon-chaping"></text>{{ $t('mall.comment.pertinent') }}</view>
					<view class="item" :class="{ action: item.state == 2 }" @tap="stateType(2, index)"><text class="wlIcon-chaping"></text>{{ $t('mall.comment.poor') }}</view>
				</view>
			</view>

			<!-- 评价文字输入 -->
			<view class="describe cu-form-group margin-bj radius-bock padding-bj">
				<textarea maxlength="-1" v-model="item.comment" :placeholder="$t('orderComment.placeholder')"></textarea>
			</view>

			<!-- 评价图片上传（最多4张） -->
			<view class="upload cu-form-group padding-lr-bj">
				<view class="grid col-4 grid-square flex-sub">
					<view class="bg-img" v-for="(vo, key) in item.imgList" :key="key" @tap="viewImage(index, key)">
						<image :src="vo" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index, key)"><text class="wlIcon-31guanbi"></text></view>
					</view>
					<view class="solids" @tap="chooseImage(index)" v-if="item.imgList.length < 4">
						<text class="wlIcon-tupian1"></text>
					</view>
				</view>
			</view>
		</view>

		<!-- 店铺评分 -->
		<view class="operate margin-bj padding-bj bg-white radius-bock" v-if="shop.shopname">
			<view class="operate-title"><text class="wlIcon-dianpu1 margin-right-sm"></text>{{ shop.shopname }}</view>
			<!-- 描述相符 -->
			<view class="score">
				<view class="title">{{ $t('orderComment.describe') }}</view>
				<view class="star-row">
					<view v-for="s in 5" :key="s" class="star-item" :class="{ active: s <= shop.describe }" @tap="shop.describe = s">★</view>
				</view>
				<view class="margin-left wanl-gray-light">{{ scoreInfo(shop.describe) }}</view>
			</view>
			<!-- 物流服务 -->
			<view class="score">
				<view class="title">{{ $t('orderComment.logistics') }}</view>
				<view class="star-row">
					<view v-for="s in 5" :key="s" class="star-item" :class="{ active: s <= shop.logistics }" @tap="shop.logistics = s">★</view>
				</view>
				<view class="margin-left wanl-gray-light">{{ scoreInfo(shop.logistics) }}</view>
			</view>
			<!-- 服务态度 -->
			<view class="score">
				<view class="title">{{ $t('orderComment.service') }}</view>
				<view class="star-row">
					<view v-for="s in 5" :key="s" class="star-item" :class="{ active: s <= shop.service }" @tap="shop.service = s">★</view>
				</view>
				<view class="margin-left wanl-gray-light">{{ scoreInfo(shop.service) }}</view>
			</view>
			<!-- 发货速度 -->
			<view class="score">
				<view class="title">{{ $t('orderComment.deliver') }}</view>
				<view class="star-row">
					<view v-for="s in 5" :key="s" class="star-item" :class="{ active: s <= shop.deliver }" @tap="shop.deliver = s">★</view>
				</view>
				<view class="margin-left wanl-gray-light">{{ scoreInfo(shop.deliver) }}</view>
			</view>
		</view>

		<view class="edgeInsetBottom"></view>

		<!-- 底部提交按钮 -->
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button @tap="addData()" class="cu-btn wanl-bg-orange lg">{{ $t('orderComment.submit') }}</button>
		</view>
	</view>
</template>

<script>
import { pullOrderInfo, postOrderComment } from '@/features/mall/mall-gateway'

export default {
	data() {
		return {
			order_id: 0,
			shop: { id: 0, shopname: '', describe: 0, logistics: 0, service: 0, deliver: 0 },
			goodsList: []
		}
	},
	onLoad(option) {
		this.loadData(option.order_id)
	},
	methods: {
		/**
		 * 加载订单信息，提取商品列表用于评价
		 */
		async loadData(order_id) {
			try {
				const res = await pullOrderInfo({ id: order_id })
				this.order_id = res.id
				this.shop.id = res.shop_id
				this.shop.shopname = res.shop.shopname
				// 将订单商品转为评价表单数据
				this.goodsList = res.goods.map(item => ({
					id: item.id,
					goods_id: item.goods_id,
					difference: item.difference,
					image: item.image,
					title: item.title,
					imgList: [],
					comment: '',
					state: 0
				}))
			} catch (e) {
				console.error('[comment] loadData', e)
			}
		},

		/**
		 * 提交评价
		 * 校验店铺评分是否都已选择
		 */
		async addData() {
			if (this.shop.describe == 0 || this.shop.logistics == 0 || this.shop.service == 0 || this.shop.deliver == 0) {
				uni.showToast({ title: this.$t('orderComment.rateShop'), icon: 'none' })
				return
			}
			try {
				await postOrderComment({
					order_id: this.order_id,
					shop: {
						id: this.shop.id,
						describe: this.shop.describe,
						logistics: this.shop.logistics,
						service: this.shop.service,
						deliver: this.shop.deliver
					},
					goodsList: this.goodsList
				})
				uni.navigateTo({ url: '/pages/page/success?type=comment' })
			} catch (e) {
				uni.showToast({ title: this.$t('orderComment.failed'), icon: 'none' })
			}
		},

		/** 切换好评/中评/差评 */
		stateType(type, index) {
			this.goodsList[index].state = type
		},

		/** 预览评价图片 */
		viewImage(index, key) {
			uni.previewImage({ urls: this.goodsList[index].imgList, current: this.goodsList[index].imgList[key] })
		},

		/** 删除评价图片 */
		delImg(index, key) {
			this.goodsList[index].imgList.splice(key, 1)
		},

		/** 选择评价图片（最多4张） */
		chooseImage(index) {
			uni.chooseImage({
				count: 4,
				sizeType: ['original', 'compressed'],
				sourceType: ['album'],
				success: res => {
					for (let i = 0; i < res.tempFilePaths.length; i++) {
						this.goodsList[index].imgList.push(res.tempFilePaths[i])
					}
				}
			})
		},

		/** 星级评分文字描述 */
		scoreInfo(index) {
			return ['', this.$t('orderComment.score1'), this.$t('orderComment.score2'), this.$t('orderComment.score3'), this.$t('orderComment.score4'), this.$t('orderComment.score5')][index] || ''
		}
	}
}
</script>

<style scoped>
.wanl-comment { background: #f3f5f7; min-height: 100vh; }
.edgeInsetTop { height: var(--status-bar-height); }

/* 卡片 */
.wanl-comment .subject, .wanl-comment .operate { box-shadow: 0 8rpx 28rpx rgba(17, 24, 39, 0.06); border-radius: 18rpx !important; overflow: hidden; }

/* 商品信息行 */
.goods { display: flex; align-items: center; }
.goods .cu-avatar { width: 100rpx; height: 100rpx; margin-right: 20rpx; }
.goods .content { flex: 1; min-width: 0; }

/* 评价类型选择 */
.comment-title { font-size: 28rpx; font-weight: 600; margin-bottom: 16rpx; }
.comment-operate { display: flex; gap: 20rpx; }
.comment-operate .item { display: flex; align-items: center; gap: 6rpx; padding: 10rpx 24rpx; border-radius: 999rpx; background: #f5f5f5; font-size: 24rpx; color: #666; }
.comment-operate .item.action { background: linear-gradient(135deg, #ff6b35, #ff3d2e); color: #fff; }

/* 评价文字输入 */
.describe textarea { width: 100%; min-height: 120rpx; font-size: 26rpx; }

/* 店铺评分 */
.operate-title { font-size: 28rpx; font-weight: 600; margin-bottom: 20rpx; }
.score { display: flex; align-items: center; margin-bottom: 16rpx; }
.score .title { width: 140rpx; font-size: 26rpx; color: #333; }
.star-row { display: flex; gap: 8rpx; }
.star-item { font-size: 36rpx; color: #ddd; }
.star-item.active { color: #ff4e02; }

/* 底部提交按钮 */
.wanlian.cu-bar.tabbar.foot { background: rgba(255, 255, 255, 0.96) !important; backdrop-filter: blur(10px); border-top: 1px solid rgba(0, 0, 0, 0.06); }
.wanlian.cu-bar.tabbar.foot .cu-btn { width: calc(100% - 50rpx); background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; border: none !important; color: #fff !important; font-size: 32rpx; height: 86rpx; }

/* 颜色 */
.wanl-bg-orange { background: linear-gradient(135deg, #ff6b35, #ff3d2e) !important; color: #fff !important; }
.edgeInsetBottom { height: 100rpx; }
</style>
