<template>
	<view class="order view">
		<view class="top">
			<text class="title-no">制票编号：TP10000021</text>
			<view class="title-info">
				<text class="title-info__status">已审批</text>
				<i class="divider"></i>
				<image @click="handleMore" class="icon-more" src="@/static/image/shop_more@3x.png" mode=""></image>
			</view>
		</view>
		<view class="middle view">
			<view class="popover" v-if="ishowMore">
				<image class="popover-img" src="@/static/image/shop_menu@3x.png" mode="aspectFit"></image>
				<view class="popover-box">
					<text class="popover-box-item popover-box-item-1" @tap="goDelivery()">申请发货</text>
					<text class="popover-box-item" @tap="goHistory()">申请历史</text>
				</view>
			</view>
			<text class="middle-title">配额酒制票通知单(计划内)</text>
			<view class="text-block">
				<text class="middle-date">2021-08-06 05:14</text>
				<text class="middle-date-des">下单日期</text>
			</view>
			<view class="text-block">
				<text class="middle-date middle-billno">92353634474578</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">
				<view class="text-block">
					<text class="middle-date">五粮液1618</text>
					<text class="middle-date-des">产品描述</text>
				</view>
				<view class="text-block">
					<text class="middle-date">52% 500ml *4</text>
					<text class="middle-date-des">规格</text>
				</view>
				<view class="text-block-2">
					<view class="text-block text-block-1">
						<text class="middle-date">100</text>
						<text class="middle-date-des">开票件数</text>
					</view>
					<view class="text-block">
						<text class="middle-date">瓶</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">100</text>
						<text class="middle-date-des">单价</text>
					</view>
					<view class="text-block">
						<text class="middle-date">4000</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">100</text>
						<text class="middle-date-des">剩余开票件数</text>
					</view>
					<view class="text-block">
						<text class="middle-date">17%</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">100</text>
						<text class="middle-date-des">剩余发货件数</text>
					</view>
					<view class="text-block">
						<text class="middle-date">400,000.00</text>
						<text class="middle-date-des">价税合计</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			newsItem: {
				type: Object,
				default: function(e) {
					return {}
				}
			}
		},
		data() {
			return {
				ishowMore: false,
				ishowDetail: true
			}
		},
		methods: {
			click() {
				this.$emit('click');
			},
			close(e) {
				e.stopPropagation();
				this.$emit('close');
			},
			handleMore() {
				this.ishowMore = !this.ishowMore
			},
			handleShowDetail() {
				this.ishowDetail = !this.ishowDetail
			},
			goHistory(){
				uni.navigateTo({
					url:'/pages/apply-history/apply-history'
				})
			},
			goDelivery(){
				uni.navigateTo({
					url:'/pages/apply-delivery/apply-delivery'
				})
			}
		}
	}
</script>

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

	.order {
		flex: 1;
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0px 2px 4px 0px #dbe4ee;
		margin-bottom: 60rpx;
		margin-top: 18rpx;
	}

	.top {
		height: 72rpx;
		align-items: center;
		justify-content: space-between;
		padding: 0 32rpx;
		border-bottom: 1px solid #f1f2f4;
	}

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

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

	.title-info__status {
		font-size: 24rpx;
		color: #999;
	}

	.divider {
		width: 1px;
		height: 28rpx;
		margin-right: 14rpx;
		margin-left: 8rpx;
		border-right: 1px solid rgba(151, 151, 151, 0.39);
	}

	.icon-more {
		width: 16px;
		height: 16px;
	}

	.popover {
		position: absolute;
		right: 20rpx;
		top: 10rpx;
		z-index: 10;
		width: 200rpx;
		box-shadow: 0px 0px 8rpx 0px rgba(0, 0, 0, 0.18);
		background-color: #fff;
		border-radius: 8rpx;
		transition-property: opacity, transform;
		transition-duration: 0.15s;
	}

	.popover-img {
		position: absolute;
		right: 4rpx;
		top: -36rpx;
		z-index: 20;
		width: 48rpx;
		height: 48rpx;
	}

	.popover-box {
		position: relative;
		z-index:50;
		flex: 1;
		flex-direction: column;
	}

	.popover-box-item {
		text-align: center;
		font-size: 28rpx;
		color: $text-base-color;
		padding: 24rpx 32rpx;
	}

	.popover-box-item-1 {
		border-bottom: 1px solid rgba(151, 151, 151, 0.39);
	}

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

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

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

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