<template>
	<view class="container safe-area-inset-bottom">
		<MessageNotification />
		<!-- 收货地址 -->
		<view class="head" v-if="logisticsList.express_name!=''">
			<image src="/static/mine/mr_tx.png" mode=""></image>
			<view class="head_info">
				<view class="name">{{logisticsList.express_name}} {{logisticsList.express_mobile}}</view>
				<view class="choose_area">{{logisticsList.express_region}}{{logisticsList.express_address}}</view>
			</view>
		</view>

		<!-- 订单信息 -->
		<view class="infos" v-if="express!=''">
			<view class="_info">
				<text>快递单号</text>
				<text class="info">{{express.express_no}}</text>
				<text class="copy" @click="copy(express.express_no)">复制</text>
			</view>
			<view class="_info">
				<text>配送方式</text>
				<text class="info">{{express.express_company_name}}</text>
			</view>
		</view>

		<!-- 物流追踪 -->
		<view class="card">
			<view class="title">
				物流追踪
			</view>
			<!-- <view class="empty" v-if="newArr.length==0">
				<image src="@/static/empty/orders.png" mode="aspectFit"></image>
				<text>药房正在备药中，暂时还没有物流信息哦~</text>
			</view> -->

			<view class="line" v-if="newArr.length>0">
				<u-time-line v-for="(item,index) in newArr" :key="index">
					<u-time-line-item nodeTop="2">
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{item.status}}</view>
								<view class="u-order-desc">
									{{item.detail}}
								</view>
								<view class="u-order-time">{{item.detail_at}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>


		<!-- 底部    确认收货 -->
		<view class="footer" v-if="newArr.length>0">
			<view class="to_pay" @click="toaffirm">确认收货</view>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	// getLogistics
	import {
		getLogistics,
		confirmAccept
	} from '../../request/api/api';
	export default {
		data() {
			return {
				isshow: true,
				show: false,
				content: '是否确认退款',
				logisticsList: {},
				order_no: '',
				express: [],
				order_id: '',
				newArr: [{
						detail: "药品已打包，等待快递揽件",
						detail_at: "",
						status: "已发货",
					},
					{
						detail: "药房正在备药中",
						detail_at: "",
						status: "备药",
					}
				]
			}
		},
		onLoad(op) {
			this.order_id = op.id || '45'
			this.getLogisticsList()
		},
		methods: {
			// 支付
			toaffirm() {
				this.postConfirm()
				uni.switchTab({
					url: '/pages/mine/mine'
				})
			},

			// 点击复制
			copy(value) {
				//提示模板
				uni.showModal({
					content: value, //模板中提示的内容
					confirmText: '复制内容',
					success: () => {

						uni.setClipboardData({
							data: value, //要被复制的内容
							success: () => { //复制成功的回调函数
								uni.showToast({ //提示
									title: '复制成功',
									icon: 'success'
								})
							}
						});
					}
				});
			},
			//物流详情请求
			getLogisticsList() {
				getLogistics({
					method: "get",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						order_id: this.order_id,
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						console.log(res.data.data);
						this.logisticsList = res.data.data.address
						this.express = res.data.data.express

						let arr = this.express.detail.filter((item, index) => {
							return index != 0
						})
						
						this.newArr = [...arr,...this.newArr ]
					}

				})
			},
			postConfirm() {
				confirmAccept({
					method: "post",
					data: {
						store_id: uni.getStorageSync('store_id') || '11001',
						order_id: this.order_id,
					}
				}).then((res) => {
					// console.log(res, 'list');
					if (res.data.errcode == 0) {
						console.log(res.data.data);
					}

				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 750rpx;
		max-height: 100%;
		min-height: 100vh;
		padding-bottom: env(safe-area-inset-bottom);
		background: #F5F5F5;

		.empty {
			width: 440rpx;
			height: 393rpx;
			margin: 200rpx auto;
			text-align: center;

			image {
				width: 100%;
				height: 100%;
				z-index: 10;
				margin-bottom: 10rpx;
			}
		}

		.head {
			width: 710rpx;
			height: 140rpx;
			margin: 10rpx auto 20rpx;
			background: #fff;
			display: flex;
			align-items: center;
			padding: 0 40rpx;

			image {
				width: 84rpx;
				height: 84rpx;
				margin-right: 16rpx;
			}

			.head_info {
				display: flex;
				flex-direction: column;

				.name {
					font-size: 28rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #232323;
					margin: 10rpx 0;
				}

				.choose_area {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
				}
			}
		}

		.card {
			width: 710rpx;
			border-radius: 16rpx;
			margin: 10rpx auto 180rpx;
			padding: 30rpx;
			background: #FFFFFF;

			.title {
				width: 640rpx;
				padding-bottom: 22rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #232323;
				border-bottom: 2rpx solid #DDDDDD;
			}

			.line {
				margin-top: 20rpx;
				margin-bottom: 18rpx;

				.u-time-line-item {
					display: flex;
				}

				.u-node {
					width: 44rpx;
					height: 44rpx;
					border-radius: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #d0d0d0;
				}

				.u-order-title {
					color: #333333;
					font-weight: bold;
					font-size: 32rpx;
				}

				.u-order-desc {
					color: rgb(150, 150, 150);
					font-size: 28rpx;
					margin-bottom: 6rpx;
				}

				.u-order-time {
					color: rgb(200, 200, 200);
					font-size: 26rpx;
				}
			}
		}

		.infos {
			width: 710rpx;
			margin: 20rpx auto 20rpx;
			padding: 20rpx 32rpx;
			border-radius: 16rpx;
			background: #FFFFFF;

			._info {
				display: flex;
				align-items: center;
				margin: 20rpx 0;

				text {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.info {
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #232323;
					margin-left: 60rpx;
				}

				.copy {
					display: inline-block;
					border: 2rpx solid #1777FF;
					width: 88rpx;
					height: 48rpx;
					font-size: 28rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #1777FF;
					line-height: 44rpx;
					text-align: center;
					margin-left: 60rpx;
				}
			}
		}

		.footer {
			width: 750rpx;
			height: 100rpx;
			background: #fff;
			position: fixed;
			left: 0;
			bottom: env(safe-area-inset-bottom);
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding: 0 24rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;


			.to_cancle {
				width: 196rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				color: #1777FF;
				background: #E7F1FF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				margin-right: 20rpx;
			}

			.to_pay {
				width: 196rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				color: #fff;
				background: #1777FF;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
			}

			.to_agin {
				width: 196rpx;
				height: 64rpx;
				text-align: center;
				line-height: 64rpx;
				border-radius: 50rpx 50rpx 50rpx 50rpx;
				border: 2rpx solid #999999;
				color: #999999;
				margin-left: 20rpx;
			}
		}

	}
</style>