<template>
	<z-paging ref="paging" @query="queryList" v-model="dataList" :default-page-size="queryParams.pageSize"
		:auto-show-system-loading="false" empty-view-text="抱歉，暂时还没有相关数据！">
		<template #top>
			<custom-nav-bar :left="true" title="出入库查询">
			</custom-nav-bar>
		</template>
		<view class="condition">
			<uni-forms ref="baseForm">
				<view class="view">
					<uni-forms-item label="仓库">
						<uni-data-select v-model="queryParams.storageId" :localdata="storageSelectList" @change="change"
							:placeholder="laceholder" :clear="false"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="日期">
						<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
					</uni-forms-item>
				</view>
				<view class="view"><u-button type="success" text="查询" @click="queryList" /></view>
			</uni-forms>
		</view>
		<view class="tit">{{storage.storageName}}</view>
		<view style="margin: 0 10px 10px;">
			<div class="table-container">
				<table>
					<thead>
						<tr>
							<th>产品</th>
							<th>入库</th>
							<th>出库</th>
							<th>库存</th>
						</tr>
					</thead>
					<tbody>
						<tr v-for="item in dataList">
							<td>{{item.deviceTypeName}}</td>
							<td @click="openInView(item)">{{item.amountIn}}</td>
							<td @click="openOutView(item)">{{item.amountOut}}</td>
							<td @click="openView(item)">{{item.amount}}</td>
						</tr>
					</tbody>
				</table>
			</div>
		</view>
	</z-paging>
</template>
<script>
	import store from "@/store"
	import plugin from "@/plugins"
	import {
		getDeviceStorageUserListByUserId
	} from "@/api/iot/deviceStorageUser"
	import {
		getDeviceSeqUseCount
	} from "@/api/iot/deviceSeq"
	export default {
		data() {
			return {
				user: store.state.user.user,
				storageSelectList: [],
				storageList:[],
				storageId: null,
				laceholder: "",
				storage: {},
				dataList: [],
				range: [],
				queryParams: {
					storageId: null,
					deviceCode: null,
					params: {
						beginTime: null,
						endTime: null
					}
				},
			}
		},
		watch: {
			range(newval) {
				if (newval && newval.length) {
					this.queryParams.params.beginTime = newval[0];
					this.queryParams.params.endTime = newval[1];
				}
				this.queryList();
			}
		},
		onLoad() {
			this.getDeviceStorage();
			this.range.push(this.getSevenDaysAgo())
			this.range.push(this.getNowFormatDate())
			if (this.range && this.range.length) {
				this.queryParams.params.beginTime = this.range[0];
				this.queryParams.params.endTime = this.range[1];
			}
		},
		onShow() {},
		mounted() {},
		methods: {
			getDeviceStorage() {
				getDeviceStorageUserListByUserId().then(res => {
					if (res && res.data) {
						this.storageList = res.data;
						this.storageSelectList = res.data.map(
							item => {
								return {
									value: item.id,
									text: item.storageName
								}
							});
					}
				})
				if (this.storageSelectList && this.storageSelectList.length) {
					this.laceholder = this.storageSelectList[0].text;
					this.queryParams.storageId = this.storageSelectList[0].value;
					this.storage = this.storageList[0];
				}
			},
			maskClick(e) {},
			queryList() {
				getDeviceSeqUseCount(this.queryParams).then(res => {
					this.dataList = res.data;
				});
			},
			change(e) {
				this.storage = this.storageList.find(x => x.id == e);
				this.queryList();
			},
			openInView(item) {
				if (item.amountIn == 0) {
					plugin.modal.msgError("没有可查看的数据！")
					return
				}
				uni.navigateTo({
					url: '/pages/retrace/stockWms?ids=' + item.inIds
				});
			},
			openView(item) {
				if (item.amount == 0) {
					plugin.modal.msgError("没有可查看的数据！")
					return
				}
				uni.navigateTo({
					url: '/pages/retrace/stockWms?ids=' + item.seqIds
				});
			},
			openOutView(item) {
				if (item.amountOut == 0) {
					plugin.modal.msgError("没有可查看的数据！")
					return
				}
				uni.navigateTo({
					url: '/pages/retrace/stockWms?ids=' + item.outIds
				});
			},
			getNowFormatDate() {
				let date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let d = date.getDate();
				if (month < 10) {
					month = "0" + month;
				}
				if (d < 10) {
					d = "0" + d;
				}
				return year + "-" + month + "-" + d;
			},
			getSevenDaysAgo() {
				const today = new Date();
				const sevenDaysAgo = new Date(today);
				sevenDaysAgo.setDate(today.getDate() - 7);
				// 格式化为 YYYY-MM-DD 格式
				const year = sevenDaysAgo.getFullYear();
				const month = String(sevenDaysAgo.getMonth() + 1).padStart(2, '0');
				const day = String(sevenDaysAgo.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			}
		},

	}
</script>

<style lang="scss" scoped>
	.cards-title {
		border-bottom: none;

	}

	// 表单
	.condition {
		background-color: #fff;
		padding: 5px 10px;

	}

	.condition ::v-deep uni-form span {
		display: flex !important;
		align-items: center;

		.view:first-child {
			flex: 1 1 0%;
			padding-right: 10px;
		}
	}

	.uni-forms-item {
		margin-bottom: 5px;
	}

	::v-deep .uni-forms-item__label {
		width: auto !important;
	}
</style>