<!--
 * @Author: zwq
 * @Date: 2024-02-27 14:43:14
 * @LastEditors: zwq
 * @LastEditTime: 2024-10-30 14:00:57
 * @Description:
-->
<template>
	<div class="app-container">
		<!-- 搜索工作栏 -->
		<search-bar
			:formConfigs="formConfig"
			ref="searchBarForm"
			@headBtnClick="buttonClick" />
		<div v-if="containerCodeArr.length > 0">
			<el-descriptions title="膜卷熟化时间信息" size="mini" border>
				<el-descriptions-item label="当前设置天数">
					{{ this.xDays.value }}
				</el-descriptions-item>
				<el-descriptions-item label="提醒数量">
					{{ containerCodeArr.length }}
				</el-descriptions-item>
				<el-descriptions-item label="每页数量">
					<el-input-number
						v-model="pageSize"
						:step="50"
						:min="100"
						size="small"
						step-strictly />
				</el-descriptions-item>
			</el-descriptions>
			<el-divider content-position="left">
				以下每页上限 {{ pageSize }} 条数据
			</el-divider>
			<el-tabs v-model="activeName">
				<el-tab-pane
					v-for="i in Math.ceil(containerCodeArr.length / pageSize)"
					:key="i"
					:label="'第' + i + '页'"
					:name="i + '页'">
					<el-tag
						style="margin: 5px; border: 1px solid #67c23a;cursor: pointer;"
						v-for="(item, index) in containerCodeArr.slice(
							(i - 1) * pageSize,
							i * pageSize
						)"
						:key="index"
						effect="plain"
            @click="toRollMessagePage(item.containerCode)"
						size="small">
						{{ item.containerCode }}
					</el-tag>
				</el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>
<script>
import { listData, updateData } from '@/api/system/dict/data';
import {
	rollTimeRemind,
	exportgetoverfinishtimeExcel,
} from '@/api/asrs/warehouseStorehouseGoodsSpecification';

export default {
	data() {
		return {
			warehouseId: '1698950657556340737',
			xDays: {},
			containerCodeArr: [],
			activeName: '1页',
			pageSize: 200,
			formConfig: [
				{
					type: 'input',
					label: '设置天数',
					placeholder: '设置天数',
					param: 'day',
				},
				{
					type: 'button',
					btnName: '设置',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'primary',
					plain: true,
				},
			],
		};
	},
	components: {},
	created() {
		this.init();
		const queryParams = {
			pageNo: 1,
			pageSize: 99,
			dictType: 'rollTimeRemind',
		};
		listData(queryParams).then((response) => {
			this.formConfig[0].selectOptions = response.data.list;
			if (response.data.list.length > 0) {
				this.formConfig[0].placeholder = response.data.list[0].value;
				this.xDays = response.data.list[0];
				this.setDay();
			}
		});
	},
	methods: {
		init() {},
		setDay() {
			this.containerCodeArr = [];
			const params = {
				xDays: this.xDays.value,
				warehouseId: this.warehouseId,
			};
			rollTimeRemind(params).then((response) => {
				this.containerCodeArr = response;
			});
		},
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					const regex = /^[1-9]\d*$/;
					if (regex.test(val.day)) {
						this.xDays.value = val.day;
						this.setDay();
						this.setDict(); //修改字典数据
					} else {
						this.$message({
							message: '请输入正整数天数!',
							type: 'warning',
						});
					}
					break;
				case 'export':
					this.handleExport('膜卷熟化时间信息',val.day);
					break;
				default:
					console.log(val);
			}
		},
		/** 修改字典天数设置 */
		setDict: function () {
			updateData(this.xDays).then((response) => {});
		},
		/** 导出按钮操作 */
		handleExport(name,day) {
			// 处理查询参数
			this.$modal
				.confirm('是否确认导出膜卷熟化时间信息')
				.then(() => {
					this.exportLoading = true;
					return exportgetoverfinishtimeExcel(day);
				})
				.then((response) => {
					this.$download.excel(response, name + '.xls');
					this.exportLoading = false;
				})
				.catch(() => {});
		},
		/** 跳转膜卷信息页面 */
    toRollMessagePage(trayCode){
      this.$confirm(`是否跳转到膜卷信息页面? 托盘编码:[ ${trayCode} ]`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success ",
      })
        .then(() => {
      this.$router.push({
        path: "rollMessage",
        query:{
          trayCode: trayCode
        }
      });
        })
        .catch(() => { });
    }
	},
};
</script>

<style lang="scss" scoped></style>
