<template>
    <div class="app-container monthly-plan-edit">
        <!-- 顶部返回 + 标题 -->
        <el-page-header @back="onBack" :content="pageTitle" class="page-header" />

        <el-card shadow="never" class="card-section">
            <template #header>
                <div class="card-header">基本信息</div>
            </template>

            <el-form
                ref="formRef"
                :model="formData"
                :rules="!isDetail ? rules : {}"
                size="large"
                label-width="auto"
                :disabled="isDetail"
                :validate-on-rule-change="false"
            >
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="运检站">
                            <el-input v-model="formData.inspectionStationName" disabled />
                        </el-form-item>
                    </el-col>

                    <el-col :span="12">
                        <el-form-item label="专业" prop="planMajorId">
                            <el-select
                                v-model="formData.planMajorId"
                                placeholder="请选择专业"
                                clearable
                            >
                                <el-option
                                    :key="item.planMajorId"
                                    :label="item.planMajorName"
                                    :value="item.planMajorId"
                                    v-for="item in majorTypeCategoryOptions"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="业务类型" prop="businessTypeId">
                            <el-select
                                v-model="formData.businessTypeId"
                                placeholder="请选择业务类型"
                                clearable
                            >
                                <el-option
                                    v-for="item in planBusinessTypeOptions"
                                    :key="item.planMajorId"
                                    :label="item.planMajorName"
                                    :value="item.planMajorId"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="项目名称">
                            <el-input
                                clearable
                                disabled
                                placeholder="请输入项目名称"
                                v-model.trim="formData.projectName"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="工作任务">
                            <el-input
                                disabled
                                maxlength="500"
                                show-word-limit
                                type="textarea"
                                placeholder="请输入作业内容"
                                v-model.trim="formData.workContent"
                                :autosize="{ minRows: 4, maxRows: 12 }"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="类别" prop="planCategoryId">
                            <el-select
                                placeholder="请选择类别"
                                v-model="formData.planCategoryId"
                                clearable
                            >
                                <el-option
                                    :key="item.planMajorId"
                                    :value="item.planMajorId"
                                    :label="item.planMajorName"
                                    v-for="item in planCategoryOptions"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <template v-for="(item, index) in formData.workloadList" :key="index">
                        <el-col :span="8">
                            <el-form-item
                                :prop="`workloadList.${index}.workloadCategoryId`"
                                :class="{ 'hide-required': index !== 0 }"
                            >
                                <template #label>
                                    <span v-if="index == 0">工作量</span>
                                    <span v-else style="visibility: hidden">工作量</span>
                                </template>
                                <el-select
                                    clearable
                                    placeholder="请选择工作量类别"
                                    v-model="item.workloadCategoryId"
                                    @change="onChangeWorkLoadCategory($event, index)"
                                >
                                    <el-option
                                        :key="item.workloadCategoryId"
                                        :value="item.workloadCategoryId"
                                        :label="item.workloadCategoryName"
                                        v-for="item in planWorkLoadCategoryOptions"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item
                                label-width="0"
                                :prop="`workloadList.${index}.workloadNum`"
                            >
                                <el-input
                                    clearable
                                    style="width: 240px"
                                    placeholder="输入数量"
                                    show-word-limit
                                    maxlength="7"
                                    v-model="item.workloadNum"
                                >
                                    <template #suffix>
                                        <el-button
                                            type="success"
                                            icon="Plus"
                                            size="small"
                                            v-if="index === 0 && !isDetail"
                                            @click="onAddWorkLoad"
                                        />
                                        <el-button
                                            type="danger"
                                            icon="Delete"
                                            size="small"
                                            v-if="index !== 0 && !isDetail"
                                            @click="onDeleteWorkLoad(index)"
                                        />
                                    </template>
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </template>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label=" 塔基数" prop="towerBaseNumber">
                            <el-input
                                clearable
                                show-word-limit
                                maxlength="7"
                                placeholder="请输入 塔基数"
                                v-model.trim="formData.towerBaseNumber"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="计划开始时间">
                            <el-date-picker
                                v-model="formData.plannedStartTime"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择计划开始时间"
                                style="width: 100%"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计划结束时间">
                            <el-date-picker
                                v-model="formData.plannedEndTime"
                                type="date"
                                value-format="YYYY-MM-DD"
                                placeholder="请选择计划结束时间"
                                style="width: 100%"
                                disabled
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item prop="planPersonnelList">
                            <template #label>
                                <div style="display: flex; flex-direction: column">
                                    <span>计划投入管理人员</span>
                                    <span
                                        style="
                                            font-size: 12px;
                                            color: #999;
                                            transform: translateY(-20px);
                                        "
                                    >
                                        (职工，劳务派遣，海峡)
                                    </span>
                                </div>
                            </template>
                            <el-input
                                readonly
                                placeholder="点击选择管理人员"
                                @click="onOpenPersonPicker"
                                v-model="selectedManagerNames"
                            >
                                <template #suffix v-if="!isDetail">
                                    <el-icon
                                        class="clickable-suffix"
                                        @click.stop="onOpenPersonPicker"
                                    >
                                        <Search />
                                    </el-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="计划投入管理车辆数" prop="planCarNum">
                            <el-input
                                clearable
                                maxlength="7"
                                show-word-limit
                                placeholder="请输入车辆数量"
                                v-model.trim="formData.planCarNum"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="7">
                        <el-form-item prop="planSkilledWorkerNum">
                            <template #label>
                                <div style="display: flex; flex-direction: column">
                                    <span>计划投入熟练工人员数量</span>
                                    <span
                                        style="
                                            font-size: 12px;
                                            color: #999;
                                            transform: translateY(-20px);
                                        "
                                    >
                                        (分包)
                                    </span>
                                </div>
                            </template>
                            <el-input
                                maxlength="7"
                                show-word-limit
                                placeholder="熟练工人员数量"
                                v-model.trim="formData.planSkilledWorkerNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item
                            label="计划投入工日"
                            prop="planSkilledWorkerDay"
                            label-width="120"
                        >
                            <el-input
                                clearable
                                maxlength="7"
                                placeholder="工日"
                                v-model.trim="formData.planSkilledWorkerDay"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item prop="planAuxiliaryWorkerNum">
                            <template #label>
                                <div style="display: flex; flex-direction: column">
                                    <span>计划投入辅助工人员数量</span>
                                    <span
                                        style="
                                            font-size: 12px;
                                            color: #999;
                                            transform: translateY(-20px);
                                        "
                                    >
                                        (分包)
                                    </span>
                                </div>
                            </template>
                            <el-input
                                clearable
                                maxlength="7"
                                show-word-limit
                                placeholder="辅助工人员数量"
                                v-model.trim="formData.planAuxiliaryWorkerNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item
                            label="计划投入工日"
                            prop="planAuxiliaryWorkerDay"
                            label-width="120"
                        >
                            <el-input
                                clearable
                                maxlength="7"
                                show-word-limit
                                placeholder="工日"
                                v-model.trim="formData.planAuxiliaryWorkerDay"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="计划投入分包车辆数" prop="planSubCarNum">
                            <el-input
                                clearable
                                maxlength="7"
                                show-word-limit
                                placeholder="请输入分包车辆数量"
                                v-model.trim="formData.planSubCarNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实际工作天数">
                            <el-input
                                clearable
                                maxlength="7"
                                show-word-limit
                                placeholder="请输入实际工作天数"
                                v-model.trim="formData.actualWorkingDay"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>

        <!-- 人员排班区域 -->
        <el-card shadow="never" class="card-section">
            <template #header>
                <div class="card-header">人员排班</div>
            </template>
            <div class="schedule-wrapper">
                <div class="schedule-tip" v-if="!isDetail">
                    <span class="schedule-tip-extra">
                        仅在“计划开始时间 ~
                        计划结束时间”范围内可排班；表单中的“计划投入管理人员”只是模板，不会被日历上的增删影响。
                    </span>
                </div>
                <div class="schedule-grid">
                    <div
                        v-for="day in calendarDays"
                        :key="day.date"
                        class="schedule-cell"
                        :class="{ 'is-disabled': !day.isInRange }"
                    >
                        <div class="cell-date">{{ day.label }}</div>
                        <div class="cell-persons">
                            <template v-if="day.managers && day.managers.length">
                                <el-popover
                                    v-if="day.managers.length > maxShowInCell"
                                    placement="top"
                                    trigger="hover"
                                    :width="'auto'"
                                    popper-class="person-popover"
                                >
                                    <template #reference>
                                        <div class="person-tags">
                                            <el-tag
                                                size="small"
                                                v-for="person in day.managers.slice(
                                                    0,
                                                    maxShowInCell,
                                                )"
                                                :key="person.id"
                                                closable
                                                @close.stop="
                                                    onRemovePersonFromDay(day.date, person)
                                                "
                                            >
                                                {{ person.name }}
                                            </el-tag>
                                            <span class="more-text">
                                                +{{ day.managers.length - maxShowInCell }}
                                            </span>
                                        </div>
                                    </template>
                                    <div class="popover-list">
                                        <el-tag
                                            size="small"
                                            :key="person.id"
                                            :closable="!isDetail"
                                            v-for="person in day.managers"
                                            @close.stop="onRemovePersonFromDay(day.date, person)"
                                            class="popover-tag"
                                        >
                                            {{ person.name }}
                                        </el-tag>
                                    </div>
                                </el-popover>
                                <template v-else>
                                    <div class="person-tags">
                                        <el-tag
                                            size="small"
                                            :key="person.id"
                                            :closable="!isDetail"
                                            v-for="person in day.managers"
                                            @close.stop="onRemovePersonFromDay(day.date, person)"
                                        >
                                            {{ person.name }}
                                        </el-tag>
                                    </div>
                                </template>
                            </template>
                            <span
                                v-else
                                class="empty-tip-small"
                                :class="{ 'is-disabled-text': !day.isInRange }"
                            >
                                {{ day.isInRange ? '未安排人员' : '不可排班' }}
                            </span>
                        </div>
                        <div class="cell-actions" v-if="!isDetail">
                            <el-button
                                type="primary"
                                size="small"
                                plain
                                :disabled="!day.isInRange || !formData.planPersonnelList.length"
                                @click="onFillManagersForDay(day.date)"
                            >
                                安排人员
                            </el-button>
                            <el-button
                                type="danger"
                                size="small"
                                plain
                                :disabled="!day.isInRange || !day.managers.length"
                                @click="onClearManagersForDay(day.date)"
                            >
                                清除
                            </el-button>
                        </div>
                    </div>
                </div>
            </div>
        </el-card>

        <!-- 底部操作按钮（详情模式下隐藏） -->
        <div class="page-footer">
            <ComButton plain type="info" @click="onBack">
                {{ isDetail ? '返回' : '取消' }}
            </ComButton>
            <ComButton v-if="!isDetail" type="primary" @click="onSubmit">保存</ComButton>
        </div>

        <!-- 人员选择弹窗（使用封装的 ComDialog） -->
        <ComDialog :dialog-config="managerDialogConfig" @closeDialogOuter="onCloseDialogOuter">
            <template #outerContent>
                <el-row :gutter="20" style="padding-bottom: 30px">
                    <el-col :span="16">
                        <div class="person-search-bar">
                            <el-input
                                clearable
                                prefix-icon="Search"
                                placeholder="输入姓名搜索"
                                v-model.trim="managerDialog.keyword"
                            />
                        </div>
                        <el-table
                            border
                            ref="personTableRef"
                            :data="filteredPersons"
                            @selection-change="onManagerSelectionChange"
                        >
                            <el-table-column type="selection" width="50" align="center" />
                            <el-table-column
                                show-overflow-tooltip
                                prop="org"
                                label="人员所属单位"
                                align="center"
                            />
                            <el-table-column
                                show-overflow-tooltip
                                prop="name"
                                label="姓名"
                                width="120"
                                align="center"
                            />
                            <el-table-column
                                show-overflow-tooltip
                                prop="gender"
                                label="性别"
                                align="center"
                            />
                            <el-table-column
                                show-overflow-tooltip
                                prop="station"
                                label="岗位"
                                align="center"
                            />
                            <el-table-column
                                show-overflow-tooltip
                                prop="position"
                                label="岗位性质"
                                align="center"
                            />
                            <el-table-column
                                show-overflow-tooltip
                                prop="type"
                                label="人员分类"
                                align="center"
                            />
                        </el-table>
                    </el-col>
                    <el-col :span="8">
                        <div class="selected-panel">
                            <div class="panel-header">
                                <span>已选人员</span>
                                <el-button type="text" @click="onClearManagers">清空</el-button>
                            </div>
                            <div class="selected-list">
                                <div>
                                    <el-tag
                                        :key="item.id"
                                        :closable="!isDetail"
                                        class="selected-tag"
                                        @close="onRemoveManager(item)"
                                        v-for="item in managerDialog.selected"
                                    >
                                        {{ item.name }}
                                    </el-tag>
                                </div>

                                <div v-if="!managerDialog.selected.length" class="empty-tip">
                                    暂未选择人员
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row class="common-btn-row fixed-bottom">
                    <ComButton plain type="info" @click="managerDialog.visible = false">
                        取消
                    </ComButton>
                    <ComButton type="primary" @click="onConfirmManager">确定</ComButton>
                </el-row>
            </template>
        </ComDialog>
    </div>
</template>

<script setup name="MonthlyPlanEdit">
import { ref, reactive, computed, getCurrentInstance, nextTick, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { updatePlanAPI } from '@/api/planMange/plan.js'
import {
    getPersonnelCommonListAPI,
    getMajorTypeCategorySelectAPI,
    getPlanMajorListSelectAPI,
} from '@/api/common.js'
import { updateMonthlyPlanAPI, getMonthlyPlanDetailAPI } from '@/api/planMange/monthlyPlan.js'
import { Search } from '@element-plus/icons-vue'
import { useOptions } from '@/hooks/useOptions'
import ComButton from '@/components/ComButton/index.vue'
import ComDialog from '@/components/ComDialog/index.vue'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()
const workLoadCategoryOptions = ref([
    { label: '管理', value: 1 },
    { label: '熟练工', value: 2 },
    { label: '辅助工', value: 3 },
])

// 使用通用 Hook 获取下拉数据（带缓存和自动刷新）
const { options: personnelCommonOptions } = useOptions(
    'personnelCommonOptions',
    getPersonnelCommonListAPI,
    {},
)

// 专业
const { options: majorTypeCategoryOptions } = useOptions(
    'majorTypeCategoryOptions',
    getMajorTypeCategorySelectAPI,
    {
        category: 0,
    },
)
// 业务类型
const { options: planBusinessTypeOptions } = useOptions(
    'planBusinessTypeOptions',
    getMajorTypeCategorySelectAPI,
    {
        category: 1,
    },
)
// 类别
const { options: planCategoryOptions } = useOptions(
    'planCategoryOptions',
    getMajorTypeCategorySelectAPI,
    {
        category: 2,
    },
)

// 工作量类别
const { options: planWorkLoadCategoryOptions } = useOptions(
    'planWorkLoadCategoryOptions',
    getPlanMajorListSelectAPI,
    {},
)

const mode = computed(() => route.query.mode || 'add')
const isDetail = computed(() => mode.value === 'detail')

const pageTitle = computed(() => {
    if (mode.value === 'edit') return '编辑月计划'
    if (mode.value === 'detail') return '月计划详情'
    return '新增月计划'
})

const formRef = ref(null)

// 从路由参数获取禁用字段
const routeParams = computed(() => ({
    inspectionStationName: route.query.inspectionStationName || '',
    projectName: route.query.projectName || '',
    workContent: route.query.workContent || '',
    plannedStartTime: route.query.plannedStartTime || '',
    plannedEndTime: route.query.plannedEndTime || '',
    monthlyPlanId: route.query.monthlyPlanId || null,
}))

const getInitFormData = () => ({
    monthlyPlanId: routeParams.value.monthlyPlanId,
    // 从路由参数获取的字段（禁用，不传给后端）
    inspectionStationName: routeParams.value.inspectionStationName,
    projectName: routeParams.value.projectName,
    workContent: routeParams.value.workContent,
    plannedStartTime: routeParams.value.plannedStartTime,
    plannedEndTime: routeParams.value.plannedEndTime,
    // 表单字段（需要传给后端）
    businessTypeId: null, // 业务类型
    planCategoryId: null, // 类别
    towerBaseNumber: '', //  塔基数
    planPersonnelList: [], // 计划投入管理人员（数组）
    planPersonnel: [], // 计划投入管理人员（数组）
    planCarNum: '', // 计划投入管理人员车辆数
    planSkilledWorkerNum: '', // 计划投入熟练工人员数量
    planAuxiliaryWorkerNum: '', // 计划投入辅助工人员数量
    planAuxiliaryWorkerDay: '', // 计划投入辅助工人员工日
    planSkilledWorkerDay: '', // 计划投入熟练工人员工日
    planSubCarNum: '', // 计划投入分包车辆数
    actualWorkingDay: '', // 实际工作天数

    workloadList: [
        {
            workloadCategoryId: '', // 工作量类别id
            workloadCategoryName: '', // 工作量类别名称
            unitPrice: '', // 单价
            workloadNum: '', // 工作量
            settlementUnitPrice: '', // 结算单价
        },
    ],
    personnelArrangementList: [], // 人员排班模板 [{day: '', personnelNames: ''}]
})

const formData = ref(getInitFormData())

// 动态生成 rules，为 workloadList 的每一项生成校验规则
const rules = computed(() => {
    const baseRules = {
        planMajorId: [{ required: true, message: '请选择专业', trigger: 'blur' }],
        businessTypeId: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
        riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
        planCategoryId: [{ required: true, message: '请选择类别', trigger: 'change' }],
        towerBaseNumber: [
            { required: true, message: '请输入 塔基数', trigger: 'blur' },
            { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
        ],
        planPersonnelList: [{ required: true, message: '请选择计划投入管理人员', trigger: 'blur' }],
    }

    // 为 workloadList 的每一项生成对应的校验规则
    // 当 workloadList 长度变化时，会自动重新计算，为每一项生成独立的校验规则
    baseRules.workloadList = formData.value.workloadList.map(() => ({
        workloadCategoryId: [{ required: true, message: '请选择工作量类别', trigger: 'change' }],
        workloadNum: [
            { required: true, message: '请输入工作量', trigger: 'blur' },
            { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
        ],
    }))

    // 添加其他字段的规则
    baseRules.planCarNum = [
        { required: true, message: '请输入管理人员车辆数', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.planSkilledWorkerNum = [
        { required: true, message: '请输入熟练工人员数量', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.planAuxiliaryWorkerNum = [
        { required: true, message: '请输入辅助工人员数量', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.planSkilledWorkerDay = [
        { required: true, message: '请输入工日', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.planAuxiliaryWorkerDay = [
        { required: true, message: '请输入工日', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.planSubCarNum = [
        { required: true, message: '请输入分包车辆数', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]
    baseRules.actualWorkingDay = [
        { required: true, message: '请输入实际工作天数', trigger: 'blur' },
        { pattern: /^[1-9]\d*$/, message: '请输入正整数', trigger: 'blur' },
    ]

    return baseRules
})

const onBack = () => {
    // 关闭当前标签页并跳转到月计划填报页面
    proxy.$tab.closeOpenPage({
        path: '/plan/monthlyPlan',
    })
}

const onSubmit = async () => {
    try {
        await formRef.value.validate(async (valid, fields) => {
            if (!valid) {
                // 表单校验未通过时，自动滚动到第一个报错字段
                if (fields && Object.keys(fields).length) {
                    const firstProp = Object.keys(fields)[0]
                    formRef.value.scrollToField(firstProp)
                }
                return
            }

            // 组装参数：排除从路由参数获取的禁用字段
            const {
                inspectionStationName,
                projectName,
                workContent,
                plannedStartTime,
                plannedEndTime,
                planPersonnelList,
                ...submitData
            } = formData.value

            // 将人员排班数据转换为 personnelArrangementList 格式

            submitData.personnelArrangementList = Object.keys(dayAssignments.value).map((date) => {
                const managers = dayAssignments.value[date] || []
                return {
                    day: date,
                    personnelNames: managers.map((p) => p.name).join(','),
                }
            })

            submitData.planPersonnel = planPersonnelList.map((item) => item.id).join(',')
            console.log('submitData组装后的参数', submitData)

            const result = await updateMonthlyPlanAPI(submitData)
            if (result.code === 200) {
                proxy.$modal.msgSuccess('编辑成功')
                onBack()
            }
            console.log('result--', result)
        })
    } catch (error) {
        return Promise.reject(error)
    }
}

const onAddWorkLoad = () => {
    formData.value.workloadList.push({
        workloadCategoryId: '',
        workloadCategoryName: '',
        unitPrice: '',
        workloadNum: '',
        settlementUnitPrice: '',
    })
}

const onDeleteWorkLoad = (index) => {
    formData.value.workloadList.splice(index, 1)
    // 清除被删除项的校验状态
    nextTick(() => {
        // 由于数组索引变化，清除所有工作量项的校验状态
        formData.value.workloadList.forEach((item, idx) => {
            formRef.value?.clearValidate([
                `workloadList.${idx}.workloadCategoryId`,
                `workloadList.${idx}.workloadNum`,
            ])
        })
    })
}

// 人员选择弹窗相关
const personTableRef = ref(null)
const managerDialogConfig = reactive({
    outerVisible: false,
    outerTitle: '选择人员',
    outerWidth: '70%',
    minHeight: '60vh',
    maxHeight: '80vh',
})

const managerDialog = reactive({
    visible: false,
    keyword: '',
    selected: [],
})

// 将公共人员列表转换为表格展示需要的字段结构
const personList = computed(() => {
    return (personnelCommonOptions.value || []).map((item) => ({
        ...item,
        org: item.inspectionStationName, // 人员所属单位
        gender: item.sex === '1' ? '男' : '女',
        station: item.positionName, // 岗位
        position: item.personnelNatureName, // 岗位性质
        type: item.personnelClassificationName, // 人员分类
    }))
})

const filteredPersons = computed(() => {
    const list = personList.value
    if (!managerDialog.keyword) return list
    const keyword = managerDialog.keyword.toLowerCase()
    return list.filter((item) => {
        const name = (item.name || '').toLowerCase()
        const org = (item.org || '').toLowerCase()
        const station = (item.station || '').toLowerCase()
        return name.includes(keyword) || org.includes(keyword) || station.includes(keyword)
    })
})

const selectedManagerNames = computed(() =>
    formData.value.planPersonnelList.map((item) => item.name).join('、'),
)

// 同步表格选中状态：根据 managerDialog.selected 设置表格的选中状态
const syncTableSelection = () => {
    if (!personTableRef.value || !managerDialog.visible) return
    nextTick(() => {
        // 清空当前表格选中状态
        personTableRef.value.clearSelection()
        // 根据 managerDialog.selected 重新设置选中状态
        const selectedIds = new Set(managerDialog.selected.map((item) => item.id))
        filteredPersons.value.forEach((row) => {
            if (selectedIds.has(row.id)) {
                personTableRef.value.toggleRowSelection(row, true)
            }
        })
    })
}

// 监听 filteredPersons 变化，重新同步表格选中状态
watch(
    () => filteredPersons.value,
    () => {
        if (managerDialog.visible) {
            syncTableSelection()
        }
    },
)

const onOpenPersonPicker = async () => {
    managerDialog.visible = true
    managerDialogConfig.outerVisible = true
    managerDialog.selected = [...formData.value.planPersonnelList]
    await nextTick()
    syncTableSelection()
}

const onManagerSelectionChange = (rows) => {
    // 获取当前过滤结果中所有行的 ID
    const currentFilteredIds = new Set(filteredPersons.value.map((row) => row.id))

    // 保留不在当前过滤结果中的已选人员（这些人员被过滤掉了，但仍然是已选状态）
    const keptSelected = managerDialog.selected.filter(
        (person) => !currentFilteredIds.has(person.id),
    )

    // 获取当前过滤结果中选中的人员对象
    const selectedInFiltered = rows

    // 合并：保留被过滤掉的已选人员 + 当前过滤结果中的选中人员
    managerDialog.selected = [...keptSelected, ...selectedInFiltered]
}

const onRemoveManager = (item) => {
    managerDialog.selected = managerDialog.selected.filter((row) => row.id !== item.id)
    if (personTableRef.value) {
        const target = personList.value.find((row) => row.id === item.id)
        if (target) personTableRef.value.toggleRowSelection(target, false)
    }
}

const onClearManagers = () => {
    managerDialog.selected = []
    if (personTableRef.value) personTableRef.value.clearSelection()
}

const onConfirmManager = () => {
    formData.value.planPersonnelList = [...managerDialog.selected]
    managerDialog.visible = false
    managerDialogConfig.outerVisible = false
}

// 关闭弹框统一处理
const onCloseDialogOuter = (visible) => {
    managerDialogConfig.outerVisible = visible
}

// 人员排班：按月份生成日期表（自动补全整个月份）
const dayAssignments = ref({}) // { '2025-01-01': [person, ...] }
const maxShowInCell = 5

const calendarDays = computed(() => {
    const start = formData.value.plannedStartTime
    const end = formData.value.plannedEndTime
    if (!start || !end) return []

    // 假设后端不会传跨月区间，这里只按开始时间所在月份补全整月
    const [yearStr, monthStr] = start.split('-')
    const year = Number(yearStr)
    const month = Number(monthStr)
    if (!year || !month) return []

    const daysInMonth = new Date(year, month, 0).getDate()
    const pad = (n) => (n < 10 ? `0${n}` : `${n}`)

    const list = []
    for (let d = 1; d <= daysInMonth; d++) {
        const date = `${year}-${pad(month)}-${pad(d)}`
        const label = `${month}月${pad(d)}日`
        const isInRange = date >= start && date <= end
        list.push({
            date,
            label,
            isInRange,
            managers: dayAssignments.value[date] || [],
        })
    }
    return list
})

// 将计划投入管理人员模板填充到某一天
const onFillManagersForDay = (date) => {
    if (!formData.value.planPersonnelList || !formData.value.planPersonnelList.length) return
    dayAssignments.value[date] = formData.value.planPersonnelList.map((p) => ({ ...p }))
}

// 清除某一天的人员
const onClearManagersForDay = (date) => {
    if (dayAssignments.value[date]) {
        dayAssignments.value[date] = []
    }
}

// 从某一天删除单个人员，不影响表单里的模板
const onRemovePersonFromDay = (date, person) => {
    const list = dayAssignments.value[date] || []
    dayAssignments.value[date] = list.filter((item) => item.id !== person.id)
}

// 工作量类别变化
const onChangeWorkLoadCategory = (event, index) => {
    const workloadCategoryId = event
    const workloadCategory = planWorkLoadCategoryOptions.value.find(
        (item) => item.workloadCategoryId === workloadCategoryId,
    )
    if (workloadCategory) {
        formData.value.workloadList[index].unitPrice = workloadCategory.unitPrice
        formData.value.workloadList[index].settlementUnitPrice =
            workloadCategory.settlementUnitPrice
        formData.value.workloadList[index].workloadCategoryName =
            workloadCategory.workloadCategoryName
    }

    // 手动触发该字段的校验，确保校验规则正确执行
    nextTick(() => {
        formRef.value?.validateField(`workloadList.${index}.workloadCategoryId`)
    })
}

// 获取详情
const getDetail = async () => {
    const result = await getMonthlyPlanDetailAPI({ monthlyPlanId: route.query.monthlyPlanId })

    if (result.code === 200 && result.data) {
        const data = result.data

        // 1. 基本字段直接赋值
        formData.value.monthlyPlanId = data.monthlyPlanId
        formData.value.planMajorId = data.planMajorId
        formData.value.businessTypeId = data.businessTypeId
        formData.value.planCategoryId = data.planCategoryId
        formData.value.towerBaseNumber = data.towerBaseNumber || ''
        formData.value.planCarNum = data.planCarNum || ''
        formData.value.planSkilledWorkerNum = data.planSkilledWorkerNum || ''
        formData.value.planAuxiliaryWorkerNum = data.planAuxiliaryWorkerNum || ''
        formData.value.planAuxiliaryWorkerDay = data.planAuxiliaryWorkerDay || ''
        formData.value.planSkilledWorkerDay = data.planSkilledWorkerDay || ''
        formData.value.planSubCarNum = data.planSubCarNum || ''
        formData.value.actualWorkingDay = data.actualWorkingDay || ''
        formData.value.riskLevel = data.riskLevel

        // 2. 从后端返回的数据更新路由参数字段（如果后端返回了这些字段）
        if (data.inspectionStationName) {
            formData.value.inspectionStationName = data.inspectionStationName
        }
        if (data.projectName) {
            formData.value.projectName = data.projectName
        }
        if (data.workContent) {
            formData.value.workContent = data.workContent
        }
        if (data.plannedStartTime) {
            formData.value.plannedStartTime = data.plannedStartTime
        }
        if (data.plannedEndTime) {
            formData.value.plannedEndTime = data.plannedEndTime
        }

        // 3. 处理计划投入管理人员：将 planPersonnel 字符串 "1,5,6" 转换为 planPersonnelList 数组
        if (data.planPersonnel && data.personneltList && data.personneltList.length > 0) {
            const personnelIds = data.planPersonnel.split(',').map((id) => String(id.trim()))
            formData.value.planPersonnelList = data.personneltList.filter((person) =>
                personnelIds.includes(String(person.id)),
            )
        } else {
            formData.value.planPersonnelList = []
        }

        // 4. 处理工作量列表
        if (data.workloadList && data.workloadList.length > 0) {
            formData.value.workloadList = data.workloadList.map((item) => ({
                workloadCategoryId: item.workloadCategoryId || '',
                workloadCategoryName: item.workloadCategoryName || '',
                unitPrice: item.unitPrice || '',
                settlementUnitPrice: item.settlementUnitPrice || '',
                workloadNum: item.workloadNum || '',
            }))
        } else {
            // 如果没有数据，保持默认的一个空项
            formData.value.workloadList = [
                {
                    workloadCategoryId: '',
                    workloadCategoryName: '',
                    unitPrice: '',
                    settlementUnitPrice: '',
                    workloadNum: '',
                },
            ]
        }

        // 5. 处理人员排班：将 personnelArrangementList 转换为 dayAssignments 对象
        dayAssignments.value = {}
        if (
            data.personnelArrangementList &&
            data.personnelArrangementList.length > 0 &&
            data.personneltList
        ) {
            data.personnelArrangementList.forEach((arrangement) => {
                const day = arrangement.day
                if (day && arrangement.personnelNames) {
                    // 将人员名称字符串转换为人员对象数组
                    const personnelNames = arrangement.personnelNames
                        .split(',')
                        .map((name) => name.trim())
                    const personnelObjects = data.personneltList.filter((person) =>
                        personnelNames.includes(person.name),
                    )
                    if (personnelObjects.length > 0) {
                        dayAssignments.value[day] = personnelObjects
                    }
                }
            })
        }
    }
}

onMounted(() => {
    getDetail()
})
</script>

<style scoped lang="scss">
.monthly-plan-edit {
    .page-header {
        margin-bottom: 20px;
        padding: 16px 20px;
        background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
        border-radius: 8px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);

        :deep(.el-page-header__left) {
            .el-page-header__back {
                padding: 8px;
                border-radius: 6px;
                transition: all 0.3s ease;
                background-color: transparent;

                &:hover {
                    background-color: #f0f2f5;
                    color: #1677ff;
                    transform: translateX(-2px);
                }

                &::before {
                    font-size: 16px;
                    font-weight: 600;
                }
            }
        }

        :deep(.el-page-header__content) {
            font-size: 18px;
            font-weight: 600;
            color: #1f2937;
            margin-left: 12px;
        }
    }

    // 隐藏索引不为 0 的工作量项的 required 标记（*号）
    :deep(.hide-required) {
        &.is-required .el-form-item__label::before {
            display: none;
        }
    }

    .card-section {
        margin-bottom: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
        overflow: hidden;
        transition: box-shadow 0.3s ease;

        &:hover {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        :deep(.el-card__header) {
            padding: 16px 20px;
            background-color: #fafbfc;
            border-bottom: 1px solid #f0f2f5;
        }

        :deep(.el-card__body) {
            padding: 24px 20px;
        }
    }

    .card-header {
        font-weight: 600;
        font-size: 15px;
        color: #1f2937;
        position: relative;
        padding-left: 12px;
        display: flex;
        align-items: center;

        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            width: 4px;
            height: 16px;
            background: linear-gradient(180deg, #1677ff 0%, #4096ff 100%);
            border-radius: 2px;
        }
    }

    .page-footer {
        margin-top: 12px;
        display: flex;
        justify-content: flex-end;
        gap: 12px;
    }
}

.person-search-bar {
    margin-bottom: 8px;
}

.selected-panel {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 12px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.selected-list {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.selected-tag {
    margin-left: 6px;
    margin-bottom: 10px;
}

.empty-tip {
    color: #9ca3af;
}

.clickable-suffix {
    cursor: pointer;
}

.schedule-wrapper {
    .schedule-tip {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        color: #6b7280;
        margin-bottom: 8px;

        .schedule-tip-extra {
            margin-top: 2px;
        }
    }

    .schedule-grid {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr)); // 一行 7 个格子
        gap: 8px;
    }

    .schedule-cell {
        border: 1px solid #e5e7eb;
        border-radius: 4px;
        padding: 6px 8px;
        min-height: 150px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-color: #ffffff;

        &.is-disabled {
            background-color: #f9fafb;
            color: #9ca3af;
        }
    }

    .cell-date {
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .cell-persons {
        flex: 1;
        // min-height: 52px;
        // max-height: 52px;
        overflow: hidden;
        font-size: 12px;
    }

    .person-tags {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 4px;
    }

    .more-text {
        font-size: 12px;
        color: #2563eb;
        margin-left: 2px;
    }

    .empty-tip-small {
        font-size: 12px;
        color: #9ca3af;

        &.is-disabled-text {
            color: #d1d5db;
        }
    }

    .cell-actions {
        margin-top: 4px;
        display: flex;
        justify-content: space-between;

        .el-button + .el-button {
            margin-left: 4px;
        }
    }

    .popover-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        max-width: 400px;
        min-width: 200px;

        .popover-tag {
            max-width: 100%;
            word-break: break-all;
            white-space: normal;
            height: auto;
            line-height: 1.5;
            padding: 4px 8px;
        }
    }
}

:deep(.person-popover) {
    min-width: 200px;
    max-width: 400px;
    padding: 12px;

    .el-tag {
        max-width: 100%;
        word-break: break-all;
        white-space: normal;
        height: auto;
        line-height: 1.5;
        margin: 0;

        .el-tag__content {
            word-break: break-all;
            white-space: normal;
            line-height: 1.5;
            display: inline-block;
            max-width: 100%;
        }
    }
}
</style>
