<template>
    <el-form
        size="large"
        label-width="auto"
        :model="formData"
        ref="formRef"
        :rules="rules"
        class="add-and-edit-form"
    >
        <!-- 月份 -->
        <el-form-item label="月份" prop="planManagementMonth">
            <el-date-picker
                v-model="formData.planManagementMonth"
                type="month"
                value-format="YYYY-MM"
                placeholder="请选择月份"
                style="width: 100%"
            />
        </el-form-item>

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

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

        <!-- 实施部门 -->
        <el-form-item label="实施部门" prop="inspectionStationId">
            <el-select
                clearable
                filterable
                style="width: 100%"
                placeholder="请选择实施部门"
                v-model="formData.inspectionStationId"
            >
                <el-option
                    v-for="item in inspectionStationOptions"
                    :key="item.id"
                    :value="item.id"
                    :label="item.value"
                />
            </el-select>
        </el-form-item>

        <!-- 计划开始时间 -->
        <el-form-item label="计划开始时间" prop="stareDate">
            <el-date-picker
                v-model="formData.stareDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择计划开始时间"
                style="width: 100%"
            />
        </el-form-item>

        <!-- 计划结束时间 -->
        <el-form-item label="计划结束时间" prop="endDate">
            <el-date-picker
                v-model="formData.endDate"
                type="date"
                value-format="YYYY-MM-DD"
                placeholder="请选择计划结束时间"
                style="width: 100%"
            />
        </el-form-item>

        <!-- 风险等级 -->
        <el-form-item label="风险等级" prop="riskLevel">
            <el-select
                clearable
                style="width: 100%"
                placeholder="请选择风险等级"
                v-model="formData.riskLevel"
            >
                <el-option
                    v-for="item in plan_risk_level"
                    :key="item.value"
                    :value="item.value"
                    :label="item.label"
                />
            </el-select>
        </el-form-item>

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

<script setup name="AddAndEditForm">
import { ref } from 'vue'
const { proxy } = getCurrentInstance()
const { plan_risk_level } = proxy.useDict('plan_risk_level')

const props = defineProps({
    formData: {
        type: Object,
        default: () => ({}),
    },
    inspectionStationOptions: {
        type: Array,
        default: () => [],
    },
})

const formRef = ref(null)

const rules = {
    planManagementMonth: [{ required: true, message: '请选择月份', trigger: 'change' }],
    projectName: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
    workContent: [{ required: true, message: '请输入作业内容', trigger: 'blur' }],
    inspectionStationId: [{ required: true, message: '请选择实施部门', trigger: 'change' }],
    stareDate: [{ required: true, message: '请选择计划开始时间', trigger: 'change' }],
    endDate: [{ required: true, message: '请选择计划结束时间', trigger: 'change' }],
    riskLevel: [{ required: true, message: '请选择风险等级', trigger: 'change' }],
}

// 暴露校验方法和重置方法给父组件
defineExpose({
    validate: () => formRef.value.validate(),
    resetFields: () => formRef.value.resetFields(),
    clearValidate: () => formRef.value.clearValidate(),
})
</script>

<style lang="scss" scoped>
.add-and-edit-form {
    padding: 10px 20px;
    :deep(.el-radio-button__inner) {
        border-radius: 20px;
        margin-right: 10px;
        border: 1px solid #dcdfe6 !important;
        box-shadow: none !important;
    }
    :deep(.el-radio-button:first-child .el-radio-button__inner) {
        border-left: 1px solid #dcdfe6 !important;
    }
    :deep(.el-radio-button.is-active .el-radio-button__inner) {
        background-color: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        border-color: var(--el-color-primary) !important;
    }
}
</style>
