<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">
							<text class="gift" v-if="value.type == 2">[赠品]</text>
							<text>{{ value.goods_name }}</text>
						</view>
						<view class="goods-sku" v-if="!isEmpty(value.spec)">{{ value.spec }}</view>
						<view class="goods-price">￥<text>{{ value.sell_price }}</text></view>
					</view>
					<view class="num">x{{ value.goods_total_nums }}</view>
				</view>
				
			</view>
			
			<view class="order">
				<view class="list">
					<view>订单状态</view>
					<view><text style="color: red;">{{ order.text }}</text></view>
				</view>
				<view class="list" v-if="order.refund.audit_status > 0">
					<view>退款状态</view>
					<view><text style="color: red;">{{ order.refund.text }}</text></view>
				</view>
				<view class="list" v-if="order.refund.audit_status == 3">
					<view>商家回复</view>
					<view><text style="color: red;">{{ order.refund.refuse_desc || '-' }}</text></view>
				</view>
				<view class="list">
					<view>订单编号</view>
					<view><text>{{ order.order_no }}</text></view>
				</view>
				<view class="list">
					<view>下单时间</view>
					<view><text>{{ order.create_time }}</text></view>
				</view>
			</view>
			
			<view class="order">
				<view class="list">
					<view>商品总价 <text>共{{ order.goods.length }}件商品</text></view>
					<view class="price">￥<text>{{ order.real_amount }}</text></view>
				</view>
				<view class="list">
					<view>运费</view>
					<view class="price">￥<text>{{ order.real_freight }}</text></view>
				</view>
				<view class="list">
					<view>实付款</view>
					<view class="price">￥<text>{{ order.order_amount }}</text></view>
				</view>
			</view>
			
			<view class="form" v-if="order.refund.audit_status == 0">
				<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 }" v-if="order.refund.audit_status == 0">
				<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 { navigateTo,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.refund/detail",params).then(res=>{
			isLoading.value = false;
			if(res.code){
				order.value = res.data;
			}
		});
	}
	
	const message = ref('');
	const onEventMessage = (ev)=>{
		message.value = ev.detail.value;
	}
	
	const isSubmit = ref(false);
	const onSubmit = ()=>{
		if(isSubmit.value){
			return false;
		}
		
		if(isEmpty(message.value)){
			uni.$layer.showToast("请填写退款说明");
			return false;
		}
		
		isSubmit.value = true;
		uni.$http.post("order.refund/save",{ id: options.value.order_id, message: message.value }).then(res=>{
			isSubmit.value = false;
			if(res.code){
				uni.$layer.showToast("提交成功");
				redirectTo(`pages/refund/index`);
			}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;
						.gift {
							font-size: 22rpx;
							color: #eb5d2a;
						}
					}
					.goods-sku {
						padding: 5rpx 0 10rpx 0;
						font-size: 24rpx;
						color: #888;
					}
					.goods-price {
						color: #eb5d2a;
						font-size: 24rpx;
						text {
							font-size: 30rpx;
						}
					}
				}
				.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 {
						
					}
				}
			}
		}
		.order {
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 15rpx;
			padding: 20rpx;
			.price {
				color: #eb5d2a;
			}
			.list {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				font-size: 28rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-bottom: 1px solid #fbfbfb;
				&:last-child {
					padding-bottom: 0;
					border-bottom: 0;
				}
				view {
					&:nth-child(1){
						text {
							font-size: 24rpx;
							color: #888;
						}
					}
					&:nth-child(2){
						text {
							font-size: 26rpx;
						}
					}
				}
			}
		}
		.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;
			margin-bottom: 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>