<template>
	<view >

		<view class="content-top-con">
			<view class="content-img" @click="returnlog">
				<image src="@/static/images/xiangyou.png" mode=""></image>
			</view>
			<view class="">
				订单信息
			</view>
		</view>

		<scroll-view scroll-y="true" style="height: 400rpx;overflow: hidden;">
			<view class="container-content" v-if="lisobj.logistics">
				<view class="content-one">
					{{lisobj.logistics.order_sn}}
				</view>
				<view class="container-con">
					<view class="content-lefta">

						<view class="content-two">
							<view class="content-two-left">

								<view class="two-leftb">
									<view class="two-leftb1">
										收货详情：
									</view>
									<view class="two-leftb2">
										用户名称： {{
								lisobj.logistics.receiver_name
								}}
									</view>
									<view class="two-leftb2">
										联系方式： {{
								lisobj.logistics.receiver_phone
								
								}}
									</view>
									<view class="two-leftb2">
										联系地址： {{
								lisobj.logistics.receiver_address
								
								}}
									</view>
								</view>

							</view>

						</view>
						<view class="content-three">
							<view class="content-three-left">

								<view class="three-left-title">
									物流信息：
								</view>
								<view style="display: flex;">
									<view class="">
										<view class="three-left-con1" v-for="(item,i) in lisobj.record">
											<view class="left-cona">
												{{i+1}}
											</view>

											<view v-if="i != lisobj.record.length-1" class="divider"></view>
											<!-- <span v-if="i != lisobj.record.length-1" class="divider"></span> -->
										</view>
									</view>
									<view class="">
										<view class="three-left-con" v-for="(item,i) in lisobj.record">

											<view class="">
												<view class="left-conb">
													{{item.content}}
												</view>
												<view class="left-conc">
													{{item.create_time}}
												</view>
											</view>
										</view>
									</view>
								</view>

							</view>

						</view>


					</view>
					<view class="content-righta">

						<view class="content-two">
							<view class="content-two-left">
								<view class="two-lefta">
									取货时间：{{lisobj.logistics.qh_time}}
								</view>
								<view class="two-leftb">
									<view class="two-leftb1">
										取货详情：
									</view>
									<view class="two-leftb2">
										用户名称：{{lisobj.logistics.shop_name }}
									</view>
									<view class="two-leftb2">
										联系方式：{{lisobj.logistics.shop_phone }}
									</view>
									<view class="two-leftb2">
										联系地址：{{lisobj.logistics.shop_address }}
									</view>
								</view>

							</view>

						</view>
						<view class="content-three-right">
							<view class="shop-content-a">
								<div class="shop-content-a1">商品信息：</div>
								<div class="shop-content-a2">{{ lisobj.product.length }}件</div>
							</view>
							<view class="shop-list">
							
								<view class="shop" v-for="(items,j) in lisobj.product" :key="j">
									<view style="display: flex;">
										<view class="shop-img">
											<image :src="items.goods_pic" mode="aspectFit"></image>
										</view>
										<view class="container-txt">
											<text class=" centered-multi-line shop-txt">
												{{ items.goods_name }}</text>
										</view>
									</view>
									<view style="line-height: 34rpx;">X{{ items.product_num}}</view>
								</view>
							</view>
							<!-- <view class="shop" v-for="(items,j) in lisobj.product" :key="j">
								<view style="display: flex;">
									<view class="shop-img">
										<image :src="items.goods_pic" alt="">
									</view>
									<view class="shop-txt">{{ items.goods_name }}</view>
								</view>
								<view style="line-height: 26rpx;">X{{ items.product_num}}</view>
							</view> -->

						</view>

					</view>


				</view>
				<view class="btn" @click="openCamera">
					<view class="btn1">
						<image src="@/static/images/che.png" mode=""></image>
					</view>
					<view class="btn2">货物送达</view>
				</view>
			</view>
		</scroll-view>

		<gb-popup :isShow="isShow1" rName="确定" :isBut="false" lName="取消" @lEvent="copyshow" @rEvent="copyData"
			title="请输入取件码">
			<view style="padding: 30rpx;">
				<input type="value" v-model="code" placeholder="请输入"
					placeholder-style="font-size: 12rpx;height: 50rpx;line-height: 50rpx;"
					style="height: 50rpx;font-size: 18rpx;" />
			</view>
		</gb-popup>
		<uni-popup ref="globalPopup" :custom="true">
			<view class="popup-content" @click="close">
				<view class="popup-content-a">
					<view class="popup-item">
						骑手完成取货
					</view>

					<view class="popup-item">
						<image src="@/static/images/zzw.png" mode="aspectFit" style="width: 150rpx; height: 150rpx;">
						</image>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		detail,

		delivery
	} from '@/api/oa.js'
	import gbpopup from '@/components/gb-popup/gb-popup.vue';
	import {
		Toast
	} from '../../libs/uniApi';
	export default {
		props: {
			type: ''
		},
		components: {
			gbpopup
		},
		data() {
			return {
				lisobj: [],
				page_no: 1,
				page_size: 1,
				keyword: '',
				isShow1: false,
				code: ''
			}
		},
		mounted() {
		

			this.getlist(this.type)

			// console.log(this.type)


		},
		methods: {
			returnlog() {

				this.$emit('outfun', '2')
			},
			show1() {
				this.isShow1 = !this.isShow1
			},
			copyshow() {
				this.show1()
				this.code = ''
			},
			//取件弹窗
			copyData() {

				this.show1()

				if (this.code.length > 0) {

					delivery({
						id: this.type,
						take_code: this.code
					}).then((res) => {


						this.code = ''
						if (res.code == 1) {
							// Toast(res.msg)
							this.$refs.globalPopup.open()
							setTimeout(() => {
								this.$emit('outfun', '2')
							}, 1500)


						}

					})

				} else {
					uni.showModal({
						content: '请输入取件码',
						confirmText: "确认",
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {

							} else {
								console.log('取消');
								return false;
							}
						}
					})
				}


			},
			close() {
				this.$refs.globalPopup.close()
			},
		

			getlist(id) {
				detail({
					id: id
				}).then(res => {
					if (res.code == 1) {
						this.lisobj = res.data
						// console.log(this.lisobj, '11111')
					}
				})

			},
			openCamera() {
		
				// this.show1()
				this.isShow1 = !this.isShow1
			}
		}

	}
</script>

<style lang="scss" scoped>
	.content-top-con {
		display: flex;
		height: 35rpx;
		line-height: 35rpx;
		width: 100%;
		background: #FFFFFF;
		border-radius: 9px 9px 9px 9px;
		font-size: 13rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
margin-top: 10rpx;
		.content-img {
			width: 22rpx;
			height: 22rpx;
			margin: auto 0;
			margin-right: 5rpx;



			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.popup-content {
		width: 308rpx;
		height: 220rpx;
		/* 根据需要调整弹窗内容的宽度 */
		background-color: #fff;
		/* 设置弹窗内容的背景色 */
		padding-top: 30rpx;
		/* 根据需要设置内边距 */
		border-radius: 9rpx 9rpx;
	}

	.popup-content-a {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* 水平居中 */
	}

	.popup-item {
		font-size: 13rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #0022C7;
		margin-bottom: 10rpx;
		/* 可根据需要调整项之间的间距 */
	}

	.container-content {
		background-color: #fff;
		border-radius: 12px 12px 0 0;

		margin-top: 10rpx;
		padding-bottom: 10rpx;

		.content-one {
			height: 39rpx;
			width: 100%;
			line-height: 39rpx;
			background: #FF7C32;
			border-radius: 12px 0px 0 0;
			font-size: 13rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			padding-left: 15rpx;
		}

		.container-con {
			display: flex;
			justify-content: space-between;
			position: relative;

		}

		.content-lefta {
			width: 277rpx;

			position: relative;





			.content-two {

				padding-top: 10rpx;


				.content-two-left {

					padding-left: 12rpx;
					padding-right: 12rpx;


					.two-lefta {
						font-size: 12rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;


					}

					.two-leftb {

						font-size: 12rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;

						.two-leftb1 {
							width: 160rpx;
						}

						.two-leftb2 {
							width: 250rpx;

							white-space: normal;
							word-wrap: break-word;
						}
					}
				}

				.content-two-right {
					display: flex;
					width: 50%;
					padding-left: 60rpx;
					padding-right: 60rpx;


					.two-right {
						width: 160rpx;
						margin-bottom: 10rpx;
					}

					.two-right2 {
						width: 300rpx;
						margin-bottom: 10rpx;
					}
				}


			}

			.content-three {
				display: flex;

				.content-three-left {

					padding-left: 12rpx;

					.three-left-title {
						height: 44rpx;
						font-size: 12rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.left-cona {
						width: 20rpx;
						height: 20rpx;
						line-height: 20rpx;
						color: #fff;
						text-align: center;
						background: #0022C7;
						border-radius: 50%;
						margin-right: 20rpx;
					}

					.three-left-con1 {

						height: 51rpx;
						margin-right: 0rpx;
						font-size: 10rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #737373;

						.divider {
							height: 35rpx;
							background-color: #0022C7;
							width: 2px;
							// border-left: 2px solid #000; /* 竖线样式 */
							margin: 0 10rpx;
							/* 调整竖线与文字之间的距离 */

						}
					}

					.three-left-con {

						display: flex;
						margin-bottom: 20rpx;
					}

					.left-conb {

						font-size: 10rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #737373;
					}

					.left-conc {
						font-size: 10rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #737373;
					}
				}

			}

			.btn {
				width: 220rpx;
				height: 34rpx;
				line-height: 34rpx;
				background: #FF7C32;
				border-radius: 23px 23px 23px 23px;
				display: flex;
				position: absolute;
				left: 50%;
				margin-left: -110rpx;
				bottom: 10rpx;
			}

			.btn1 image {
				width: 20rpx;
				height: 20rpx;
			}

			.btn2 {
				font-size: 12rpx;
				font-family: Microsoft YaHei-Regular, Microsoft YaHei;
				font-weight: 400;
				color: #ffffff;
			}

			.btn1 {
				width: 20rpx;
				height: 20rpx;
				margin-left: 70rpx;
				margin-top: 0rpx;
				margin-right: 10rpx;
			}


		}

		.content-righta {
			width: 277rpx;

			position: relative;



			.content-one {
				height: 39rpx;
				width: 100%;
				line-height: 39rpx;
				background: #FF7C32;
				border-radius: 0px 12px 0 0;
				font-size: 13rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 15rpx;
			}

			.content-two {
				display: flex;
				padding-top: 10rpx;
				margin-bottom: 20rpx;

				.content-two-left {

					padding-left: 32rpx;
					padding-right: 32rpx;

					.two-lefta {
						font-size: 12rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.two-leftb {

						font-size: 12rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;

						.two-leftb1 {
							width: 60rpx;

						}

						.two-leftb2 {
							width: 180rpx;
							white-space: normal;
							word-wrap: break-word;
						}
					}
				}

				.content-two-right {
					display: flex;
					width: 50%;
					padding-left: 60rpx;
					padding-right: 60rpx;


					.two-right {
						width: 160rpx;
					}

					.two-right2 {
						width: 600rpx;
					}
				}


			}

			.content-three-right {

				padding-left: 30rpx;
				padding-right: 30rpx;
				font-size: 12rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 400;


				.shop-content-a {
					display: flex;
					justify-content: space-between;

					margin-bottom: 20rpx;
				}

				.shop-content-a1 {
					font-size: 12rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.shop-content-a2 {
					font-size: 12rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0022c7;
				}

				.shop-content {
					padding-left: 20px;
					padding-right: 20px;

				}

				.shop-content-a {
					display: flex;
					justify-content: space-between;
					margin-top: 14px;
					margin-bottom: 10px;
				}

				.shop-content-a1 {
					font-size: 13rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #000000;
				}

				.shop-content-a2 {
					font-size: 12rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #0022C7;
				}

				.shop-list {
					height: 220rpx;
					overflow: hidden;
					overflow-y: auto;
					margin-bottom: 10rpx;
				}

				.shop {
					display: flex;
					justify-content: space-between;
					font-size: 10rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					margin-bottom: 10rpx;
				}

				.shop-img {
					width: 34rpx;
					height: 34rpx;

					border-radius: 6px 6px 6px 6px;
				}

				.shop-img image {
					width: 34rpx;
					height: 34rpx;
					border-radius: 6px 6px 6px 6px;
				}



				.container-txt {
					margin-left: 10rpx;
					width: 130rpx;
					/* 设置容器高度 */
					display: flex;
					justify-content: center;
					/* 水平居中 */
					align-items: center;
					/* 垂直居中 */
				}

				.centered-multi-line {
					text-align: left;
					/* 文本水平居中 */
					width: 100%;
					/* 宽度占满父容器 */
				}

				.shop-txt {
					display: inline-block;
					/* 转换为行内块元素 */
					white-space: normal;
					/* 允许自动换行 */
					word-break: break-all;
					/* 单词内断行 */
				}
			}





		}

		.btn {
			width: 220rpx;
			height: 34rpx;
			line-height: 34rpx;
			background: #FF7C32;
			border-radius: 23px 23px 23px 23px;
			display: flex;
			position: absolute;
			left: 50%;
			margin-left: -60rpx;
			bottom:80rpx;
			position: fixed;
		}

		.btn1 image {
			width: 20rpx;
			height: 20rpx;
		}

		.btn2 {
			font-size: 12rpx;
			font-family: Microsoft YaHei-Regular, Microsoft YaHei;
			font-weight: 400;
			color: #ffffff;
		}

		.btn1 {
			width: 20rpx;
			height: 20rpx;
			margin-left: 70rpx;
			margin-top: 0rpx;
			margin-right: 10rpx;
		}

	}
</style>