<template>
	<el-layout>
		<el-navbar :placeholder="true" :fixed="true" :border="true" title="订单评价"></el-navbar>
		
		<view class="wrapper" v-if="!isEmpty(order)">
			
			<view class="goods">
				
				<view class="goods-box" v-for="(value,index) in order.goods" :key="index">
					<view class="thumb-image">
						<image :src="value.photo"></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ value.goods_name }}</view>
						<view class="goods-sku" v-if="!isEmpty(value.spec)">{{ value.spec }}</view>
						<view class="goods-price">￥<text>{{ value.sell_price }}</text></view>
						<view class="btn" :class="{ disable: value.is_comment == 1 }" v-if="value.is_comment == 1" @click="showToast">已评价</view>
						<view class="btn" v-if="value.is_comment == 0" @click="navigateTo(`pages/order/comment?id=${value.id}`)">去评价</view>
					</view>
					<view class="num">x{{ value.goods_total_nums }}</view>
				</view>
				
			</view>
			
		</view>
		
		<el-loading v-model="isLoading"></el-loading>
	</el-layout>
</template>

<script setup>
	import { onLoad,onShow } from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { isEmpty,inArray } from "@/el-ui/libs/check";
	import { navigateTo } from "@/el-ui/libs/navigate";
	
	const isLoading = ref(true);
	const options = ref();
	onLoad((option)=>{
		options.value = option;
	});
	
	onShow(()=>{
		getOrderDetail(options.value);
	});
	
	const order = ref({});
	const getOrderDetail = (params)=>{
		uni.$http.get("order.comment/index",params).then(res=>{
			isLoading.value = false;
			if(res.code){
				order.value = res.data;
			}
		});
	}
	
	const showToast = ()=>{
		uni.$layer.showToast("该商品已评价");
	}
	
</script>

<style lang="scss" scoped>
	.wrapper {
		padding: 0 20rpx 20rpx 20rpx;
		
		.goods {
			margin-top: 20rpx;
			padding: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			.goods-box {
				display: flex;	
				margin-bottom: 20rpx;
				border-bottom: 1px solid #fbfbfb;
				padding-bottom: 10rpx;
				&:last-child {
					padding-bottom: 0;
					margin-bottom: 0;
					border-bottom: 0;
				}
				.thumb-image {
					padding: 0 10rpx;
					image {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
					}
				}
				.goods-info {
					width: 100%;
					padding: 0 20rpx;
					display: flex;
					flex-direction: column;
					.goods-name {
						min-height: 40rpx;
						max-height: 80rpx; 
						font-size: 27rpx; 
						display: -webkit-box;
						overflow: hidden; 
						word-break:break-all;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
					}
					.goods-sku {
						padding: 5rpx 0 10rpx 0;
						font-size: 24rpx;
						color: #888;
					}
					.goods-price {
						color: #eb5d2a;
						font-size: 24rpx;
						text {
							font-size: 30rpx;
						}
					}
					.btn {
						width: 100rpx;
						border: 1px solid #ddd;
						color: #333;
						border-radius: 20rpx;
						font-size: 24rpx;
						text-align: center;
						padding: 5rpx 10rpx;
						margin-top: 10rpx;
						margin-bottom: 10rpx;
						&.disable {
							background-color: #ddd;
							color: #fff;
						}
					}
				}
				.num {
					color: #888;
					font-size: 28rpx;
					padding: 0 10rpx;
				}
			}
			.list-wrap {
				display: flex;
				flex-direction: column;
				font-size: 28rpx;
				.list-box{
					display: flex;
					justify-content: space-between;
					height: 70rpx;
					line-height: 70rpx;
					view {
						
					}
				}
			}
		}
		
	}
</style>