<template>
	<view class="order view">
		<view class="top">
			<text class="title-no">制票编号：{{itemHead.INVO_INFOID}}</text>
			<view class="title-info">
				<button class="title-info__status" type="default"><text
						class="item-block-btn__text">{{itemHead.INV_STATUS_TEXT}}</text></button>
			</view>
		</view>
		<view class="middle view">
			<text class="middle-title">{{itemHead.INFTYPE}}</text>
			<view class="text-block">
				<text class="middle-date">{{itemHead.MAK_DATE}}</text>
				<text class="middle-date-des">下单日期</text>
			</view>
		</view>
		<view class="bottom view">
			<view class="bottom-nav">
				<view class="bottom-nav-arrow" @click="handleShowDetail">
					<text class="arrow-des">明细</text>
					<image class="icon-arrow" :class="{'icon-arrow-rotate':ishowDetail}"
						src="@/static/image/arrow_up@3x.png" mode="aspectFit"></image>
				</view>
			</view>
			<view v-if="ishowDetail" class="bottom-content" v-for="(item,index) in itemLists" :key="index">
				<view class="text-block">
					<text class="middle-date">{{item.DESCRIPTION}}</text>
					<text class="middle-date-des">产品描述</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-billno">{{item.INV_GUID}}</text>
					<text class="middle-date-des">发票号</text>
				</view>
				<view class="text-block">
					<text class="middle-date">{{item.ZZFLD00002S}}</text>
					<text class="middle-date-des">规格</text>
				</view>
				<view class="text-block-2">
					<view class="text-block text-block-1">
						<text class="middle-date">{{item.USE_ZZFLD9}}</text>
						<text class="middle-date-des">开票件数</text>
					</view>
					<view class="text-block">
						<text class="middle-date">{{item.ZZFLD00002T}}</text>
						<text class="middle-date-des">单位</text>
					</view>
				</view>
				<view class="text-block-2">
					<view class="text-block text-block-1">
						<text class="middle-date">{{item.NET_PRICE}}</text>
						<text class="middle-date-des">单价</text>
					</view>
					<view class="text-block">
						<text class="middle-date">{{item.USE_QUANTITY}}</text>
						<text class="middle-date-des">数量</text>
					</view>
				</view>
				<view class="text-block-2">
					<view class="text-block text-block-1">
						<text class="middle-date">{{item.REMAIN_ZZFLD9}}</text>
						<text class="middle-date-des">剩余开票件数</text>
					</view>
					<view class="text-block">
						<text class="middle-date">{{item.ZZFLD00002E}}</text>
						<text class="middle-date-des">税率</text>
					</view>
				</view>
				<view class="text-block-2">
					<!-- 	<view class="text-block text-block-1">
						<text class="middle-date">{{item.INV_GUID}}</text>
						<text class="middle-date-des">剩余发货件数</text>
					</view> -->
					<view class="text-block">
						<text class="middle-date">{{item.NET_VALUE}}</text>
						<text class="middle-date-des">价税合计</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {
						HEAD: {},
						ITEM: []
					}
				}
			}
		},
		computed: {
			itemHead() {
				return this.newsItem.HEAD || {}
			},
			itemLists() {
				return this.newsItem.ITEM || []
			},
		},
		data() {
			return {
				ishowDetail: true
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
			close(e) {
				e.stopPropagation();
				this.$emit('close');
			},
			handleShowDetail() {
				this.ishowDetail = !this.ishowDetail
			},
		}
	}
</script>

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

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

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

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

	.title-info {
		align-items: center;
		margin-right: 26rpx;
	}

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

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

	.middle {
		position: relative;
		padding: 26rpx 32rpx;
	}

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

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

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

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

	.bottom {
		padding: 0 50rpx 48rpx;
	}

	.bottom-nav {
		height: 40rpx;
		justify-content: flex-end;
		align-items: center;
	}

	.bottom-nav-arrow {
		align-items: center;
	}

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

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

	.icon-arrow-rotate {
		transform: rotate(180deg);
	}

	.bottom-content {
		flex-direction: column;
		margin-top: 48rpx;
	}

	.text-block-2 {
		flex-direction: row;
	}

	.text-block-1 {
		flex: 2;
	}
</style>
