<template>
	<view class="details_wrapper">
	<!-- 	<u-navbar title="物流信息" :autoBack="true" leftIconSize="0" placeholder>
			<image :src="$util.img('upload/weapp/pageSalesman/reportForm/beibao.png')"></image>
		</u-navbar> -->

		<view class="head-shwen">
			<view v-if="orderData.goods_sku_detail.type == 1">
				<view v-show="orderData.order_status == 1">待发货</view>
				<view v-show="orderData.order_status == 3">已发货</view>
				<view v-show="orderData.order_status == 10">已收货</view>
			</view>
			<view v-else>
				兑换详情
			</view>
		</view>
		<view class="head">
			<view class="head-dizi df" v-if="orderData.goods_sku_detail.type == 1">
				<div class="dizi-one">
					<image
						:src="$util.img('upload/weapp/pageSalesman/reportForm/position.png')"
					></image>
				</div>
				<div class="df fdc">
					<div class="dizi-two">{{ orderData.full_address }}{{ orderData.address }}</div>
					<div class="dizi-sui">
						{{ orderData.name }}
						<span>{{ orderData.mobile }}</span>
					</div>
				</div>
				<!-- <div class="dizi-for df aic">
					<image :src="$util.img('upload/weapp/user/you.png')"></image>
				</div> -->
			</view>
			<view class="cais" v-if="orderData.goods_sku_detail.type == 1">
				<image :src="$util.img('upload/weapp/pageSalesman/reportForm/bar.png')"></image>
			</view>
			<view class="list">
				<div class=" df">
					<div><image :src="$util.img(orderData.goods_image)"></image></div>
					<div class="df fdc">
						<div class="name">{{ orderData.goods_name }}</div>
						<div class="df jcsb wbf">
							<div class="one">×{{ orderData.num }}</div>
							<div class="sex">
								{{ orderData.goods_sku_detail.point }}积分
								<span v-if="Number(orderData.goods_sku_detail.price)">
									+￥{{ Number(orderData.goods_sku_detail.price) }}元
								</span>
							</div>
						</div>
					</div>
				</div>
			</view>
			<view class="dinkdn">
				<div class="df jcsb">
					<div class="dindan">
						订单编号
						<span>{{ orderData.order_no }}</span>
					</div>
					<div class="fuzhi df aic jcsa" @click="$util.copy(orderData.order_no)">
						复制
					</div>
				</div>
				<div class="df jcsb">
					<div class="dindan">
						订单时间
						<span>{{ $util.timeStampTurnTime(orderData.create_time) }}</span>
					</div>
				</div>
				<div class="df jcsb">
					<div class="dindan">
						付款时间
						<span>{{ $util.timeStampTurnTime(orderData.pay_time) }}</span>
					</div>
				</div>
			</view>
			<view class="zonjia df">
				<div class="f1">
					<div class="df jcsb">
						<div class="zonj">商品总价</div>
						<div class="qiam" style="color: #222222;">
							<div v-if="orderData.type == 1">
								<div>{{ orderData.point }}积分</div>
							</div>
							<div v-if="orderData.type == 0" style="display: flex;">
								<div>
									{{ orderData.point }}积分
									<span v-if="Number(orderData.price)">
										+￥{{ Number(orderData.price) }}元
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="df jcsb" v-if="Number(orderData.delivery_price)">
						<div class="zonj">运费</div>
						<div class="qiam" style="color: red;">￥{{ orderData.delivery_price }}</div>
					</div>
				</div>
			</view>
			<view class="logisticsBox" v-if="showLogistics">
				<view class="logisticsHead">
					<view class="logistics-logo">
						<image :src="$util.img(logisticsData.company_info.logo)"></image>
					</view>
					<view class="logistics-info">
						<view class="company">
							<view class="title">承运公司</view>
							<view class="con">{{ logisticsData.company_info.company_name }}</view>
						</view>
						<view class="orderNum">
							<view style="display: flex;">
								<view class="title">快递编号</view>
								<view class="con">{{ logisticsData.logistic_code }}</view>
							</view>
							<view class="fuzhi" @click="$util.copy(logisticsData.logistic_code)">
								复制
							</view>
						</view>
					</view>
				</view>
				<view class="orderStatus">
					<u-steps direction="column" dot :current="0">
						<u-steps-item
							:title="item.remark"
							:desc="item.datetime"
							v-for="(item, index) in logisticsData.list"
							:key="index"
						></u-steps-item>
					</u-steps>
				</view>
			</view>
		</view>

		<view style="width: 100vw; height:120rpx ;"></view>
		<view class="footerBtn" v-if="index == 1 && orderData.goods_sku_detail.type == 1">
			<view class="submit-btn" v-if="orderData.order_status == 3">
				<u-button type="primary" size="mini" @click="getLogistics()">查看物流</u-button>
				<u-button type="primary" size="mini" @click="qudwl()">确认收货</u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			index: '',
			order_id: undefined,
			orderData: {
				goods_sku_detail: {}
			},
			logisticsData: {
				company_info: {},
				list: []
			},
			showLogistics: false
		};
	},
	onLoad(optin) {
		this.index = optin.im;
		if (optin.order_id) {
			this.order_id = optin.order_id;
		}
	},
	onShow() {
		this.getExchangeOrderDetail();
	},
	methods: {
		getExchangeOrderDetail() {
			this.$api.sendRequest({
				url: '/api/goodsexchange/getExchangeOrderDetail',
				data: {
					order_id: this.order_id
				},
				success: res => {
					this.orderData = res.data;

					if (this.orderData.order_status == 10) {
						this.getLogistics();
					}
				}
			});
		},

		btn() {
			this.$util.showToast({
				title: '已告知商家尽快发货'
			});
		},
		// 确认收货
		qudwl() {
			this.$api.sendRequest({
				url: '/api/goodsexchange/takeDelivery',
				data: {
					order_id: this.order_id
				},
				success: res => {
					uni.navigateTo({
						url: '/pages_tool/member/exchange_record'
					});
				}
			});
			// this.$util.showToast({
			// 	title: '确认收货成功'
			// });
		},
		// 查看物流
		getLogistics() {
			// 显示物流信息
			this.showLogistics = true;
			this.$api.sendRequest({
				url: '/api/goodsexchange/package',
				data: {
					order_id: this.order_id
				},
				success: res => {
					this.logisticsData = res.data;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.details_wrapper {
	position: relative;

	.head-shwen {
		width: 100%;
		height: 150rpx;
		background-image: linear-gradient(rgb(33, 187, 243), rgb(247, 247, 247));

		line-height: 40rpx;
		view {
			text-align: center;
			line-height: 120rpx;
			width:200rpx;
			margin: 0 auto;
			font-size:32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			color: #fff;
		}
	}
	.head {
		padding: 0 24rpx;
		box-sizing: border-box;
		position: relative;
		top: -40rpx;
		.head-dizi {
			width: 100%;
			height: 172rpx;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			.dizi-one {
				image {
					width: 44rpx;
					height: 44rpx;
					margin-top: 34rpx;
					margin-right: 8rpx;
				}
			}
			.dizi-two {
				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #222222;
				line-height: 48rpx;
				margin-top: 32rpx;
			}
			.dizi-sui {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 44rpx;
				margin-top: 8rpx;
				span {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 44rpx;
					margin-left: 16rpx;
				}
			}
			.dizi-for {
				image {
					width: 28rpx;
					height: 28rpx;
					margin-left: 106rpx;
				}
			}
		}
		.cais {
			position: relative;
			top: -35rpx;
			image {
				width: 100%;
				height: 6rpx;
			}
		}

		.list {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			padding-bottom: 32rpx;
			image {
				width: 160rpx;
				height: 160rpx;
				margin-top: 32rpx;
			}
			.qaun {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 24rpx;
				image {
					width: 32rpx;
					height: 32rpx;
					margin-left: 8rpx;
				}
			}
			.name {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-top: 32rpx;
			}
			.wbf {
				width: 490rpx;
				.one {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 34rpx;
					margin-top: 86rpx;
				}
				.sex {
					font-size: 24rpx;
					font-family: DINAlternate-Bold, DINAlternate;
					font-weight: bold;
					color: #222222;
					line-height: 40rpx;
					margin-top: 80rpx;
				}
			}
		}
		.dinkdn {
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			padding: 8rpx 32rpx 32rpx 32rpx;
			box-sizing: border-box;
			margin-top: 24rpx;
			.dindan {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 40rpx;
				margin-top: 32rpx;
				span {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
					line-height: 40rpx;
					margin-left: 48rpx;
				}
			}
			.fuzhi {
				width: 96rpx;
				height: 48rpx;
				background: #ffffff;
				border-radius: 28rpx;
				border: 2rpx solid #e8e8e8;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 34rpx;
				margin-top: 28rpx;
			}
		}
		.zonjia {
			padding: 8rpx 32rpx 32rpx 32rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			box-sizing: border-box;
			.zonj {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #222222;
				line-height: 40rpx;
				margin-top: 24rpx;
			}
			.qiam {
				font-size: 24rpx;
				font-family: DINAlternate-Bold, DINAlternate;
				font-weight: bold;
				line-height: 40rpx;
				margin-top: 24rpx;
			}
			.img {
				image {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}
		.logisticsBox {
			padding: 32rpx 32rpx 32rpx 32rpx;
			width: 100%;
			background: #ffffff;
			border-radius: 16rpx;
			margin-top: 24rpx;
			box-sizing: border-box;

			.logisticsHead {
				width: 100%;
				display: flex;
				margin-bottom: 20rpx;
				.logistics-logo {
					width: 120rpx;
					height: 120rpx;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}
				.logistics-info {
					width: calc(100%-120rpx) !important;
					height: 120rpx;

					.company,
					.orderNum {
						display: flex;
						width: 100%;
						height: 60rpx;
						.title {
							margin-right: 30rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
						}
						.con {
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
						}
					}
					.orderNum {
						justify-content: space-between;

						.fuzhi {
							width: 96rpx;
							height: 48rpx;
							background: #ffffff;
							border-radius: 28rpx;
							border: 2rpx solid #e8e8e8;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #222222;
							line-height: 48rpx;
							text-align: center;
						}
					}
				}
			}
			.orderStatus {
			}
		}
	}
	.footerBtn {
		display: flex;
		position: fixed;
		z-index: 5;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #fff;
		text-align: right;
		display: flex;

		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.submit-btn {
			width: 100%;
			height: 80rpx;
			margin: 0 30rpx;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			button {
				line-height: 70rpx;
				width: 180rpx;
				height: 70rpx;
				padding: 0;
				font-size: $font-size-base;
				font-weight: bold;
			}
			.no-submit {
				width: unset;
				background-color: rgb(204, 204, 204);
				color: #ffffff;
				padding: 0 20rpx;
				font-size: $font-size-base;
			}
		}
	}
}
</style>
