<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="rules"
                label-width="160"
                size="large"
                :disabled="isDetail"
            >
                <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.value"
                                    :label="item.label"
                                    :value="item.value"
                                    v-for="item in majorOptions"
                                />
                            </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 businessTypeOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </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
                                type="textarea"
                                v-model.trim="formData.workContent"
                                placeholder="请输入作业内容"
                                maxlength="500"
                                show-word-limit
                                disabled
                                :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
                                v-model="formData.planCategoryId"
                                placeholder="请选择类别"
                                clearable
                            >
                                <el-option
                                    v-for="item in riskLevelOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </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
                                :label="index == 0 ? '工作量' : ''"
                                :prop="`workLoadList.${index}.workloadCategoryId`"
                            >
                                <el-select
                                    clearable
                                    v-model="item.workloadCategoryId"
                                    placeholder="请选择工作量类别"
                                >
                                    <el-option
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        v-for="item in workLoadCategoryOptions"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item
                                label-width="0"
                                :prop="`workLoadList.${index}.workloadNum`"
                            >
                                <el-input
                                    v-model="item.workloadNum"
                                    style="width: 240px"
                                    placeholder="输入数量"
                                >
                                    <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
                                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 label="计划投入管理人员" prop="planPersonnel">
                            <el-input
                                v-model="selectedManagerNames"
                                readonly
                                placeholder="点击选择管理人员"
                                @click="onOpenPersonPicker"
                            >
                                <template #suffix>
                                    <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
                                placeholder="请输入车辆数量"
                                v-model.trim="formData.planCarNum"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="7">
                        <el-form-item label="计划投入熟练工人员数量" prop="planSkilledWorkerNum">
                            <el-input
                                clearable
                                placeholder="请输入熟练工人员数量"
                                v-model.trim="formData.planSkilledWorkerNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item
                            label="计划投入工日"
                            prop="planSkilledWorkerDay"
                            label-width="auto"
                        >
                            <el-input
                                clearable
                                placeholder="计划投入工日"
                                v-model.trim="formData.planSkilledWorkerDay"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="7">
                        <el-form-item label="计划投入辅助工人员数量" prop="planAuxiliaryWorkerNum">
                            <el-input
                                clearable
                                placeholder="请输入辅助工人员数量"
                                v-model.trim="formData.planAuxiliaryWorkerNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item
                            label="计划投入工日"
                            prop="planAuxiliaryWorkerDay"
                            label-width="auto"
                        >
                            <el-input
                                clearable
                                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
                                placeholder="请输入分包车辆数量"
                                v-model.trim="formData.planSubCarNum"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="实际工作天数">
                            <el-input
                                clearable
                                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">
                    <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"
                                >
                                    <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
                                            v-for="person in day.managers"
                                            :key="person.id"
                                            size="small"
                                            closable
                                            @close.stop="onRemovePersonFromDay(day.date, person)"
                                        >
                                            {{ person.name }}
                                        </el-tag>
                                    </div>
                                </el-popover>
                                <template v-else>
                                    <div class="person-tags">
                                        <el-tag
                                            size="small"
                                            v-for="person in day.managers"
                                            :key="person.id"
                                            closable
                                            @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.planPersonnel.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">
                    <el-col :span="16">
                        <div class="person-search-bar">
                            <el-input
                                v-model.trim="managerDialog.keyword"
                                placeholder="输入姓名搜索"
                                clearable
                                prefix-icon="Search"
                            />
                        </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
                                        closable
                                        :key="item.id"
                                        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" justify="end" style="margin-top: 16px">
                    <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 } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { updatePlanAPI } from '@/api/planMange/plan.js'
import { getPersonnelCommonListAPI } from '@/api/common.js'
import { listPlanProfessionalAPI } from '@/api/basicManage/planProfessional'
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 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: '', // 基塔数
    // planPersonnel: [], // 计划投入管理人员（数组）
    planCarNum: '', // 计划投入管理人员车辆数
    planSkilledWorkerNum: '', // 计划投入熟练工人员数量
    planAuxiliaryWorkerNum: '', // 计划投入辅助工人员数量
    planAuxiliaryWorkerDay: '', // 计划投入辅助工人员工日
    planSkilledWorkerDay: '', // 计划投入熟练工人员工日
    planSubCarNum: '', // 计划投入分包车辆数
    actualWorkingDay: '', // 实际工作天数
    workLoadList: [
        {
            workloadCategoryId: '', // 工作量类别id
            unitPrice: '', // 单价
            workloadNum: '', // 工作量
        },
    ],
    personnelArrangementList: [], // 人员排班模板 [{day: '', personnelNames: ''}]
})

const formData = ref(getInitFormData())

// 静态选项（后续可替换为接口下拉）
const stationOptions = [
    { label: '昆明运检站', value: 1 },
    { label: '大理运检站', value: 2 },
]

const majorOptions = ref([])

const businessTypeOptions = [
    { label: '日常巡视', value: 1 },
    { label: '缺陷处理', value: 2 },
]

const riskLevelOptions = [
    { label: '低风险', value: 1 },
    { label: '中风险', value: 2 },
    { label: '高风险', value: 3 },
]

const rules = {
    planMajorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
    businessTypeId: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
    planCategoryId: [{ required: true, message: '请选择类别', trigger: 'change' }],
    towerBaseNumber: [{ required: true, message: '请输入基塔数', trigger: 'blur' }],
    planPersonnel: [{ required: true, message: '请选择计划投入管理人员', trigger: 'blur' }],
    planPersonnelWorkDays: [
        { required: true, message: '请输入计划投入管理人员工日', trigger: 'blur' },
    ],
    planCarNum: [{ required: true, message: '请输入计划投入管理人员车辆数', trigger: 'blur' }],
    planSkilledWorkerNum: [
        { required: true, message: '请输入计划投入熟练工人员数量', trigger: 'blur' },
    ],
    planAuxiliaryWorkerNum: [
        { required: true, message: '请输入计划投入辅助工人员数量', trigger: 'blur' },
    ],
    planSkilledWorkerDay: [
        { required: true, message: '请输入计划投入熟练工人员工日', trigger: 'blur' },
    ],
    planAuxiliaryWorkerDay: [
        { required: true, message: '请输入计划投入辅助工人员工日', trigger: 'blur' },
    ],
    planSubCarNum: [{ required: true, message: '请输入计划投入分包车辆数', trigger: 'blur' }],
    actualWorkingDay: [{ required: true, message: '请输入实际工作天数', trigger: 'blur' }],
}

const onBack = () => {
    router.back()
}

const onSubmit = () => {
    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,
            ...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('、'),
            }
        })

        console.log('submitData组装后的参数', submitData)

        // const API = mode.value === 'edit' ? updatePlanAPI : addPlanAPI
        // try {
        //     const res = await API(submitData)
        //     if (res.code === 200) {
        //         proxy.$modal.msgSuccess(mode.value === 'edit' ? '编辑成功' : '新增成功')
        //         onBack()
        //     }
        // } catch (error) {
        //     console.error('保存月计划失败:', error)
        // }
    })
}

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

const onDeleteWorkLoad = (index) => {
    formData.value.workLoadList.splice(index, 1)
}

// 人员选择弹窗相关
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.planPersonnel.map((item) => item.name).join('、'),
)

const onOpenPersonPicker = async () => {
    managerDialog.visible = true
    managerDialogConfig.outerVisible = true
    await nextTick()
    if (personTableRef.value) {
        personTableRef.value.clearSelection()
        personList.value.forEach((row) => {
            const exists = formData.value.planPersonnel.find((item) => item.id === row.id)
            if (exists) {
                personTableRef.value.toggleRowSelection(row, true)
            }
        })
    }
    managerDialog.selected = [...formData.value.planPersonnel]
}

const onManagerSelectionChange = (rows) => {
    managerDialog.selected = [...rows]
}

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.planPersonnel = [...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.planPersonnel || !formData.value.planPersonnel.length) return
    dayAssignments.value[date] = formData.value.planPersonnel.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 getMajorOptions = async () => {
    const res = await listPlanProfessionalAPI({
        pageNum: 1,
        pageSize: 1000,
        category: 0,
    })

    console.log('专业列表', res)
    if (res.code === 200) {
        majorOptions.value = res.rows?.map((item) => ({
            label: item.planMajorName,
            value: item.planMajorId,
        }))
    }
}

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

<style scoped lang="scss">
.monthly-plan-edit {
    .page-header {
        margin-bottom: 16px;
    }

    .card-section {
        margin-bottom: 16px;
    }

    .card-header {
        font-weight: 600;
        font-size: 14px;
    }

    .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 {
        .popover-item {
            display: flex;
            font-size: 12px;
            // padding: 2px 6px;
            background-color: #f3f4f6;
            border-radius: 2px;
            gap: 4px;
        }
    }
}
</style>
