<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">
					<view class="thumb-image">
						<image :src="order.goods.photo"></image>
					</view>
					<view class="goods-info">
						<view class="goods-name">{{ order.goods.goods_name }}</view>
						<view class="goods-sku" v-if="!isEmpty(order.goods.spec)">{{ order.goods.spec }}</view>
						<view class="goods-price">￥<text>{{ order.goods.sell_price }}</text></view>
					</view>
					<view class="num">x{{ order.goods.goods_total_nums }}</view>
				</view>
				
			</view>
			
			<view class="images-list">
				<uni-file-picker 
				file-mediatype="image"
				limit="5" 
				title="最多选择5张图片"
				@select="onSelectImage"
				@delete="onRemoveImage"
				></uni-file-picker>
			</view>
			
			<view class="form">
				<view class="form-item">
					<view class="label">评分</view>
					<view>
						<uni-rate size="18" v-model="rate" @change="onEventRate" />
					</view>
				</view>
				<view class="form-item">
					<view class="message">
						<textarea maxlength="100" @input="onEventMessage" placeholder-style="color:#888" placeholder="请输入商品评论"/>
					</view>
				</view>
			</view>
			
			<view class="btn" :class="{ active: isSubmit }">
				<view @click="onSubmit">提交评论</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 { redirectTo } 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/detail",params).then(res=>{
			isLoading.value = false;
			if(res.code){
				order.value = res.data;
			}
		});
	}
	
	let rate = ref(5);
	const onEventRate = (ev)=>{
		rate.value = ev.value;
	}
	
	const message = ref('');
	const onEventMessage = (ev)=>{
		message.value = ev.detail.value;
	}
	
	const imagesList = ref([]);
	const onSelectImage = (ev)=>{
		uni.$http.upload("order.comment/upload",ev.tempFilePaths[0],{ name: "file", formData: options.value }).then(res=>{
			if(!res.code){
				uni.$layer.showToast(res.msg);
			}else{
				imagesList.value.push(res.data);
			}
		}).catch(error=>{
			uni.$layer.showToast(error);
		});
	}
	
	const onRemoveImage = (ev)=>{
		imagesList.value.splice(ev.index, 1);
	}
	
	const isSubmit = ref(false);
	const onSubmit = ()=>{
		if(isSubmit.value){
			return false;
		}
		
		if(isEmpty(message.value)){
			uni.$layer.showToast("请填写商品评论");
			return false;
		}
		
		if(rate.value <= 0){
			uni.$layer.showToast("请选择评分");
			return false;
		}
		
		isSubmit.value = true;
		uni.$http.post("order.comment/save",{ id: options.value.id, message: message.value, photo: imagesList.value, point: rate.value }).then(res=>{
			isSubmit.value = false;
			if(res.code){
				uni.$layer.showToast("评论成功");
				redirectTo(`pages/order/evaluate?order_id=${order.value.order_id}`);
			}else{
				uni.$layer.showToast(res.msg);
			}
		});
	}
</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;
					}
				}
				.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 {
						
					}
				}
			}
		}
		.images-list {
			background-color: #fff;
			margin-top: 20rpx;
			border-radius: 15rpx;
			padding: 20rpx;
		}
		.form {
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 20rpx;
			.form-item {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				border-bottom: 1px solid #eee;
				view {
					padding: 10rpx 0;
					&.label {
						width: 120rpx;
						text-align: center;
						font-size: 26rpx;
					}
					&.message {
						width: 100%;
						padding: 10rpx 20rpx;
						height: 150rpx;
						textarea {
							width: 100%;
							height: 150rpx;
						}
					}
				}
			}
		}
		.btn {
			width: 92%;
			margin: 0 auto;
			margin-top: 50rpx;
			&.active {
				view {
					background-color: #ddd;
				}
			}
			view {
				width: 100%;
				color: #ffffff;
				border-color: #eb5529;
				background-color: #eb5529;
				height: 40px;
				line-height: 40px;
				border-radius: 35rpx;
				font-size: 32rpx;
				text-align: center;
			}
		}
	}
</style>