<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="auto"
                :disabled="isDetail"
            >
                <el-row :gutter="16">
                    <el-col :span="8">
                        <el-form-item label="运检站" prop="stationId">
                            <el-select
                                v-model="formData.stationId"
                                placeholder="请选择运检站"
                                clearable
                                filterable
                            >
                                <el-option
                                    v-for="item in stationOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="专业" prop="majorId">
                            <el-select
                                v-model="formData.majorId"
                                placeholder="请选择专业"
                                clearable
                            >
                                <el-option
                                    v-for="item in majorOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <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-row>

                <el-row :gutter="16">
                    <el-col :span="8">
                        <el-form-item label="项目名称" prop="projectName">
                            <el-input
                                v-model.trim="formData.projectName"
                                placeholder="请输入项目名称"
                                maxlength="50"
                                show-word-limit
                                clearable
                            />
                        </el-form-item>
                    </el-col>

                    <el-col :span="8">
                        <el-form-item label="风险等级" prop="riskLevel">
                            <el-select
                                v-model="formData.riskLevel"
                                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-col :span="8">
                        <el-form-item label="计划执行月份" prop="month">
                            <el-date-picker
                                v-model="formData.month"
                                type="month"
                                value-format="YYYY-MM"
                                placeholder="请选择月份"
                                style="width: 100%"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="作业任务" prop="workContent">
                    <el-input
                        type="textarea"
                        v-model.trim="formData.workContent"
                        placeholder="请输入作业内容"
                        maxlength="500"
                        show-word-limit
                        :autosize="{ minRows: 3, maxRows: 6 }"
                    />
                </el-form-item>

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

                <el-form-item label="备注" prop="remark">
                    <el-input
                        type="textarea"
                        v-model.trim="formData.remark"
                        placeholder="请输入备注"
                        maxlength="200"
                        show-word-limit
                        :autosize="{ minRows: 3, maxRows: 6 }"
                    />
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 人员排班区域：先留出结构，后续可按业务补充 -->
        <el-card shadow="never" class="card-section">
            <template #header>
                <div class="card-header">人员排班</div>
            </template>
            <div class="calendar-placeholder">
                <span>这里展示月份日历和每日人员排班（待与后端字段对接后完善）</span>
            </div>
        </el-card>

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

<script setup name="MonthlyPlanEdit">
import { ref, computed, getCurrentInstance } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { addPlanAPI, updatePlanAPI } from '@/api/planMange/plan.js'
import ComButton from '@/components/ComButton/index.vue'

const route = useRoute()
const router = useRouter()
const { proxy } = getCurrentInstance()

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 getInitFormData = () => ({
    planId: null,
    stationId: null,
    majorId: null,
    businessTypeId: null,
    projectName: '',
    workContent: '',
    riskLevel: null,
    month: '',
    planStartDate: '',
    planEndDate: '',
    remark: '',
})

const formData = ref(getInitFormData())

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

const majorOptions = [
    { label: '输电专业', value: 1 },
    { label: '变电专业', value: 2 },
]

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

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

const rules = {
    stationId: [{ required: true, message: '请选择运检站', trigger: 'change' }],
    majorId: [{ required: true, message: '请选择专业', trigger: 'change' }],
    businessTypeId: [{ required: true, message: '请选择业务类型', trigger: 'change' }],
    projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    workContent: [{ required: true, message: '请输入作业内容', trigger: 'blur' }],
    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
    month: [{ required: true, message: '请选择计划执行月份', trigger: 'change' }],
    planStartDate: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
    planEndDate: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }],
}

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

const onSubmit = () => {
    formRef.value.validate(async (valid) => {
        if (!valid) return
        const API = mode.value === 'edit' ? updatePlanAPI : addPlanAPI
        const payload = { ...formData.value }
        try {
            const res = await API(payload)
            if (res.code === 200) {
                proxy.$modal.msgSuccess(mode.value === 'edit' ? '编辑成功' : '新增成功')
                onBack()
            }
        } catch (error) {
            console.error('保存月计划失败:', error)
        }
    })
}
</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;
    }

    .calendar-placeholder {
        min-height: 240px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #9ca3af;
        border: 1px dashed #e5e7eb;
        border-radius: 8px;
        background-color: #f9fafb;
    }

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