<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">

					<view :class="lisobj.logistics.status==3?'content-one1':'content-one'  ">
						{{lisobj.logistics.order_sn}}
					</view>
					<view class="content-two">
						<view class="content-two-left">
							<view class="two-lefta" v-if="lisobj.logistics.status!=3">
								收货时间：{{lisobj.logistics.qh_time}}
							</view>
							<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 class="content-two-right">
							<view class="two-right">
								取货详情：
							</view>



							<view class="two-right2">
								店铺名称：{{lisobj.logistics.shop_name }}
							</view>
							<view class="two-right2">
								店主名称：{{lisobj.logistics.shop_user }}
							</view>
							<view class="two-right2">
								联系方式：{{lisobj.logistics.shop_phone }}
							</view>
							<view class="two-right2">
								联系地址：{{lisobj.logistics.shop_address }}
							</view>


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

							<view class="three-left-title">
								物流信息：
							</view>
							<view class="" 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 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"> <img :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>
		</scroll-view>
	</view>
</template>

<script>
	import {
		detail
	} from '@/api/oa.js'
	export default {
		props: {
			type: ''
		},
		data() {
			return {

				lisobj: [],
				page_no: 1,
				page_size: 1,
				keyword: '',

			}
		},
		mounted() {
			this.getlist(this.type)
			// console.log(this.type)

		},
		methods: {
			returnlog() {
				// uni.navigateTo({
				// 	url: '/pages/index/index'
				// })
				this.$emit('outfun', '3')
			},
		
			getlist(id) {
				detail({
					id: id
				}).then(res => {

					if (res.code == 1) {
						this.lisobj = res.data
					
					}
				})
			}
		}

	}
</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%;
			}
		}
	}


	.container-top {
		display: flex;
		justify-content: space-between;

		background-color: #fff;
		border-radius: 24rpx 24rpx;

		.serch {
			width: 59rpx;
			height: 31rpx;
			line-height: 31rpx;
			border-radius: 15rpx 15rpx;
			opacity: 1;
			border: 1px solid #0022c7;
			text-align: center;
			font-size: 12rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #0022c7;

		}
	}



	.container-content {


		background: #FFFFFF;
		border-radius: 12rpx 12rpx 0 0;
		margin-top: 10rpx;
		padding-bottom: 10rpx;


		.content {


			background-color: #fff;
			border-radius: 12rpx 12rpx;
			width: 565rpx;


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

			.content-one1 {
				height: 39rpx;
				line-height: 39rpx;

				background: #F84221 !important;
				border-radius: 12px 12px 0 0;
				font-size: 12rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				padding-left: 15rpx;
			}

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

				.content-two-left {
					border-right: 1px dashed #0022C7;
					padding-left: 15rpx;
					padding-right: 15rpx;

					width: 50%;

					.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 {

					width: 50%;
					padding-left: 15rpx;
					padding-right: 15rpx;



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

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


			}

			.content-three {
				display: flex;

				.content-three-left {
					display: flex;
					width: 60%;
					padding-left: 15rpx;

					.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%;
					}

					.three-left-con1 {
						height: 45rpx;
						margin-right: 20rpx;
						font-size: 12px;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #000000;

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

						}
					}

					.three-left-con {
						margin-bottom: 10px;
					}

					.left-conb {

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

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

				.content-three-right {
					width: 50%;
					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;
						/* 单词内断行 */
					}
				}
			}
		}
	}
</style>