<template>
	<view class="order view">
		<view class="listview">
			<view class="cell-list">
				<view class="middle view planout-block-item">
					<view class="item-block item-block-code">
						<text class="item-block-label">单号：{{itemHead.packpl_id}}</text>
						<button class="item-block-btn" type="default"><text
								class="item-block-btn__text">{{itemHead.status}}</text></button>
					</view>
					<view class="item-block item-block-name">
						<text class="item-block-label item-block__label">{{itemHead.packtype}}</text>
					</view>
					<view class="item-block">
						<text class="detal-item-label">下单日期</text>
					</view>
					<view class="item-block item-block-date">
						<text class="item-block-label-des">{{itemHead.datum}}</text>
					</view>

					<view class="block-detal" :class="{'block-detal-last':index === itemLists.length-1}"
						v-for="(item,index) in itemLists" :key="index">
						<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.planqty_box}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">吨数</text>
							<text class="detal-item-value">{{item.planqty_ton}}</text>
						</view>
						<view class="block-detal-item">
							<text class="detal-item-label">包材保证金</text>
							<text class="detal-item-value">{{item.by_dmbtr}}</text>
						</view>
						
						<view class="block-detal-item block-detal-item-last">
							<text class="detal-item-label">备注</text>
							<text class="detal-item-value">{{item.remark}}</text>
						</view>
					</view>

					<!-- <view class="item-block">
						<text class="item-block-label-des">{{itemHead.remark}}</text>
					</view>
					<view class="item-block item-block-date">
						<text class="detal-item-label">备注</text>
					</view> -->

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'


	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {
						HEAD: {},
						ITEM: []
					}
				}
			}
		},
		data() {
			return {

			}
		},
		computed: {
			navHeight() {
				return {
					'height': `${this.sysinfo.safeArea.top + 44}px`
				}
			},
			itemHead() {
				return this.newsItem.head || {}
			},
			itemLists() {
				return this.newsItem.item || []
			},
			...mapState(['sysinfo'])
		},
		methods: {

		}
	}
</script>

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

	.order {
		flex: 1;
		padding: 0 16rpx;
		margin-top: 28rpx;
	}

	.listview {
		flex: 1;
		flex-direction: column;
	}

	.cell-list {
		flex-direction: column;
	}

	.date {
		font-size: 28rpx;
		color: #999999;
		font-size: 28rpx;
		text-align: center;
		margin-bottom: 24rpx;
	}

	.icon-address {
		width: 44rpx;
		height: 44rpx;
		margin-right: 16rpx;
	}

	.cell-list-block__content {
		display: flex;
		flex: 1;
		flex-direction: column;
		margin-bottom: 40rpx;
	}

	.cell-list-block__title {
		color: #333;
		font-size: 30rpx;
		flex: 1;
		align-items: center;
		margin-bottom: 4rpx;
	}

	.cell-list-block {
		overflow: hidden;
		display: flex;
		flex-direction: column;
		background: #fff;
		padding: 20rpx 24rpx;
		border-radius: 20rpx;
		margin-bottom: 56rpx;
	}

	.list-block-title {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.list-block-title__text {
		color: #999999;
		font-size: 26rpx;
	}

	.planout-block-item {
		flex: 1;
		padding: 40rpx 32rpx;
		background-color: #fff;
		border-radius: 16rpx 100rpx 16rpx 16rpx;
	}

	.item-block {
		overflow: hidden;
		background-color: #fff;
		padding: 0 16rpx;
	}

	.item-block-label {
		font-size: 24rpx;
		color: #333;
	}

	.item-block__label {
		flex: 1;
		text-align: left;
		font-size: 32rpx;
		color: #333;
		font-weight: 500;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-block-code {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-block-btn {
		height: 48rpx;
		line-height: 44rpx;
		background: #f61d30;
		border-color: transparent;
		border-radius: 80rpx 200rpx 200rpx 80rpx;
		text-align: center;
	}

	.item-block-btn__text {
		font-size: 12px;
		color: #fff;
	}

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

	.item-block-date {
		margin-top: 12rpx;
		margin-bottom: 48rpx;
	}

	.item-block-label-des {
		flex: 1;
		text-align: left;
		font-size: 28rpx;
		color: #333;
	}

	.block-detal {
		display: flex;
		flex-direction: column;
		background: #f8f8f8;
		border-radius: 20rpx;
		padding: 28rpx 32rpx;
		margin-bottom: 52rpx;
	}

	.block-detal-last {
		margin-bottom: 32rpx;
	}

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

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

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

	.detal-item-value {
		color: #333;
		font-size: 28rpx;
		width: 200%;
		flex: 2;
		text-align: left;
	}
</style>
