
<template>
	<div class="layout-padding">
		<div class="layout-padding-auto layout-padding-view">
			<!-- 搜索表单 -->
			<el-form :model="queryForm" inline ref="searchFormRef">
				<el-form-item label="招生计划名称" prop="groupName">
					<el-input v-model="queryForm.groupName" placeholder="招生计划名称" />
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="Search" @click="getDataList">查询</el-button>
					<el-button icon="Refresh" class="ml10" @click="resetQuery">重置</el-button>
				</el-form-item>
			</el-form>

			<!-- 操作按钮 -->
			<div class="mb15">
				<el-button v-if="hasAuth('recruit_recruitstudentplangroup_add')" type="primary" icon="FolderAdd" @click="addOrUpdateHandle()">
					新 增
				</el-button>
				<el-button v-if="hasAuth('recruit_recruitexampeople_add')" type="primary" plain icon="UserFilled" class="ml10" @click="editExam">
					审核人员管理
				</el-button>
			</div>

			<!-- 表格 -->
			<el-table
				ref="tableRef"
				:data="state.dataList"
				v-loading="state.loading"
				border
				stripe
				row-key="id"
				:cell-style="tableStyle.cellStyle"
				:header-cell-style="tableStyle.headerCellStyle"
			>
				<el-table-column type="index" label="序号" width="60" align="center" />
				<el-table-column prop="groupName" label="招生计划名称" align="center" show-overflow-tooltip />
				<el-table-column prop="startDate" label="报名时间段" align="center" show-overflow-tooltip>
					<template #default="scope">
						<div class="date-cell">
							<el-icon class="date-icon"><Calendar /></el-icon>
							<span class="date-text">{{
								dateFormat(scope.row.startDate, 'YYYY-mm-dd') + ' 至 ' + dateFormat(scope.row.endDate, 'YYYY-mm-dd')
							}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="maintenanceStartDate" label="维护时间段" align="center" show-overflow-tooltip>
					<template #default="scope">
						<div class="date-cell">
							<el-icon class="date-icon"><Calendar /></el-icon>
							<span class="date-text">{{
								dateFormat(scope.row.maintenanceStartDate, 'YYYY-mm-dd') + ' 至 ' + dateFormat(scope.row.maintenanceEndDate, 'YYYY-mm-dd')
							}}</span>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="czSignStart" label="开启初中生报名" align="center" width="140">
					<template #default="scope">
						<el-switch
							v-model="scope.row.czSignStart"
							active-text="是"
							inactive-text="否"
							active-value="1"
							inactive-value="0"
							@change="changeSm(scope.row, 'czSignStart')"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="gzSignStart" label="开启高中生报名" align="center" width="140">
					<template #default="scope">
						<el-switch
							v-model="scope.row.gzSignStart"
							active-text="是"
							inactive-text="否"
							active-value="1"
							inactive-value="0"
							@change="changeSm(scope.row, 'gzSignStart')"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="jzxSignStart" label="开启技职校报名" align="center" width="140">
					<template #default="scope">
						<el-switch
							v-model="scope.row.jzxSignStart"
							active-text="是"
							inactive-text="否"
							active-value="1"
							inactive-value="0"
							@change="changeSm(scope.row, 'jzxSignStart')"
						/>
					</template>
				</el-table-column>
				<el-table-column prop="isPreStart" label="开启预登记" align="center" width="130">
					<template #default="scope">
						<el-switch
							v-model="scope.row.isPreStart"
							active-text="是"
							inactive-text="否"
							active-value="1"
							inactive-value="0"
							@change="changeSm(scope.row, 'isPreStart')"
						/>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="240" align="center" fixed="right">
					<template #default="scope">
						<el-button
							v-if="hasAuth('recruit_recruitstudentplangroup_edit')"
							type="primary"
							link
							icon="EditPen"
							@click="addOrUpdateHandle(scope.row.id)"
						>
							修改
						</el-button>
						<el-button v-if="hasAuth('recruit_recruitstudentplangroup_edit')" type="primary" link icon="Switch" @click="majorHandle(scope.row)">
							专业调整
						</el-button>
						<el-button v-if="hasAuth('recruit_recruitstudentplangroup_del')" type="danger" link icon="Delete" @click="deleteHandle(scope.row.id)">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<!-- 分页 -->
			<pagination v-bind="state.pagination" @current-change="currentChangeHandle" @size-change="sizeChangeHandle" />

			<!-- 弹窗, 新增 / 修改 -->
			<table-form ref="addOrUpdateRef" @refreshDataList="getDataList" />
			<major-group-by-dept-form ref="majorGroupByDeptRef" />
			<exam-people-index v-if="exitExamVisible" ref="examPeopleIndexRef" />
		</div>

		<!-- 预登记二维码弹窗 -->
		<el-dialog v-model="dialogFormVisible" title="预登记二维码" width="10%" height="50%" @close="dialogFormVisible = false">
			<!--      <vue-qr :text="payQrcode" :size="200"></vue-qr>-->
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="recruitstudentplangroup">
import { ref, reactive, onMounted, nextTick, defineAsyncComponent, watch } from 'vue';
import { useAuth } from '/@/hooks/auth';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { useMessage, useMessageBox } from '/@/hooks/message';
import { delObj, fetchList, putObj, editQuickField } from '/@/api/recruit/recruitstudentplangroup';
import { formatDate } from '/@/utils/formatTime';
import { Calendar } from '@element-plus/icons-vue';
// import vueQr from 'vue-qr'

const TableForm = defineAsyncComponent(() => import('./enrolplantemplate-form.vue'));
const MajorGroupByDeptForm = defineAsyncComponent(() => import('@/views/recruit/recruitplanmajor/majorGroupByDept.vue'));
const ExamPeopleIndex = defineAsyncComponent(() => import('@/views/recruit/recruitexampeople/index.vue'));
const { hasAuth } = useAuth();
// 消息提示 hooks
const message = useMessage();
const messageBox = useMessageBox();

// 表格引用
const tableRef = ref();
const searchFormRef = ref();
const addOrUpdateRef = ref();
const majorGroupByDeptRef = ref();
const examPeopleIndexRef = ref();

// 弹窗状态
const exitExamVisible = ref(false);
const dialogFormVisible = ref(false);

// 数据
const payQrcode = ref('');

// 查询表单
const queryForm = reactive({
	groupName: '',
});

// 日期格式化
const dateFormat = (date: string | null | undefined, format: string) => {
	if (!date) return '-';
	try {
		return formatDate(new Date(date), format);
	} catch (error) {
		return date;
	}
};

// 表格状态
const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: queryForm,
	pageList: async (params: any) => {
		const response = await fetchList(params);
		return {
			data: {
				records: response.data.records,
				total: response.data.total,
			},
		};
	},
});

// 使用 table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, tableStyle } = useTable(state);

// 初始化（如果需要初始化逻辑可以在这里添加）
const init = async () => {
	// 初始化逻辑
};

// 修改开关
const changeSm = async (row: any, type: any) => {
	try {
		let params = {} as any;
		params.id = row.id;
		if (type == 'czSignStart') {
			params['czSignStart'] = row.czSignStart;
		}
		if (type == 'gzSignStart') {
			params['gzSignStart'] = row.gzSignStart;
		}
		if (type == 'jzxSignStart') {
      params['jzxSignStart'] = row.jzxSignStart;
    }
    if (type == 'isPreStart') {
      params['isPreStart'] = row.isPreStart;
    }
		await editQuickField(params);
		message.success('修改成功');
	} catch (error: any) {
		message.error(error.msg || '修改失败');
	}
};

// 新增 / 修改
const addOrUpdateHandle = (id: string | null = null) => {
	nextTick(() => {
		addOrUpdateRef.value?.init(id);
	});
};

// 编辑审核人员
const editExam = () => {
	exitExamVisible.value = true;
	// 如果组件已经加载，立即初始化
	if (examPeopleIndexRef.value && typeof examPeopleIndexRef.value.init === 'function') {
		nextTick(() => {
			try {
				examPeopleIndexRef.value.init();
			} catch (error: any) {
				message.error('初始化审核人员弹窗失败：' + (error.message || '未知错误'));
				exitExamVisible.value = false;
			}
		});
	}
	// 否则等待 watch 监听器处理
};

// 监听组件引用变化，当组件加载完成后自动初始化
watch(
	examPeopleIndexRef,
	(newVal) => {
		if (newVal && exitExamVisible.value) {
			nextTick(() => {
				if (newVal && typeof newVal.init === 'function') {
					try {
						newVal.init();
					} catch (error: any) {
						message.error('初始化审核人员弹窗失败：' + (error.message || '未知错误'));
						exitExamVisible.value = false;
					}
				}
			});
		}
	},
	{ immediate: true }
);

// 专业调整
const majorHandle = (row: any) => {
	if (!row || !row.id) {
		message.warning('请选择有效的招生计划');
		return;
	}

	nextTick(() => {
		majorGroupByDeptRef.value?.init(row);
	});
};

// 删除
const deleteHandle = async (id: string) => {
	try {
		await messageBox.confirm('是否确认删除本条数据？请谨慎操作');
		await delObj(id);
		message.success('删除成功');
		getDataList();
	} catch {
		// 用户取消
	}
};

// 重置查询
const resetQuery = () => {
	searchFormRef.value?.resetFields();
	queryForm.groupName = '';
	getDataList();
};

// 表格数据由 useTable（createdIsNeed 默认 true）自动请求，onMounted 仅执行 init
onMounted(() => {
	init();
});
</script>

<style lang="scss" scoped>
/* 时间段图标和文字垂直对齐 */
.date-cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.date-icon {
	flex-shrink: 0;
	color: #909399;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

.date-text {
	line-height: 1.5;
	display: inline-block;
	vertical-align: middle;
}

/* 开启报名开关文字颜色 */
</style>
