<template>
	<view class="apply-history view" :style="winHeight">
		<view class="status_bar" :style="navHeight"></view>
		<view class="apply-history-wrapper view">
			<view class="top">
				<text class="title-no">要货单号：TP10000021</text>
				<view class="title-info">
					<text class="title-info__status">已审批</text>
				</view>
			</view>
			<view class="middle view">
				<text class="middle-title">发货单号：FH200333222</text>
				<view class="text-block">
					<text class="middle-date">苏州新川商贸公司</text>
					<text class="middle-date-des">客户名称</text>
				</view>
				<view class="text-block">
					<text class="middle-date middle-billno">2021-08-06 05:14</text>
					<text class="middle-date-des">发票号</text>
				</view>
			</view>
			<view class="bottom view">
				<view class="bottom-nav">
					<view class="bottom-nav-arrow">
						<text class="arrow-des">要货明细</text>
					</view>
				</view>
				<view class="bottom-content">
					<view class="table">
						<view class="table-head">
							<text class="th th-1">产品</text>
							<text class="th">未发货量</text>
							<text class="th">要货数量</text>
							<text class="th">审批量</text>
						</view>
						<view class="row">
							<text class="td td-1">尖庄2101</text>
							<text class="td">75</text>
							<text class="td">25</text>
							<text class="td">10</text>
						</view>
						<view class="row">
							<text class="td td-1">1618五粮液</text>
							<text class="td">100</text>
							<text class="td">25</text>
							<text class="td">60</text>
						</view>
					</view>
					<!-- <uni-table class="bottom-content-table" border emptyText="暂无更多数据">
						<uni-tr>
							<uni-th width='100' align="center">产品</uni-th>
							<uni-th width='70' align="center">未发货量</uni-th>
							<uni-th width='70' align="center">要货数量</uni-th>
							<uni-th width='70' align="center">审批量</uni-th>
						</uni-tr>
						<uni-tr>
							<uni-td>尖庄2101</uni-td>
							<uni-td>75</uni-td>
							<uni-td>25</uni-td>
							<uni-td>10</uni-td>
						</uni-tr>
						<uni-tr>
							<uni-td>1618五粮液</uni-td>
							<uni-td>100</uni-td>
							<uni-td>25</uni-td>
							<uni-td>60</uni-td>
						</uni-tr>
					</uni-table> -->
				</view>
				<view class="bottom-nav">
					<view class="bottom-nav-arrow">
						<text class="arrow-des">收货信息</text>
					</view>
				</view>
				<view class="bottom-content bottom-content-2">
					<view class="text-block">
						<text class="middle-date">TP10000066</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>
		</view>
	</view>
</template>
<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {}
		},
		computed: {
			...mapState(['sysinfo'])
		},
		onLoad() {
			this.winHeight = `height:${this.sysinfo.safeArea.height}px`;
			this.navHeight = `height:${this.sysinfo.safeArea.top + 44}px`;
		},
		onBackPress() {
			uni.navigateBack()
		}
	}
</script>

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

	.apply-history {
		width: 750rpx;
		flex: 1;
		background: $background-color-1;
		padding: 0 16rpx;
	}

	.apply-history-wrapper {
		background-color: #fff;
		margin-top: 18rpx;
		border-radius: 16rpx;
		box-shadow: 0px 2px 4px 0px #dbe4ee;
	}

	.top {
		position: relative;
		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;
	}

	.middle {
		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 32rpx 64rpx;
	}

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

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

	.arrow-des {
		font-size: 28rpx;
		color: $text-base-color;
	}

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

	.bottom-content-table {
		flex: 1;
	}

	.uni-table-th {
		background-color: #f5f6f7;
		color: #555;
		font-weight: 400;
		padding: 12rpx 14rpx;
		font-size: 28rpx;
	}

	.uni-table-td {
		text-align: center !important;
	}

	.bottom-content-2 {
		margin-top: 50rpx;
	}

	.table {
		display: table;
		border: 1px solid #ECECEC;
		overflow:hidden;
		border-bottom: 0;
		border-right: 0;
		flex-direction: column;
	}

	.table-head {
		display: table-row;
		height: 64rpx;
	}

	.th {
		display: table-cell;
		background-color: #f5f6f7;
		color: #555;
		text-align: center;
		font-weight: 400;
		padding: 12rpx 14rpx;
		font-size: 28rpx;
		border-right: 1px solid #ECECEC;
		border-bottom: 1px solid #ECECEC;
		width: 142rpx;
	}
	
	.th-1{
		width: 228rpx;
	}

	.row {
		display: table-row;
		height: 64rpx;
	}

	.td {
		width: 142rpx;
		padding: 8px 10px;
		font-size: 14px;
		text-align: center;
		display: table-cell;
		color: $text-base-color;
		border-right: 1px solid #ECECEC;
		border-bottom: 1px solid #ECECEC;
	}
	
	.td-1{
		width: 228rpx;
	}
</style>
