<!-- 订单状态详情 -->
<template>
	<view class="order-detail-page">
		<view class="header">
			<image src="@/static/order/bg-img.png" class="header-bg"></image>
			<view class="go-back" @click="goBack">
				<image src="@/static/order/fh.png" mode="" class="back-img"></image>
			</view>
			<view class="header-title">订单详情</view>
			<view class="header-main">
				<view class="header-detail">
					<image class="header-shop-img" :src="detailData.productCoverResource.url" mode=""
						v-if="detailData.productCoverResource"></image>
					<view class="header-price">
						<view class="header-shop-name">{{detailData.productName}}</view>
						<view class="header-info">
							<view class="header-shop-price">
								¥
								<text class="price">{{detailData.amount}}</text>
							</view>
							<view class="header-num">x{{detailData.quantity}}</view>
						</view>
					</view>
				</view>
				<view class="price-detail">
					<!-- <view class="price-detail-item">
						<view class="price-detail-item-title">运费</view>
						<view class="price-detail-item-value">¥0</view>
					</view> -->
					<view class="price-detail-item">
						<view class="price-detail-item-title">订单金额</view>
						<view class="price-detail-item-value">¥{{detailData.amount}}</view>
					</view>
					<!-- <view class="price-detail-item">
						<view class="price-detail-item-title">
							<image src="@/static/index/jian.png" class="imgs" mode=""
								style="width: 28rpx;height: 28rpx;"></image>
							满减优惠
						</view>
						<view class="price-detail-item-value red">- ¥0</view>
					</view>
					<view class="price-detail-item">
						<view class="price-detail-item-title">
							<image src="@/static/index/hb.png" class="imgs" mode="" style="width: 26rpx;height: 27rpx;">
							</image>
							红包
						</view>
						<view class="price-detail-item-value red">- ¥0</view>
					</view> -->
				</view>


				<view class="totalAmount">
					<view class="totalAmount-title">{{detailData.method === 'POINTS' ? '实付积分：' : '实付金额：'}}</view>
					<view v-if="detailData.method === 'POINTS'" class="totalAmount-price">{{detailData.points}}</view>
					<view class="totalAmount-price">¥{{detailData.totalAmount}}</view>
				</view>
			</view>
			<view class="main">
				<view class="order-info">
					<view class="order-info-item">
						<view class="order-label">订单编号：</view>
						<view class="order-value">
							<view class="order-no-val">{{detailData.no}}</view>
							<image src="@/static/order/fz.png" mode="" @click="copy(detailData.no)" class="copy-img">
							</image>
						</view>
					</view>
					<view class="order-info-item" style="margin: 32rpx 0;">
						<view class="order-label">下单时间：</view>
						<view class="order-value">{{detailData.paidAt ? formatDateTime(detailData.paidAt) : '-'}}</view>
					</view>
					<view class="order-info-item">
						<view class="order-label">订单状态：</view>
						<view class="order-value">{{statusObj[detailData.status]}}</view>
					</view>
					<!-- 待收货时展示 -->
					<view class="order-info-item" style="margin-top: 32rpx;" v-if="detailData.status !== 'CANCELED'">
						<view class="order-label">支付方式：</view>
						<view class="order-value">{{detailData.method ? paidWith[detailData.method] : '-'}}</view>
					</view>
					<view class="order-info-item" style="margin-top: 32rpx;" v-if="detailData.status !== 'CANCELED'">
						<view class="order-label">配送服务：</view>
						<view class="order-value">¥ {{detailData.deliveryFee || 0}}</view>
					</view>
			
			
					<view class="detail-btn" v-if="detailData.status === 'WAITING_FOR_RECEIPT' || detailData.status === 'SHIPPED' || detailData.status === 'RECEIVED' || detailData.status === 'COMPLETED'">
						<!-- <view class="btn btn-border">联系客服</view> -->
						<view class="btn btn-border" @click="logistics"
							v-if="detailData.status === 'WAITING_FOR_RECEIPT' || detailData.status === 'SHIPPED' || detailData.status === 'RECEIVED'">
							物流信息</view>
							<view class="btn " v-if="detailData.status === 'COMPLETED'" @click.stop="againProduct">再次购买</view>
						<view class="btn" @click="orderReceipt"
							v-if="detailData.status === 'WAITING_FOR_RECEIPT' || detailData.status === 'RECEIVED'">
							确认收货</view>
					</view>
				</view>
				<!-- <view class="order-info" v-if="detailData.method != 'NONE'">
					<view class="order-info-item" style="margin-bottom: 32rpx;">
						<view class="order-label">配送服务：</view>
						<view class="order-value">¥ {{detailData.deliveryFee || 0}}</view>
					</view>
					<view class="order-info-item">
						<view class="order-label">{{detailData.method === 'POINTS' ? '实付积分：' : '实付金额：'}}</view>
						<view class="order-value" v-if="detailData.method === 'POINTS'">{{detailData.points}}</view>
						<view class="order-value" v-else>¥{{detailData.totalAmount}}</view>
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- 	<view class="footer">
			<view class="btn-hui" v-if="detailData.status === 'COMPLETED'">删除订单</view>
			<view class="btn " v-if="detailData.status === 'WAITING_FOR_RECEIPT'">确认收货</view>
			<view class="btn" v-if="detailData.status === 'COMPLETED'" @click.stop="againProduct(item)">再次购买</view>
		</view> -->
		<view class="dlg" v-if="openShow" @click="close">
			<view class="dlg-main" @click.stop="">
				<view class="popup-scroll">
					<logistics :wlInfo="detailData.logistics" :img="detailData.productCoverResource.url"
						:name="detailData.productName" :address="address" :logisticsStatus="detailData.logisticsStatus">
					</logistics>
				</view>
				<image src="@/static/order/close.png" mode="" class="popup-close" @click.stop="close"></image>
			</view>
		</view>
		<!-- <popup-view v-model="openShow" mode="center" zIndex="11"  >

			<view class="popup-main">
				<view class="popup-scroll">
					<logistics :wlInfo="wlInfo"></logistics>
				</view>
			</view>
			<image src="@/static/order/close.png" mode="" class="popup-close"></image>
		</popup-view> -->
	</view>
</template>

<script>
	import { myMixins } from "@/mixins/mixins.js";
	import {
		orderDetail,
		delOrder,
		orderReceive,
		orderCancel,
		orderReceiptApi,
		orderIdDetail
	} from '@/API/order.js'
	import {
		mathAdd
	} from '@/utils/mathUtils.js'
	import {
		uniCopy
	} from '@/utils/uniCopyUtils.js'
	import logistics from '@/components/xinyu-logistics/xinyu-logistics.vue'

	export default {
	mixins: [myMixins],
		data() {
			return {
				id:'',
				no: '',
				detailData: {
					logistics: {}
				},
				totalPrice: "",
				statusList: [{
						label: "待付款",
						value: 'WAITING_FOR_PAYMENT'
					},
					{
						label: "待发货",
						value: 'WAITING_FOR_SHIPMENT'
					},
					{
						label: "已发货",
						value: 'SHIPPED'
					},
					{
						label: "待收货",
						value: 'WAITING_FOR_RECEIPT'
					},
					{
						label: "已收货",
						value: 'RECEIVED'
					},
					{
						label: "已完成",
						value: 'COMPLETED'
					},
					{
						label: "已取消",
						value: 'CANCELED'
					},
					{
						label: "已退款",
						value: 'REFUNDED'
					},
					{
						label: "已回收",
						value: 'RECOVERED'
					},
				],
				statusObj: {
					"WAITING_FOR_PAYMENT": "待付款",
					"WAITING_FOR_SHIPMENT": "待发货",
					"SHIPPED": "已发货",
					"WAITING_FOR_RECEIPT": "待收货",
					"RECEIVED": "已收货",
					"COMPLETED": "已完成",
					"CANCELED": "已取消",
					"REFUNDED": "已退款",
					"RECOVERED": "已回收"
				},
				paidWith: {
					'POINTS': '繁豆支付',
					'ALIPAY': '支付宝支付',
					'WECHAT': '微信支付',
					'NONE': "无需支付"
				},
				openShow: false,
				address: '',
			}
		},
		components: {
			logistics
		},
		onLoad(opation) {
			if(opation.id){
				this.id = opation.id
				this.getDetail()
			}else{
				this.no = opation.no
				this.getDetail()
			}
			
		},
		methods: {
			orderReceipt() {
				uni.showLoading()
				orderReceiptApi({
					id: this.detailData.id
				}).then(res => {
					uni.hideLoading(),
						this.$api.msg(res.message)
					if (res.code === 200) {
						this.getDetail()
					}
				})
			},
			formatDateTime(value) {
				if (!value) return '';
				const date = new Date(value);
				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}`;
			},
			goBack() {
				uni.navigateBack()
			},
			againProduct() {
				uni.navigateTo({
					url: `/pages/product/detail?id=${this.detailData.productId}`
				})
			},
			makePhoneCall() {
				uni.makePhoneCall({
					phoneNumber: '18620545056'
				});
			},
			copy(no) {
				uni.setClipboardData({
					data: no,
				})
			},
			// 获取详情
			getDetail() {
				uni.showLoading()
				if(this.id){
					orderIdDetail(this.id).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							this.detailData = res.data
							this.address = this.detailData.receiver.address
					
						} else {
							this.$api.msg(res.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}else{
					orderDetail(this.no, {
						no: this.no
					}).then(res => {
						uni.hideLoading()
						if (res.code === 200) {
							this.detailData = res.data
							this.address = this.detailData.receiver.address
					
						} else {
							this.$api.msg(res.message)
						}
					}).catch(err => {
						uni.hideLoading()
					})
				}
				
			},

			// 删除订单
			del() {
				uni.showLoading()
				orderCancel({
					no: this.detailData.no
				}).then(res => {
					uni.hideLoading()
					this.$api.msg(res.message)
					if (res.code === 200) {
						this.getDetail()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 确认收货
			receive() {
				uni.showLoading()
				orderReceive({
					no: this.detailData.no
				}).then(res => {
					uni.hideLoading()
					this.$api.msg(res.message)
					if (res.code === 200) {
						this.getDetail()
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},
			buy() {
				uni.navigateTo({
					url: `/pages/order/confirm?id=${this.detailData.productId}&orderId=${this.detailData.id}&quantity=${this.detailData.quantity}&skuId=${this.detailData.skuId}&no=${this.detailData.no}&paidWith=${this.detailData.paidWith}`
				})
			},
			logistics() {
				this.openShow = true
			},
			close() {
				this.openShow = false
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url('@/static/index/bg.png');
		background-size: 100%;
	}

	.order-detail-page {
		
		.header {
			width: 100%;
			height: 506rpx;
			background-image: url('@/static/order/bg.png');
			background-size: 100%;
			background-repeat: no-repeat;
			position: relative;

			.header-bg {
				position: absolute;
				right: 62rpx;
				top: 59rpx;
				width: 215rpx;
				height: 225rpx;
				z-index: 1;
			}

			.go-back {
				padding: 49rpx 0 0 22rpx;

				.back-img {
					width: 19rpx;
					height: 34rpx;
				}
			}

			.header-title {
				font-weight: 500;
				font-size: 40rpx;
				color: #FFFFFF;
				margin-top: 25rpx;
				padding-left: 22rpx;
			}

			.header-main {
				margin-left: 22rpx;
				margin-top: 41rpx;
				width: 707rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 33rpx 34rpx 44rpx 28rpx;
				z-index: 10;

				.header-detail {
					display: flex;
					align-items: center;

					.header-shop-img {
						width: 146rpx;
						height: 146rpx;
						border-radius: 10rpx;
					}

					.header-price {
						margin-left: 22rpx;

						.header-shop-name {
							width: 456rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.header-info {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 61rpx;

							.header-shop-price {
								font-weight: bold;
								font-size: 28rpx;
								color: #F04236;

								.price {}
							}

							.header-num {
								font-weight: 500;
								font-size: 20rpx;
								color: #888888;
							}
						}
					}
				}

				.price-detail {
					margin-top: 29rpx;
					border-top: 1px solid #EEEEEE;

					.price-detail-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 33rpx;

						.price-detail-item-title {
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
							display: flex;
							align-items: center;

							.imgs {
								margin-right: 6rpx;
							}
						}

						.price-detail-item-value {
							font-size: 28rpx;
							color: #888888;
						}
						.red{
							color: #EF4235;
						}
					}
				}

				.totalAmount {
					padding-top: 30rpx;
					border-top: 1px solid #EEEEEE;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					margin-top: 45rpx;

					.totalAmount-title {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.totalAmount-price {
						font-weight: bold;
						font-size: 34rpx;
						color: #EF4235;
						margin-left: 16rpx;
					}

				}
			}

		}

		.main {
			margin-top: 10rpx;
			// padding: 20rpx 32rpx 140rpx 32rpx;
			width: 707rpx;
			margin-left: 22rpx;

			.order-status {
				width: 100%;
				height: 124rpx;
				background: linear-gradient(88deg, #18D1CB 0%, #46E38C 100%);
				border-radius: 10rpx;
				padding: 16rpx 32rpx;

				.status-tip {
					font-size: 32rpx;
					color: #fff;
				}

				.status-time {
					margin-top: 14rpx;
					color: #EBFFFF;
					font-size: 24rpx;
				}
			}

			.shop {
				background-color: #fff;
				border-radius: 20rpx;
				padding: 24rpx 10rpx 0 14rpx;
				margin-top: 20rpx;

				.shop-detail {
					display: flex;
					align-items: center;
					padding-bottom: 22rpx;
					border-bottom: 2rpx solid #ECECEC;

					.shop-img {
						width: 174rpx;
						height: 174rpx;
						background-position: 50%;
						background-size: 100%;
						background-repeat: no-repeat;
						border-radius: 10rpx;
					}

					.shop-info {
						margin-left: 18rpx;
						width: calc(100% - 178rpx);

						.shop-name {
							width: 434rpx;
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.info-specification {
							font-size: 24rpx;
							color: #999999;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-top: 30rpx;

							.shop-price {
								color: #333333;
								font-size: 24rpx;
								font-weight: bold;

								.price {
									font-size: 32rpx;
								}
							}

							.specification-name {}

							.specification-num {}
						}

					}
				}

				.phone-info {
					height: 98rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 32rpx;
					color: #666666;

					.info-img {
						width: 40rpx;
						height: 36rpx;
						margin-right: 20rpx;
					}
				}
			}

			.order-info {
				margin-top: 20rpx;
				background-color: #fff;
				border-radius: 10rpx;
				padding: 29rpx;

				.order-info-item {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.order-label {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
					}

					.order-value {
						text-align: right;
						font-size: 28rpx;
						color: #888888;
						display: flex;
						align-items: center;

						.order-no-val {
							width: 390rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}

						.copy-img {
							width: 22rpx;
							height: 22rpx;
							margin-left: 9rpx;
						}

						.copy {
							font-size: 24rpx;
							color: #82E2D6;
							margin-left: 20rpx;
						}
					}
				}

				.detail-btn {
					display: flex;
					justify-content: flex-end;
					border-top: 1px solid #EEEEEE;
					padding-top: 18rpx;
					margin-top: 48rpx;

					.btn {
						width: 163rpx;
						height: 58rpx;
						border-radius: 29rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background: linear-gradient(90deg, #EF4033 0%, #FF9F98 100%);
						border-radius: 29rpx;
						font-size: 21rpx;
						color: #FFFFFF;
						margin-left: 21rpx;
					}

					.btn-border {
						background: #fff;
						border: 1px solid #EF4234;
						color: #EF4235;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 28rpx;

			.btn-hui {
				width: 332rpx;
				height: 88rpx;
				border: 2rpx solid #D0D0D0;
				border-radius: 52rpx;
				font-size: 36rpx;
				color: #878788;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.btn-green {
				width: 332rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 52rpx;
				font-size: 36rpx;
				font-size: #333;
				font-weight: bold;
				background-color: #70E3DE;
			}

			.btn {
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 52rpx;
				font-size: 36rpx;
				font-size: #333;
				font-weight: bold;
				background-color: #FF9B30;
			}
		}

		.dlg {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: 999;
			background-color: rgba(0, 0, 0, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;

			.dlg-main {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;

				.popup-scroll {
					width: 706rpx;
					height: 900rpx;
					background-color: #fff;
					border-radius: 20rpx;
					overflow-y: scroll;
				}

				.popup-close {
					margin-top: 36rpx;
					width: 54rpx;
					height: 54rpx;
				}
			}
		}
	}
</style>