<template>
	<div class="search">
		<div style="display: flex;">
			<div class="waiceng">
				<div class="title">订单信息</div>
				<div>订单编号：{{orderData.numberCode}}</div>
				<div>支付订单编号：{{'ORDER'+orderData.id}}</div>
			</div>
			<div class="waiceng">
				<div class="title">用户信息</div>
				<div>收货人：<span class="blue-color">{{orderData.receiverName}}</span></div>
				<div>收货电话：<span class="blue-color">{{orderData.receiverPhone}}</span></div>
				<div>收货地址：<span class="blue-color">{{orderData.receiverAddress}}</span></div>
				<div>要求送达时间：<span class="blue-color">{{orderData.deliveryInfo.mustFinishTime | formatDateTime}}</span></div>
			</div>
			<div class="waiceng">
				<div class="title">店铺信息</div>
				<div>店铺名称：<span class="blue-color">{{orderData.shopName}}</span></div>
				<div>店铺电话：<span class="blue-color">{{orderData.shopPhone}}</span></div>
				<div>配送方式： <span class="blue-color">{{orderData.deliveryType == 1?'配送':'不配送'}}</span></div>
			</div>
			<div class="waiceng">
				<div class="title">其他信息</div>
				<div>配送员：<span class="blue-color">{{orderData.deliveryInfo.workerName}}</span></div>
				<div>配送员电话：<span class="blue-color">{{orderData.deliveryInfo.workerPhone}}</span></div>
				<div>备注：<span class="blue-color">{{orderData.deliveryInfo.remark}}</span></div>
			</div>
		</div>
		<div style="display: flex;" v-if="orderData.status ==7 || orderData.status ==11">
			<div class="waiceng" style="width: 70%;">
				<div class="title" style="color:red">申请退款信息-用户全部退款</div>
				<div class="box" v-for="(item,index) in orderData.goodsList" :key="index">
					<div style="flex:1;">{{item.productName}}</div>
					<div class="price"> X{{item.quantity}}</div>
					<div class="price">¥{{item.price}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">餐盒费</div>
					<div class="price">¥{{orderData.packageFee}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">配送费</div>
					<div class="price">¥{{orderData.deliveryFee}}</div>
				</div>
				<div class="zong">
					合计退款：<span style="color:red;">¥{{orderData.totalAmount}}</span></div>
			</div>
			<div style="background: #fff;padding: 10px;border-radius: 10px;width: 30%;margin: 10;">
				<div class="title">售后原因说明</div>
				<textarea name="" id="" cols="30" rows="10" style="width: 100%;border: 1px solid #eee;"></textarea>
				<div style="display: flex;">
					<div class='btn' @click="returnAmountAllow(orderData,1)">同意退款</div>
					<div class='btn' @click="returnAmountAllow(orderData,0)">拒绝退款</div>
				</div>
			</div>
		</div>
		<div style="display: flex;">
			<div class="waiceng" style="width: 69%;">
				<div class="title">商品信息</div>
				<div class="box" v-for="(item,index) in orderData.goodsList" :key="index">
					<div style="flex:1;">{{item.productName}}</div>
					<div class="price"> X{{item.quantity}}</div>
					<div class="price">¥{{item.price}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">餐盒费</div>
					<div class="price">¥{{orderData.packageFee}}</div>
				</div>
				<div class="box">
					<div style="flex:1;">配送费</div>
					<div class="price">¥{{orderData.deliveryFee}}</div>
				</div>
				<div class="zong">活动优惠：<span style="color:red;">¥0</span> 下单返佣：<span style="color:red;">¥0</span>
					合计：<span style="color:#11cd6e;">¥{{orderData.totalAmount}}</span></div>
				<div v-if="orderData.chouyong" class="zong">平台服务费：<span class="blue-color">¥{{(orderData.chouyong).toFixed(2)}}</span> </div>
				<div v-if="orderData.yujishouru" class="zong">商家预计收入：<span class="blue-color">¥{{(orderData.yujishouru).toFixed(2)}}</span> </div>
			</div>
			<div class="waiceng" style="width: 29%;background: #eee;padding: 0;">
				<div style="background: #fff;padding: 10px;margin-bottom: 10px;border-radius: 10px;">
					<div class="title">物流信息</div>
					<div class="text">用户下单：{{orderData.createTime | formatDateTime}}</div>
					<div class="text">商家出餐：{{orderData.shopMakeTime | formatDateTime}}</div>
					<div class="text">配送员接单：{{orderData.deliveryInfo.acceptTime | formatDateTime}}</div>
					<div class="text">已到店：{{orderData.deliveryInfo.arriveTime | formatDateTime}}</div>
					<div class="text">配送员已取货：{{orderData.deliveryInfo.getTime | formatDateTime}}</div>
					<div class="text">配送员已送达：{{orderData.deliveryInfo.finishTime | formatDateTime}}</div>
				</div>
				<div v-if="orderData.status !=7 && orderData.status != 11" style="background: #fff;padding: 10px;border-radius: 10px;">
					<div class="title">运营订单备注</div>
					<textarea name="" id="" cols="30" rows="10" style="width: 100%;border: 1px solid #eee;"></textarea>
					<div class='btn' @click="returnOrder">退款</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		returnOrder,
		getOrderDetail,
		returnOrNoOrder
	} from "@/api/index";
	import {
		getByShopId
	} from "@/api/app";
	export default {
		name: "logisticsAddress",
		data() {
			return {
				orderData: {},
				returnFormData:{}
			};
		},
		filters: {
			formatDateTime(isoString) {
				if (!isoString) return ''
				const date = new Date(isoString)
				const year = date.getFullYear()
				const month = String(date.getMonth() + 1).padStart(2, '0')
				const day = String(date.getDate()).padStart(2, '0')
				const hours = String(date.getHours()).padStart(2, '0')
				const minutes = String(date.getMinutes()).padStart(2, '0')
				const seconds = String(date.getSeconds()).padStart(2, '0')
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
			}
		},
		methods: {
			initRecharge(data) {
				console.log('111112222', data);
				if(data.status == 7 || data.status == 11){
					this.orderData = data
					this.orderData.goodsList = this.orderData.items
					this.orderData.deliveryInfo = this.orderData.mallDeliveryOrder
					this.orderData.deliveryType = this.orderData.deliveryInfo.deliveryType
					this.orderData.deliveryFee = this.orderData.deliveryInfo.deliveryFee
					this.orderData.packageFee = data.mallOrder.packageFee
					this.orderData.numberCode = this.orderData.mallDeliveryOrder.numberCode
					console.log('88888', this.orderData);
				}else{
					getByShopId({
						"shopId": data.shopId
					}).then((res) => {
						if (res.success) {
							this.orderDetail(data.id,res.result)
						}
					});
				}
				
				
			},
			orderDetail(id,shopTakeaway) {
				getOrderDetail(id).then((res) => {
					this.loading = false;
					if (res.success) {
						this.orderData = res.result
						//商家预计收入的计算
						let price = this.orderData.goodsAmount+this.orderData.packageFee
						if(this.orderData.orderType == 1){
							this.orderData.chouyong = price/100 * shopTakeaway.commissionRateOne
							this.orderData.yujishouru = price - this.orderData.chouyong
						}else{
							this.orderData.chouyong = price/100 * shopTakeaway.commissionRateMore
							this.orderData.yujishouru = price - this.orderData.chouyong
						}
					}
				});
			
			},
			returnAmountAllow(item,status){
				let titleText = status == 1 ? '确定同意该申请吗？' : '确定拒绝该申请吗？';
				//退款提示
				
				if(item.groupOrderIds != null && item.groupOrderIds != ''){
					titleText += '该订单为面对面配送单，所有参团订单将同步处理';
					for(let i = 0; i < this.returnData.length;i++){
						if(item.groupOrderIds.indexOf(this.returnData[i].mallOrder.id) != -1){
							//需要展示具体订单信息这里有
							this.groupOrderIdList.push(this.returnData[i]);
						}
					}
				}else{
					this.groupOrderIdList = []
				}
				
				this.$Modal.confirm({
					title: "提示",
					content: titleText,
					loading: true,
					onOk: () => {
						this.$Modal.remove();
						if(this.groupOrderIdList != [] && this.groupOrderIdList.length > 0){
							for(let i = 0; i < this.groupOrderIdList.length;i++){
								this.processReturn(this.groupOrderIdList[i], status);
							}
						}else{
							this.processReturn(item, status);
						}
					},
				});
			},
			processReturn(item,status){
				let url = ''
				//退款
				if(item.status == 7){
					//不同意
					if(status == 0){
						this.returnFormData.status = 2
					}else{
						this.returnFormData.status = 1
					}
				}else if(item.status == 11){
					//售后
					if(status == 0){
						this.returnFormData.status = 5
					}else{
						this.returnFormData.status = 4
					}
				}
				console.log('12121212',item)
				this.returnFormData.id = item.id;
				this.returnFormData.linkId = item.linkId;
				this.returnFormData.orderId = item.orderId;
				this.returnFormData.deliveryType = item.mallOrder.deliveryType;
				this.returnFormData.orderType = item.mallOrder.orderType;
				this.returnFormData.refundAmount = item.refundAmount;
				this.returnFormData.refundType = item.refundType;
				this.returnFormData.refundTypeStatus = item.refundTypeStatus;
				
				let that = this;
				returnOrNoOrder(this.returnFormData).then((res) => {
					this.loading = false;
					if (res.success) {
						this.$Message.success("售后成功");
						this.$emit('closePage')
					}
				});
			},
			getMinutesDiff(time1, time2) {
				console.log('time1',time1)
				console.log('time2',time2)
				// 将参数转换为 Date 对象，参数为 1 时取当前时间
				const date1 = time1 === 1 ? new Date() : new Date(time1);
				const date2 = time2 === 1 ? new Date() : new Date(time2);
			
				// 计算毫秒差，取绝对值，转换为分钟，向上取整
				const diffMs = Math.abs(date2 - date1);
				const diffMinutes = Math.ceil(diffMs / (1000 * 60));
			
				return diffMinutes;
			},
			returnOrder(){
				returnOrder({
					orderId:this.orderData.id,
					userId:this.orderData.userId
				}).then((res) => {
					this.loading = false;
					if (res.success) {
						this.$Message.success("取消订单成功");
					}
				});
			}
		}
	};
</script>
<style lang="less">
	.search {
		background: #eee;
	}

	.title {
		font-weight: 700;
		font-size: 15px;
	}

	.waiceng {
		background: #fff;
		border-radius: 10px;
		margin: 5px;
		padding: 10px;
	}

	.btn {
		width: 75px;
		height: 30px;
		background: #4487fe;
		font-size: 14px;
		color: #fff;
		border-radius: 7px;
		text-align: center;
		line-height: 30px;
		margin: 0 auto;
	}

	.zong {
		text-align: right;
		height: 40px;
		line-height: 40px;
	}

	.box {
		display: flex;
		border-bottom: 1px solid #eee;
		line-height: 30px;
		height: 30px px;
	}

	.text {
		font-weight: bold;
		color: #777;
	}

	.price {
		flex: 1;
		text-align: right
	}

	.blue-color {
		color: #056dae;
	}
</style>