<!--
 * @Author: zwq
 * @Date: 2026-04-16 14:03:22
 * @LastEditors: zwq
 * @LastEditTime: 2026-04-17 15:50:29
 * @Description:
-->
<template>
	<div style="background: #f2f4f9">
		<div style="background: #f2f4f9; height: 38px; width: 100%">
			<ButtonNav
				ref="buttonNav"
				:menus="['计划停机配置', '停机记录']"
				@change="currentMenu">
				<template v-slot:tab1>
					<div>计划停机配置</div>
				</template>
				<template v-slot:tab2>
					<div>停机记录</div>
				</template>
			</ButtonNav>
		</div>
		<div
			style="
				background: #ffffff;
				width: 100%;
				margin-bottom: 8px;
				padding: 10px 10px 0 10px;
			">
			<!-- 搜索工作栏 -->
			<search-bar
				v-if="activeName === '计划停机配置'"
				:formConfigs="formConfig"
				ref="searchBarForm"
				@headBtnClick="buttonClick" />

			<div v-else class="searchBarBox">
				<el-form
					:inline="true"
					ref="searchBarForm"
					:model="formInline"
					class="searchBar">
					<span class="blue-block"></span>
					<el-form-item label="产线/工段" prop="lineIds">
						<el-cascader size="small"
							v-model="formInline.lineIds"
							:options="options"
							:props="{
								value: 'id',
								label: 'name',
								checkStrictly: true,
								multiple: true,
								emitPath: false,
							}"></el-cascader>
					</el-form-item>
					<el-form-item label="时间范围" prop="times">
						<el-date-picker size="small"
							v-model="formInline.times"
							type="daterange"
							format="yyyy-MM-dd"
							value-format="yyyy-MM-dd HH:mm:ss"
							range-separator="-"
							start-placeholder="开始时间"
							end-placeholder="结束时间"></el-date-picker>
					</el-form-item>
					<el-form-item label="停机时长" prop="duration">
						<el-select size="small"
							v-model="durationJudge"
							@change="handleCompareChange"
							style="width: 100px; margin-right: 8px">
							<el-option label="大于" value="1"></el-option>
							<el-option label="大于等于" value="2"></el-option>
							<el-option label="小于" value="3"></el-option>
							<el-option label="小于等于" value="4"></el-option>
							<el-option label="等于" value="5"></el-option>
							<el-option label="介于" value="6"></el-option>
						</el-select>
						<el-input size="small"
							v-model.number="duration1"
							type="number"
							placeholder="输入整数"
							min="0"
							style="width: 100px; margin-right: 8px"
							@keydown="preventNonInteger"></el-input>
						<span v-if="durationJudge === '6'" style="margin-right: 8px">
							~
						</span>

						<el-input size="small"
							v-if="durationJudge === '6'"
							v-model.number="duration2"
							type="number"
							placeholder="输入整数"
							min="0"
							style="width: 100px; margin-right: 8px"
							@keydown="preventNonInteger"></el-input>
						<!-- 时间单位下拉 -->
						<el-select size="small" v-model="timeUnit" style="width: 100px">
							<el-option label="分钟" value="minute"></el-option>
							<el-option label="小时" value="hour"></el-option>
							<el-option label="天" value="day"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item>
						<el-button size="small" type="primary" @click="handleRecordSearch">
							查询
						</el-button>
						<el-button size="small" type="warning" @click="handleExport1">
							导出
						</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>

		<div
			class="app-container"
			v-if="activeName === '计划停机配置'"
			style="background: #ffffff">
			<!-- 表 -->
			<div>
				<base-table
					:page="1"
					:limit="100"
					:table-props="tableProps1"
					:table-data="list"
					:max-height="500">
					<method-btn
						v-if="tableBtn.length"
						slot="handleBtn"
						:width="90"
						label="操作"
						:method-list="tableBtn"
						@clickBtn="handleClick" />
				</base-table>
			</div>
		</div>
		<div
			class="app-container"
			v-else-if="activeName === '停机记录'"
			style="background: #ffffff">
			<!-- 表 -->
			<div>
				<base-table
					:page="1"
					:limit="100"
					:table-props="tableProps2"
					:table-data="list"
					:max-height="500"></base-table>
			</div>
		</div>
		<base-dialog
			:dialogTitle="addOrEditTitle"
			:dialogVisible="addOrUpdateVisible"
			@cancel="handleCancel"
			@confirm="handleConfirm"
			:before-close="handleCancel"
			width="40%">
			<add-or-update
				ref="addOrUpdate"
				@refreshDataList="successSubmit"></add-or-update>
		</base-dialog>
	</div>
</template>
<script>
import ButtonNav from '@/components/ButtonNav';
import { getProductionLinePage } from '@/api/core/base/productionLine';
import {
	planList,
	errorList,
	exportPlanList,
	exportErrorList,
} from '@/api/base/equipmentSectionShutdownLog';
import subDiv from './subDiv.vue';
import AddOrUpdate from './add-or-updata';
import basicPage from '@/mixins/basic-page';
import { getGroupPlanTree } from '@/api/group/Schedule';

const tableProps1 = [
	{
		prop: 'lineName',
		label: '产线名称',
	},
	{
		prop: 'timeVal',
		label: '停机起止时间',
		subcomponent: subDiv,
	},
	{
		prop: 'durationStr',
		label: '停机时长',
	},
	{
		prop: 'reason',
		label: '原因',
	},
];
const tableProps2 = [
	{
		prop: 'lineName',
		label: '产线名称',
	},
	{
		prop: 'sectionName',
		label: '工段名称',
	},
	{
		prop: 'timeVal',
		label: '停机起止时间',
		subcomponent: subDiv,
	},
	{
		prop: 'duration',
		label: '停机时长',
	},
];
export default {
	mixins: [basicPage],
	name: '',
	data() {
		return {
			urlOptions: {
				exportURL: exportPlanList,
			},
			formConfig: [
				{
					type: 'select',
					label: '产线',
					selectOptions: [],
					param: 'lineIds',
					collapseTags: true,
					multiple: true,
				},
				{
					type: 'datePicker',
					label: '时间范围',
					dateType: 'daterange',
					format: 'yyyy-MM-dd',
					valueFormat: 'yyyy-MM-dd HH:mm:ss',
					rangeSeparator: '-',
					startPlaceholder: '开始时间',
					endPlaceholder: '结束时间',
					param: 'timeVal',
				},
				{
					type: 'button',
					btnName: '查询',
					name: 'search',
					color: 'primary',
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '新增',
					name: 'add',
					color: 'success',
					plain: true,
				},
				{
					type: 'separate',
				},
				{
					type: 'button',
					btnName: '导出',
					name: 'export',
					color: 'warning',
				},
			],
			tableBtn: [
				{
					type: 'edit',
					btnName: '编辑',
				},
			].filter((v) => v),
			activeName: '计划停机配置',
			// 查询参数
			queryParams: {
				pageNo: 1,
				pageSize: 20,
				lineIds: null,
				times: null,
			},
			tableProps1,
			tableProps2,
			list: [],
			lineList: [],
			formInline: {
				lineIds: null,
				times: null,
				durationJudge: '1',
				duration: 0,
			},
			options: [], // 产线/工段选项
			// 停机时长筛选相关
			durationJudge: '1',
			duration1: 0,
			duration2: '',
			timeUnit: 'minute',
		};
	},
	components: { ButtonNav, AddOrUpdate },
	mounted() {
		this.$nextTick(() => {
			getProductionLinePage({
				page: 1,
				limit: 500,
			}).then((response) => {
				this.formConfig[0].selectOptions = response.data.list;
			});
			if (this.$refs.buttonNav) {
				this.$refs.buttonNav.currentMenu = '计划停机配置';
			}
			this.getDataList();
		});
	},
	methods: {
		currentMenu(val) {
			this.activeName = val;
			if (this.activeName == '计划停机配置') {
				this.urlOptions.exportURL = exportPlanList;
				this.getDataList();
			} else {
				this.urlOptions.exportURL = exportErrorList;
				getGroupPlanTree().then((res) => {
					this.options = res.data;
				});
				this.getErrorList();
			}
		},
		//计划停机配置list
		getDataList() {
			planList(this.queryParams).then((response) => {
				this.list = response.data;
			});
		},
		//停机记录list
		getErrorList() {
			errorList(this.formInline).then((response) => {
				this.list = response.data;
			});
		},
		// 查询
		buttonClick(val) {
			switch (val.btnName) {
				case 'search':
					this.queryParams.lineIds = val.lineIds;
					this.queryParams.type = val.type;
					this.queryParams.times = val.timeVal;
					this.getDataList();
					break;
				case 'add':
					this.addOrEditTitle = '新增';
					this.addOrUpdateVisible = true;
					this.addOrUpdateHandle();
					break;
				case 'export':
					this.handleExport();
					break;
				default:
					console.log(val);
			}
		},
		//tableBtn点击
		handleClick(val) {
			if (val.type === 'edit') {
				this.addOrUpdateVisible = true;
				this.addOrEditTitle = '编辑';
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(val.data.id);
				});
			}
		},
		handleCompareChange() {
			// 切换为非between时清空第二个输入框
			if (this.durationJudge !== '6') {
				this.duration2 = '';
			}
		},

		//  * 禁止输入非数字字符
		preventNonInteger(e) {
			// 允许数字、退格、删除、方向键
			const keyCode = e.keyCode;
			if (
				!(keyCode >= 48 && keyCode <= 57) && // 0-9
				!(keyCode >= 96 && keyCode <= 105) && // 小键盘0-9
				keyCode !== 8 && // Backspace
				keyCode !== 46 && // Delete
				!(keyCode >= 37 && keyCode <= 40) // 方向键
			) {
				e.preventDefault();
			}
		},
		handleRecordSearch() {
			this.formInline.durationJudge = this.durationJudge;
			// 构建停机时长筛选条件
			if (this.durationJudge === '6') {
				if (this.duration1 !== '' && this.duration2 !== '') {
					this.formInline.duration = undefined;
					// 转分钟
					let start = Number(this.duration1);
					let end = Number(this.duration2);
					if (this.timeUnit === 'hour') {
						start *= 60;
						end *= 60;
					} else if (this.timeUnit === 'day') {
						start *= 60 * 24;
						end *= 60 * 24;
					} //minute 则不处理
					this.formInline.betweenDurationStart = start;
					this.formInline.betweenDurationEnd = end;
				}
			} else {
				if (this.duration1 !== '') {
					let val = Number(this.duration1);
					if (this.timeUnit === 'hour') {
						val *= 60;
					} else if (this.timeUnit === 'day') {
						val *= 60 * 24;
					}
					this.formInline.duration = val;
				}
			}
			// 调用接口查询数据

			this.getErrorList();
		},
    handleExport1() {
      this.handleRecordSearch()
      // 处理查询参数
      let params = { ...this.formInline };
      params.pageNo = undefined;
      params.pageSize = undefined;
      this.$modal.confirm('是否确认导出所有数据项?').then(() => {
        this.exportLoading = true;
        return this.urlOptions.exportURL(params);
      }).then(response => {
        this.$download.excel(response, '报表.xls');
        this.exportLoading = false;
      }).catch(() => { });
    }
	},
};
</script>
<style scoped>
.searchBarBox {
	width: 100%;
	position: relative;
	margin-bottom: 8px;
}
.searchBarBox::after {
	content: '';
	display: block;
	clear: both;
}
.searchBar .blue-block {
	display: inline-block;
	width: 4px;
	height: 16px;
	background-color: #0b58ff;
	border-radius: 1px;
	margin-right: 8px;
	margin-top: 12px;
}
.searchBar .el-form-item {
	margin-bottom: 4px;
}
</style>
