<template>
	<view class="lists">
		<view class="status_bar" :style="navHeight"></view>
		<view class="header-bg">
			<image class="header-bg-img" src="@/static/image/nav_bg@3x.png" mode="scaleToFill"></image>
		</view>
		<view class="main">
			<view class="list-wrapper" :style="scrollHeight">
				<list class="list-block" scrollable loadmoreoffset='1' show-scrollbar='false'>
					<cell class="view scroll-area">
						<view class="order-main view">
							<view class="top">
								<text class="title-no">订单编号：{{INFO.OBJECT_ID}}</text>
								<view class="title-info">
									<button class="title-info__status" type="default">
										<text class="title-info__status-text">{{INFO.STATUS_TEXT}}</text>
									</button>
								</view>
							</view>
							<view class="order-main-middle view">
								<view class="middle-title middle-unit">
									<text class="middle-title__text middle-unit__text">{{INFO.ZZFLD000001_TEXT}}</text>
								</view>
								<view class="middle-title">
									<text class="middle-title__text">{{INFO.PROCESS_TYPE_TEXT}}</text>
								</view>
								<view class="text-block-box">
									<view class="text-block text-block-last">
										<text class="middle-date-des">下单日期</text>
										<text class="middle-date">{{INFO.POSTING_DATE}}</text>
									</view>
									<view class="text-block text-block-last">
										<text class="middle-date-des middle-date-right">金额</text>
										<view class="middle-date-right">
											<text class="middle-date">{{INFO.TOTAL_AMOUNT}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="middle view">
							<view class="item-block item-block-name" v-if="orderDetail.USE&&orderDetail.USE.length>0">
								<text class="item-block-label">占用销售计划明细</text>
							</view>
							<view class="block-detal" v-for="item in orderDetail.USE">
								<view class="block-detal-item">
									<text class="detal-item-label">销售计划编号</text>
									<text class="detal-item-value">{{item.ZZFLD00000C}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">计划类型</text>
									<text class="detal-item-value">{{item.ZZFLD00000D_TEXT}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">存货分类</text>
									<text class="detal-item-value">{{item.ZZFLD00000E_TEXT}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">月份</text>
									<text class="detal-item-value">{{item.ZZFLD00000G}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">年度</text>
									<text class="detal-item-value">{{item.ZZFLD00000F}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">总计划量(件)</text>
									<text class="detal-item-value">{{item.ZZFLD00000H}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">本次占用计划数量(件)</text>
									<text class="detal-item-value">{{item.ZZFLD00000R}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">剩余可用计划量(件)</text>
									<text class="detal-item-value">{{item.ZZFLD00000P}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">总计划量(瓶)</text>
									<text class="detal-item-value">{{item.TOTAL_BOT}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">本次占用计划数量(瓶)</text>
									<text class="detal-item-value">{{item.CURNT_ATPBOT}}</text>
								</view>
								<view class="block-detal-item">
									<text class="detal-item-label">剩余可用计划量(瓶)</text>
									<text class="detal-item-value">{{item.REMAIN_BOT}}</text>
								</view>
							</view>
						</view>
						<view class="order-middle view" :class="{'order-middle-auto':ishowReceiveDetail}"
							ref='receiveInfo' :style="receiveInfoHeightComputed">
							<view class="middle view">
								<view class="item-block item-block-name">
									<text class="item-block-label">计划内</text>
								</view>
								<view class="block-detal" v-for="(item,index) in ITEM_INNER" :key="index">
									<view class="block-detal-item">
										<text class="detal-item-label">计划编号</text>
										<text class="detal-item-value">{{item.ZZFLD000005}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">计划类型</text>
										<text class="detal-item-value">{{item.ZZFLD00002Q_TEXT}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">产品</text>
										<text class="detal-item-value">{{item.DESCRIPTION}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">件数</text>
										<text class="detal-item-value">{{item.ZZFLD000009}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">瓶数</text>
										<text class="detal-item-value">{{item.USE_BOT}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">数量</text>
										<text class="detal-item-value">{{item.QUANTITY}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">单价</text>
										<text class="detal-item-value">{{item.NET_PRICE}}</text>
									</view>
									<view class="block-detal-item block-detal-item-last">
										<text class="detal-total-label"></text>
										<view class="detal-total-value">
											<text class="item-value-intotal">小计：</text>
											<text class="item-value-intotal-num">{{item.NET_VALUE}}</text>
										</view>
									</view>
								</view>
							</view>

							<view class="middle view" v-if='ITEM_OUTER && ITEM_OUTER.length>0'>
								<view class="item-block item-block-name">
									<text class="item-block-label">计划外</text>
								</view>
								<view class="block-detal" v-for="(item,index) in ITEM_OUTER" :key="index">
									<view class="block-detal-item">
										<text class="detal-item-label">计划编号</text>
										<text class="detal-item-value">{{item.ZZFLD000005}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">计划类型</text>
										<text class="detal-item-value">{{item.ZZFLD00002Q_Z1}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">产品</text>
										<text class="detal-item-value">{{item.DESCRIPTION}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">数量（件）</text>
										<text class="detal-item-value">{{item.ZZFLD000009}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">盒数</text>
										<text class="detal-item-value">{{item.ZZFLD00002W}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">单价</text>
										<text class="detal-item-value">{{item.NET_PRICE}}</text>
									</view>
									<view class="block-detal-item block-detal-item-last">
										<text class="detal-total-label"></text>
										<view class="detal-total-value">
											<text class="item-value-intotal">小计：</text>
											<text class="item-value-intotal-num">{{item.NET_VALUE}}</text>
										</view>
									</view>
								</view>
							</view>

							<view class="float-btn-block">
								<view class="float-btn" @click="handleShowReceiveDetail">
									<text class="float-btn__text">{{ishowReceiveDetail?'收起':'展示完整信息'}}</text>
									<image class="icon-arrow" :class="{'icon-arrow-rotate':!ishowReceiveDetail}"
										src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
								</view>
							</view>

						</view>

						<!-- <view class="order-bottom view">
							<view class="middle view">
								<view class="item-block item-block-name">
									<text class="item-block-label">附件</text>
								</view>
								<view class="block-detal">
									<view class="block-detal-item">
										<view class="detal-item-file">
											<image class="icon-file" src="@/static/image/logo@3x.png" mode="widthFix">
											</image>
											<text class="detal-item-label">开票要求.docx</text>
										</view>
										<button class="btn" type="default">
											<text class="btn-text">下载</text>
										</button>
									</view>
								</view>
							</view>
						</view> -->
					</cell>
				</list>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	import {
		apiGetSalesOrderDetail
	} from '@/servers/salesOrder.js'

	export default {
		data() {
			return {
				ishowReceiveDetail: false,
				orderItem: {},
				orderDetail: {
					ITEM_INNER: [],
					ITEM_OUTER: [],
					INFO: {},
					ATTACHMENT: []
				},
				receiveInfoHeight: '132',
			}
		},
		computed: {
			...mapState(['sysinfo']),
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			ITEM_INNER() {
				return this.orderDetail.ITEM_INNER || []
			},
			ITEM_OUTER() {
				return this.orderDetail.ITEM_OUTER || []
			},
			INFO() {
				return this.orderDetail.INFO || {}
			},
			ATTACHMENT() {
				return this.orderDetail.ATTACHMENT || []
			},
			receiveInfoHeightComputed() {
				return {
					"height": `${this.receiveInfoHeight}px`
				}
			},
			scrollHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height - 64 }px`,
				}
			},
		},
		onLoad(option) {
			this.orderItem = JSON.parse(option.order)
			this.getOrderDetail()
		},
		methods: {
			async getOrderDetail() {
				const params = {
					OBJECT_ID: this.orderItem.object_id,
					role: "WLY001"
				}
				const res = await apiGetSalesOrderDetail(params)
				this.orderDetail = res.DATA
				this.handleShowReceiveDetail()
			},
			handleShowReceiveDetail() {
				this.ishowReceiveDetail = !this.ishowReceiveDetail
				if (this.ishowReceiveDetail === true) {
					let len = this.ITEM_INNER.length + this.ITEM_OUTER.length
					this.receiveInfoHeight = len - 1 ===0 ? '420' : 360*len + 60
				} else {
					this.receiveInfoHeight = '132'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		flex-direction: column;
	}

	.header-bg {
		height: 284rpx;
		margin-top: -88rpx;
	}

	.header-bg-img {
		width: 750rpx;
	}

	.lists {
		position: relative;
		flex-direction: column;
		background: #f0f4f5;
	}

	.main {
		position: relative;
		flex-direction: column;
		margin-top: -164rpx;
		padding: 0 16rpx;
	}

	.list-wrapper {
		display: flex;
		flex-direction: column;
	}

	.scroll-area {
		padding-bottom: 26rpx;
	}

	.list-block {
		display: flex;
		flex-direction: column;
	}

	.order-main {
		flex: 1;
		background: #ffffff;
		border-radius: 16rpx 100rpx 16rpx 16rpx;
		padding-top: 30rpx;
		margin-bottom: 16rpx;
	}

	.top {
		height: 72rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 48rpx;
	}

	.title-no {
		font-size: 24rpx;
		color: #555555;
	}

	.title-info {
		align-items: center;
	}

	.title-info__status {
		height: 48rpx;
		line-height: 44rpx;
		background: #f61d30;
		border-radius: 200rpx;
		border: 1px solid #f61d30;
		text-align: center;
	}

	.title-info__status-text {
		width: 180rpx;
		text-align: center;
		font-size: 12px;
		color: #fff;
	}

	.title-info__status:after {
		border: 0;
	}

	.title-info__status-done {
		background: #f8f8f8;
		color: #888888;
		border: 1px solid #f8f8f8;
	}

	.order-main-middle {
		position: relative;
		padding: 26rpx 48rpx 40rpx;
	}

	.middle-title {
		display: flex;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.middle-title__text {
		font-weight: 500;
		font-size: 32rpx;
		color: $text-base-color;
		font-family: PingFangSC, PingFangSC-Medium;
	}

	.text-block {
		flex: 1;
		flex-direction: column;
		margin-bottom: 32rpx;
	}

	.text-block-last {
		margin-bottom: 0;
	}

	.middle-date {
		font-size: 28rpx;
		color: $text-base-color;
		margin-top: 16rpx;
	}

	.middle-date-des {
		font-size: 24rpx;
		color: #999;
	}

	.text-block-box {
		display: flex;
		justify-content: space-between;
	}

	.middle-date-right {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
	}

	.order-middle {
		position: relative;
		height: 290rpx;
		overflow: hidden;
		padding-bottom: 60rpx;
		margin-bottom: 16rpx;
	}

	.middle {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 48rpx;
		margin-bottom: 16rpx;
	}

	.item-block {
		overflow: hidden;
	}

	.item-block-label {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.item-block-name {
		padding-top: 24rpx;
		padding-bottom: 32rpx;
	}

	.icon-file {
		width: 29px;
		height: 35px;
	}

	.block-detal {
		display: flex;
		flex-direction: column;
	}

	.block-detal-item {
		display: flex;
		margin-bottom: 32rpx;
		justify-content: space-between;
	}

	.block-detal-item-last {
		margin-bottom: 0;
	}

	.detal-item-label {
		color: #999;
		font-size: 24rpx;
		flex: 1;
	}

	.detal-item-file {
		display: flex;
		flex-direction: column;
	}

	.detal-item-value {
		color: #333;
		font-size: 28rpx;
		width: 200%;
		flex: 2;
		text-align: right;
		justify-content: end;
		font-size: 28rpx;
	}
	.detal-total-label {
		color: #999;
		font-size: 24rpx;
	}
	.detal-total-value {
		color: #333;
		font-size: 28rpx;
	}

	.item-value-intotal {
		color: #333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.item-value-intotal-num {
		color: #FF1D32;
		font-size: 28rpx;
		font-weight: 500;
	}

	.btn {
		width: 116rpx;
		height: 54rpx;
		line-height: 50rpx;
		border: 1px solid $wly-primary-color;
		background: #fff;
		border-radius: 30rpx;
	}

	.btn:after {
		border: 0;
	}

	.btn-text {
		color: $wly-primary-color;
		font-size: 24rpx;
	}

	.float-btn-block {
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
		width: 750rpx;
		height: 120rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.float-btn {
		padding: 0 20px;
		height: 60rpx;
		border: 0.5px solid #d8d8d9;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.float-btn__text {
		font-size: 24rpx;
	}


	.icon-arrow {
		width: 7px;
		height: 4px;
		margin-left: 16rpx;
		margin-top: 2px;
		transition-property: transform;
		transition-duration: 0.15s;
		transform: rotate(0deg);
	}

	.icon-arrow-rotate {
		transform: rotate(180deg);
	}
	.middle-unit__text {
		font-size: 24rpx;
	}
</style>
