<template>
	<view class="ware-wrap record-table">
		<u-navbar back-icon-color="#333333" background="#FFFFFF" title="出库记录"
		titleColor="#333333" :border-bottom="false" title-bold></u-navbar>
		<u-row gutter="12" justify="space-between">
			<u-col span="3">
				<view class="label u-text-left">订单编号</view>
			</u-col>
			<u-col span="4">
				<view class="label u-text-center">物料名称</view>
			</u-col>
			<u-col span="2">
				<view class="label u-text-center">出库量</view>
			</u-col>
			<u-col span="3">
				<view class="label u-text-right">操作时间</view>
			</u-col>
		</u-row>
		<view style="padding: 0 6rpx;">
			<u-divider half-width="100%" border-color="#F4F5F7" height="2"
			 margin-top="30" margin-bottom="30"></u-divider>
		</view>
		<view class="table-content">
			<u-row gutter="12" justify="space-between" 
			v-for="(item, index) in record" :key="index">
				<u-col span="3">
					<view class="row-txt">{{ item.businessNumber }}</view>
				</u-col>
				<u-col span="4">
					<view class="row-txt">{{ item.skuName }}</view>
				</u-col>
				<u-col span="2">
					<view class="row-txt u-text-center">{{ item.outAmount || 0 }}</view>
				</u-col>
				<u-col span="3">
					<view class="row-txt u-text-right time-txt">
					{{ (item.createTime || item.updateTime) | datefmt('YYYY.MM.DD HH:mm:ss')}}
					</view>
				</u-col>
			</u-row>
			<u-loadmore margin-top="20" :status="status" @loadmore="loadRecord" />
			<u-gap height="68"></u-gap>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 'loadmore',
				details: [],
				record: [],
				total: 100,
				search: {
					pageNumber: 0,
					pageSize: 30,
					accessType: 1,
				},
			};
		},
		onReachBottom() {
			if(this.status == 'nomore') return ;
			this.status = 'loading';
			this.search.pageNumber = ++ this.search.pageNumber;
			this.loadAccess()
		},
		computed: {},
		onLoad() {
			getApp().trackPage('出入库记录')
			this.getData();
		},
		methods: {
			getData() {
				let self = this
				self.loadAccess()
			},
			loadRecord() {
				if(this.status == 'nomore') return ;
				this.status = 'loading';
				this.search.pageNumber = ++ this.search.pageNumber;
				this.loadAccess()
			},
			async loadAccess() {
				let self = this
				let res = await self.$u.api.listAccessHistory(self.search)
				if(res && res.code == 200) {
					self.total = res.data && res.data.total || self.total
					let list = res.data && res.data.list && self.$u.deepClone(res.data.list) || [];
					if(list && list.length) {
						self.record.push(...list)
						if(self.total > self.record.length) {
							self.status = "loadmore"
						} else {
							self.status = "nomore"
						}
					} else {
						self.status = "nomore"
					}
				} else {
					self.status = "nomore"
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.ware-wrap {
	background-color: #FFFFFF;
	height: 100vh;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
	.label {
		font-size: 26rpx;
		font-weight: bold;
		color: #333333;
		line-height: 32rpx;
	}
	.row-txt{
		word-break:break-all;
		margin-bottom: 40rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: #333333;
		line-height: 32rpx;
	}
	.time-txt {
		word-break:normal;
	}
	.table-content {
		height: 100%;
		overflow-y: auto;
	}
}
</style>
