<template>
	<view class="orderpartDetail">
		<!-- 头部车辆信息 -->
		<div class="flex align-center cpb_header" v-if="info">
			<div>
				<u-image :src="info.vehicleLogo" border-radius="30" width="100" height="100" bg-color="#EBEBEB" ></u-image>
			</div>
			<div>
				<div class="flex align-center" v-if="info.vehicleNumber">
					<carNo color="#0055ff" :val="info.vehicleNumber"></carNo>
				</div>
				<div class="flex align-center">
					<div class="carTits ellipsis-two">
					  {{info.vehicleModel}}{{info.vehicleModel}}
					</div>
				</div>
				<div class="flex align-center">
					<div>VIN码：{{info.vin||'暂无'}}</div>
					<div v-if="info.vin" class="copyText" @click="copyVin(info.vin)"><span>复制</span></div>
				</div>
			</div>
		</div>
		<view class="info partList" v-if="list.length">
			<view class="infoList">
				<view class="title">配件列表</view>
				<view>
					{{list.length}}款，共<text class="redText">{{totalNums}}</text>件
				</view>
			</view>
			<view v-for="item in list" :key="item.id" class="flex align-center item-list">
				<view>
					<u-image :src="item.images" border-radius="16" width="130" height="130" bg-color="#EBEBEB" ></u-image>
				</view>
				<view>
					<view class="item-name">
					  <text>{{item.productName}}</text>
					</view>
					<view class="item-nums">
						<text>{{item.productCode}}</text>
					</view>
					<view class="item-head">
						<view class="price">￥{{item.salePrice}}</view>
						<text class="nums">x {{item.totalQty}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="info" v-if="info">
			<view class="infoList">
				<view class="title">单据信息</view>
				<view class="statu"></view>
			</view>
			<view class="infoList dju">
				<text>订单编号</text>
				<text>{{info.shelfOrderNo||'--'}}</text>
			</view>
			<view class="infoList">
				<text>下单时间</text>
				<text>{{info.shelfOrderDate||'--'}}</text>
			</view>
			<view class="infoList">
				<text>下单人员</text>
				<text>{{info.orderPersonName||'--'}}</text>
			</view>
		</view>
		<view class="info">
			<view class="infoList">
				<text>出库时间</text>
				<text>{{info.outDate||'--'}}</text>
			</view>
			<view class="infoList">
				<text>出库人员</text>
				<text>{{info.outPersonName||'--'}}</text>
			</view>
			<view class="infoList">
				<text>支付时间</text>
				<text>{{info.payDate||'--'}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import carNo from '@/components/carNo.vue'
	import {findBySnShelfOrder} from '@/api/shelf.js'
	export default {
		components: {carNo},
		data() {
			return {
				info: null,
				list: [],
			}
		},
		computed: {
		   totalNums(){
			   let ret = 0
			   this.list.map(item => {
				   ret += item.totalQty
			   })
			   return ret
		   }
		},
		onLoad() {
			this.info = this.$store.state.vuex_settleOrderDetail
			this.getDetail()
		},
		methods: {
			// 复制
			copyVin(vin){
				uni.setClipboardData({
					data: vin||'',
				})
			},
			// 获取详情
			getDetail(){
				console.log(this.info.shelfOrderSn)
			  findBySnShelfOrder({sn: this.info.shelfOrderSn}).then(res => {
				  console.log(res,'++++++++')
				  if(res.status == 200){
					  this.list = res.data.shelfOrderDetailList || []
				  }
			  })
			},
		},
	}
</script>

<style lang="less">
	.orderpartDetail{
		.cpb_header{
			background-color: #FFFFFF;
			padding: 30rpx 15rpx;
			> div{
				padding: 0 10rpx;
				align-items: center;
				&:first-child{
					padding-right: 10rpx;
				}
				> div{
					&:first-child{
						padding-right: 20rpx;
						flex-grow: 1;
						color: #818b94;
						font-size: 24rpx;
					}
				}
			}
			.copyText{
				background-color: #EBEBEB;
				border-radius: 100rpx;
				padding: 0 20rpx;
				color: #033692;
				font-size: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 20rpx;
			}
			.carTits{
				font-size: 32rpx;
				font-weight: bold;
				color: #222222;
				line-height: normal;
				margin-bottom: 10rpx;
				flex-grow: 1;
			}
			.qhbtns{
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				color: #0485F6;
				border:2rpx solid #0485F6;
				border-radius: 50rpx;
				background: rgba(88, 177, 255, 0.2);
				width: 200rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}
		.info{
			background-color: #FFFFFF;
			padding: 10rpx 30upx;
			font-size: 32rpx;
			margin-top: 20rpx;
			.infoList{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 22rpx 0;
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{border: none;}
				.title{
					font-weight: bold;
				}
				> text{
					&:first-child{
						color: #666E75;
					}
				}
			}
			.redText{
				color: #FB1E1E;
			}
			.item-list{
				border-bottom: 2rpx solid #f2f2f2;
				&:last-child{
					border: none;
				}
				> view{
					padding: 20rpx 0;
					&:first-child{
						margin-right: 20rpx;
						margin-top: 18rpx;
					}
					&:last-child{
						flex-grow: 1;
					}
				}
				.item-name{
					word-wrap: break-word;
					font-size: 32rpx;
					color: #333;
					margin-top: 10rpx;
				}
				.item-nums{
					padding: 10rpx 0;
					text{
						font-size: 32rpx;
						color: #222222;
					}
				}
				.item-head{
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #666;
					.price{
						color: #FB1E1E;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>
