<template>
	<div>
		<u-input class="input" v-model="wareHouse" border type="text" placeholder="请扫描周转箱条码" placeholder-style="color:#666666" />
		
		<u-table border class="table">
			<u-tr>
				<u-th>序号</u-th>
				<u-th>任务号</u-th>
				<u-th>品规数</u-th>
				<u-th>周转箱条码</u-th>
			</u-tr>
			<u-tr>
				<u-td>1</u-td>
				<u-td>湖北</u-td>
				<u-td>1</u-td>
				<u-td>2</u-td>
			</u-tr>
			<u-tr>
				<u-td>1</u-td>
				<u-td>湖北</u-td>
				<u-td>1</u-td>
				<u-td>2</u-td>
			</u-tr>
		</u-table>
		<div class="order">
			<span class="orderText">挑货顺序</span>
			<div>
				<div class="orderInput">
					<u-input v-model="wareHouse" border type="select" placeholder="请选择顺序" prop="wareHouse" @click="show = true" />
					<u-select v-model="show" :list="list" @confirm="confirm"></u-select>
				</div>
				<div class="orderTip">正序：从区域内最小货位开始拣货</div>
				<div class="orderTip">倒序：从区域内最大货位开始拣货</div>
			</div>
		</div>
		<view class="footer">
			<u-button type="success">刷新</u-button>
			<u-button type="primary">开始拣选</u-button>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				wareHouse: '',
				list: [
					{
						label: '正序',
						value: 1
					},
					{
						label: '倒序',
						value: 2
					}
				]
			}
		},
		methods: {
			confirm(e) {
				this.wareHouse = e[0].label
			}
		}
	}
</script>

<style lang="scss">
	.input {
		width: 90%;
		margin: 20rpx auto;
	}
	.table {
		width: 90%;
		margin: 40rpx auto;
	}
	.order {
		display: flex;
		width: 90%;
		margin: 20rpx auto;
	}
	.orderText {
		margin-top: 10rpx;
		margin-right: 40rpx;
	}
	.orderInput {
		display: flex;
	}
	.orderTip {
		font-size: 28rpx;
		color: #333333;
		margin-top: 20rpx;
	}
	.footer {
		position: fixed;
		width: 100%;
		bottom: 20rpx;
		display: flex;
		align-items: center;
	}
</style>