<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="item-block-btn__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">团购订单</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 class="text-block-box">
									<view class="text-block text-block-last">
										<text class="middle-date-des">团购单位</text>
										<text class="middle-date">{{INFO.GRPNAME}}</text>
									</view>
								</view>
								<view class="text-block-box text-block-box-last">
									<view class="text-block text-block-last">
										<text class="middle-date-des">是否盒外刻字</text>
										<view class="middle-date">
											{{INFO.ZZFLD000099==='X'?'是':'否'}}
											<button class="diy-entry" type="default" @click="goDiyPage" v-if="DIYC==='X'">
												<image class="diy-icon" src="../../static/image/address@3x.png" mode="">
												</image>
												<text class="diy-entry-text">定制酒</text>
											</button>
										</view>
									</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.ZZFLD000098}}</text>
										</view>
									</view>
								</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">
									<view class="block-detal-item">
										<text class="detal-item-label">收货单位</text>
										<text class="detal-item-value">{{INFO.ZZFLD00008T_DSCR}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">联系人</text>
										<text class="detal-item-value">{{INFO.ZZFLD00002L}}</text>
									</view>
									<view class="block-detal-item">
										<text class="detal-item-label">联系电话</text>
										<text class="detal-item-value">{{INFO.ZZFLD00002M}}</text>
									</view>
									<view class="block-detal-item block-detal-item-last">
										<text class="detal-item-label">收货地址</text>
										<text class="detal-item-value">{{INFO.ZZFLD00002N}}</text>
									</view>
								</view>
							</view>
							<view class="empty-block"></view>
							<view class="middle view" v-for="(item,index) in ITEM" :key="index">
								<view class="item-block item-block-name">
									<text class="item-block-label">订购产品</text>
								</view>
								<view class="block-detal">
									<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.ZZFLD000009*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,
				scrollTop: 0,
				orderItem: {},
				orderDetail: {
					ITEM: [],
					INFO: {},
					ATTACHMENT: []
				},
				receiveInfoHeight: '132',
				DIYC: ''
			}
		},
		computed: {
			...mapState(['sysinfo']),
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			ITEM() {
				return this.orderDetail.ITEM || []
			},
			INFO() {
				return this.orderDetail.INFO || {}
			},
			ATTACHMENT() {
				return this.orderDetail.ATTACHMENT || []
			},
			receiveInfoHeightComputed() {
				return {
					"height": `${this.receiveInfoHeight}px`
				}
			},
			scrollHeight() {
				return {
					'height': `${this.sysinfo.safeArea.height - 58 }px`,
				}
			},
		},
		onLoad(option) {
			this.orderItem = JSON.parse(option.order)
			this.getOrderDetail()
		},
		methods: {
			async getOrderDetail() {
				try{
					const params = {
						OBJECT_ID: this.orderItem.object_id,
						role: "WLY001"
					}
					const res = await apiGetSalesOrderDetail(params)
					this.orderDetail = res.DATA
					this.DIYC = res.DIYC
					this.handleShowReceiveDetail()
				}catch(e){
					//TODO handle the exception
				}
				
			},
			handleShowReceiveDetail() {
				this.ishowReceiveDetail = !this.ishowReceiveDetail

				if (this.ishowReceiveDetail === true) {
					this.receiveInfoHeight = `${260*this.ITEM.length+285}`
				} else {
					this.receiveInfoHeight = '132'
				}
			},
			goDiyPage() {
				uni.navigateTo({
					url: `/pages/diy-wine/diy-wine?orderDetail=${JSON.stringify(this.orderDetail)}`
				})
			}
		}
	}
</script>

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

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

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

	.lists {
		position: relative;
		flex-direction: column;
		flex: 1;
		background: #f0f4f5;
		// overflow-y: scroll;
	}

	.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;
		// margin-right: 26rpx;
	}

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

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

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

	.item-block-btn__text {
		width: 180rpx;
		height: 48rpx;
		line-height: 48rpx;
		text-align: center;
		font-size: 12px;
		color: #fff;
	}

	.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;
		margin-bottom: 32rpx;
	}

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

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

	.order-middle {
		position: relative;
		background-color: #fff;
		padding-bottom: 60rpx;
		margin-bottom: 16rpx;
		overflow: hidden;
	}

	.order-middle-auto {
		// height: 290rpx;
	}

	.empty-block {
		height: 8px;
		background: #f0f4f5;
	}

	.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;
	}
	.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: 714rpx;
		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);
	}

	.diy-entry {
		width: 160rpx;
		height: 50rpx;
		line-height: 46rpx;
		border: 1px solid #F61D30;
		background: #fff;
		border-radius: 32rpx;
		margin-left: 16rpx;
	}

	.diy-icon {
		width: 24rpx;
		height: 20rpx;
		margin-right: 8rpx;
	}

	.diy-entry-text {
		color: #F61D30;
		font-size: 12px;
	}
	.middle-unit__text {
		font-size: 24rpx;
	}
</style>
