<template>
	<view class="shelfOrderDetail-wrap">
		<view class="shelfOrderDetail-info">
			<view class="list-item-tit flex align_center">
				<view class="u-line" :style="{background: $config('primaryColor')}"></view>
				<view class="buyer">基础信息</view>
			</view>
			<view class="info-item flex align_center">
				<view class="info-name">订单编号</view>
				<view>{{ detailData&&detailData.orderBillNo || '--' }}</view>
			</view>
			<view class="info-item flex align_center">
				<view class="info-name">货架名称</view>
				<view>{{ detailData&&detailData.shelfName || '--' }}</view>
			</view>
			<view class="info-item flex align_center">
				<view class="info-name">下单时间</view>
				<view>{{ detailData&&detailData.orderDate || '--' }}</view>
			</view>
			<view class="info-item flex align_center">
				<view class="info-name">下单人员</view>
				<view>{{ detailData&&detailData.orderPersonName || '--' }}</view>
			</view>
			<view class="info-item flex align_center">
				<view class="info-name">订单状态</view>
				<view>{{ detailData&&detailData.billStateDictValue || '--' }}</view>
			</view>
			<view class="info-item flex align_center" v-if="detailData&&detailData.vin">
				<view class="info-name">VIN</view>
				<view>{{ detailData&&detailData.vin || '--' }}</view>
			</view>
			<view class="info-item flex align_center" v-if="detailData&&detailData.vehicleModel">
				<view class="info-name">车型</view>
				<view>{{ detailData&&detailData.vehicleModel || '--' }}</view>
			</view>
		</view>
		<view class="shelfOrderDetail-info">
			<view class="list-item-tit flex align_center">
				<view class="u-line" :style="{background: $config('primaryColor')}"></view>
				<view class="buyer">产品列表</view>
			</view>
			<view class="countData flex align_center" v-if="countDetail">
				<view>总款数：<text>{{countDetail.productCategory}}</text>；</view>
				<view>总数量：<text>{{countDetail.totalQty}}</text>；</view>
				<view>总结算金额：<text>￥{{countDetail.settleAmount}}</text>；</view>
			</view>
			<view 
			class="panel-box flex justify_between" 
			v-for="item in detailList" :key="item.id">
				<view class="pimgs">
					<u-image :src="item.images||`../../static/${$config('themePath')}/def_img@2x.png`" width="120" height="120" border-radius="10"></u-image>
				</view>
				<view class="info-con flex_1">
					<view><text class="pcode">{{item.shelfPlaceCode}}</text>{{item.productCode || '--'}}</view>
					<view class="padding_7">{{item.productName || '--'}}</view>
					<view class="prices flex align_center justify_between">
						<view><text class="p1">￥{{item.settlePrice}}</text><text class="p2">X</text>{{item.totalQty}}{{item.unit}}</view>
						<view>￥{{item.settleAmount}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { orderBillQueryPage, orderBillDetailCount } from '@/api/shelf'
	export default{
		data(){
			return {
				detailData:null,
				detailList: [],
				orderBillSn: null,
				countDetail: null
			}
		},
		onLoad(opts) {
			this.orderBillSn = opts.orderBillSn
			this.getDetail()
		},
		methods: {
		  getDetail () {
		    orderBillQueryPage({ pageNo: 1, pageSize: 1, orderBillSn: this.orderBillSn}).then(res => {
		      this.detailData = res.data.list && res.data.list[0]
		      this.detailList = this.detailData.orderBillDetailApiEntityList
		    })
		    orderBillDetailCount({ orderBillSn: this.orderBillSn}).then(res => {
		      this.countDetail = res.data || null
		    })
		  },
		},
	}
</script>

<style lang="scss">
	.shelfOrderDetail-wrap{
		width: 100%;
		.panel-box {
			padding: 20upx 20upx;
			display: flex;
			justify-content: space-between;
			.info-con{
				margin-left: 20upx;
				.padding_7{
					padding: 14upx 0 0;
					font-size: 28upx;
				}
				.pcode{
					font-weight: normal;
					margin-right: 10rpx;
					padding: 0 10rpx;
					background: rgba(3, 54, 146, 0.15);
					border-radius: 30rpx;
					color: #033692;
					font-size: 24rpx;
				}
				.prices{
					padding-top: 15rpx;
					.p1{
						color:#ff0000;
						margin-right: 30rpx;
					}
					.p2{
						color: #999;
						font-size: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
			border-bottom: 1px solid #e4e7ed;
			&:last-child{
				border: 0;
			}
		}
		.list-item-tit{
			padding-bottom: 18upx;
			padding-top: 10upx;
			border-bottom: 1px solid #e4e7ed;
			.u-line{
				display: inline-block;
				width: 6upx;
				height: 28upx;
				vertical-align: bottom;
				margin: 0 10upx;
				border-radius: 5upx;
			}
			.buyer{
				flex-grow: 1;
				font-size: 28upx;
				font-weight: bold;
			}
		}
		.shelfOrderDetail-info{
			background-color: #ffffff;
			padding: 10upx 20upx 20upx;
			border-radius: 20upx;
			box-shadow: 3upx 2upx 6upx #eee;
			margin: 20upx;
			.info-item{
				border-bottom: 1px solid #e4e7ed;
				padding: 20upx 0;
				.info-name{
					color: #999;
					padding-right: 20rpx;
					width: 150rpx;
				}
				&:last-child{
					border: 0;
				}
			}
			.countData{
				background: #fff;
				display: flex;
				padding: 15upx;
				border-radius: 15rpx;
				text{
					color: #ff5500;
				}
				font-size: 24rpx;
				border-bottom: 1px solid #e4e7ed;
				padding: 20upx 0;
			}
		}
	}
</style>