<template>
	<div class="view">
		<z-paging ref="paging" v-model="data" @query="queryList">
		<div class="card" v-for="(item,index) in data" :key="index" @click="toDetail">
			<div class="top">
				<div class="t_left">
					入库单号：{{item.id}}
				</div>
				<div class="t_right" :style="{color: item.color}">
					{{item.status}}
				</div>
			</div>
			<u-line></u-line>
			
			<div class="row">
				<span class="info">入库时间</span>
				<span class="value">{{item.time}}</span>
			</div>
			
			<div class="row">
				<span class="info">入库仓库</span>
				<span class="value">{{item.entrepot}}</span>
			</div>
			
			<div class="row">
				<span class="info">入库商品</span>
				<span class="value">{{item.supplier}}</span>
			</div>
		</div>
		<template #bottom>
			<div class="btnBox">
				<div class="btn" @click="toIncrease">新增</div>
			</div>
		</template>
		
		</z-paging>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				data:[{
					id:'CD.123213221312',
					status:'采购入库',
					time:'20220901-0001',
					entrepot:'仓库1',
					supplier: '北京供应商',
					price: '5000',
					color:'#21BBF3'
				},
				{
					id:'CD.123213221312',
					status:'其他入库',
					time:'20220901-0001',
					entrepot:'仓库1',
					supplier: '北京供应商',
					price: '5000',
					color:'#999999'
				}],
			}
		},
		methods:{
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.data);
			},
			toIncrease () {
				uni.navigateTo({
					url:'/page_salesman_index/warehousing/increase'
				})
			},
			toDetail() {  
				uni.navigateTo({
					url: '/page_salesman_index/warehousing/increase_detail'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.view {
		padding-bottom: 256rpx;
		.card {
			margin: 24rpx;
			padding: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			.top {
				margin-bottom: 24rpx;
				display: flex;
				justify-content: space-between;
				.t_left {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #585858;
				}
				.t_right {
					font-size: 28rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 600;
					color: #F08433;
				}
			}
			.row {
				margin-top: 24rpx;
				.info {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
				}
				.value {
					margin-left: 24rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #222222;
				}
			}
		}
		
		.btnBox {
			position: fixed;
			bottom: 0;
			padding: 2rpx 32rpx 32rpx 32rpx;
			border: 0;
			width: 100%;
			box-sizing: border-box;
			background: #F7F7F7;
			.btn {
				height: 80rpx;
				background: #21BBF3;
				border-radius: 40rpx;
				
				display: flex;
				justify-content: center;
				align-items: center;
				
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;
			}
		} 
	}
</style>