<template>
	<view class="content">
		<view class="input-class">
			<u-input border-color="black" v-model="value" border placeholder="请扫描条码" @input="putOnPage" />
			<u-button size="medium" class="custom-style" @click="refreshStock()">刷新</u-button>
		</view>
		<view class="in-table">
			<u-table>
				<u-tr class="u-tr">
					<u-th class="u-th" width="15%">序号</u-th>
					<u-th class="u-th" width="20%">区域</u-th>
					<u-th class="u-th">待拣货任务数</u-th>
					<u-th class="u-th">待索取任务数</u-th>
				</u-tr>
				<u-tr class="u-tr" v-for="item in dataList" :key="item.id"  @click="showDetail">
					<u-td class="u-td" width="15%">{{item.id}}</u-td>
					<u-td class="u-td" width="20%">{{item.areaCode}}</u-td>
					<u-td class="u-td">{{item.waitPickNumber}}</u-td>
					<u-td class="u-td">{{item.initNumber}}</u-td>
				</u-tr>
			</u-table>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: "",
				dataList: [],
			};
		},
		onLoad() {
			this.loadList();
		},
		mounted() {
			let that = this; // 箭头函数的写法可省略这行代码
			let trDoms = document.getElementsByClassName('in-table');
			let len = trDoms.length;
			for(let i = 0; i < len; i++) {
				let item = trDoms[i];
				 // table为表格绑定的数据
				 // 表头行除外直接通过this.tableData[i - 1] 是否存在判断即可
				if(this.tableData[i - 1]) {
				
					// 这里使用了箭头函数的写法，如果使用的function 的写法，请注意this的指向问题
					item.onclick = () => {
						let row = this.tableData[i - 1];
						this.getCurrentRow(row);
					};
					// function 的写法：
					item.onclick = function() {
					    let row = that.tableData[i - 1];
					    that.getCurrentRow(row);
					};
				}
			}
		},
		methods: {
			showDetail(){
				alert("11111");
			},
			loadList() {
				this.dataList = [];
				this.$u.api.replenishment.queryTaskNumberGroupByArea().then(res => {
					this.dataList = this.dataList.concat(res.rows);
				});
			},
			putOnPage(val) {
				if (val !== null && val != '') {
					this.$u.route({
						url: '/pages/replenishment/putOn',
						type: 'navigateTo',
					})
				}
			},
			refreshStock() {
				this.loadList();
			},
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		padding: 20rpx 50rpx;
		flex-direction: column;
		height: 100%;

		.input-class {
			display: flex;
		}

		.in-table {
			margin-top: 50rpx;
			// position: fixed;
			// top: 40%;
			// right: 50rpx;
			// left: 50rpx;
		}

		.custom-style {
			color: black;
			width: 80rpx;
			margin-left: 30rpx;
		}
	}
</style>
