<template>
    <el-form
        size="large"
        label-width="100px"
        :model="formData"
        ref="formRef"
        :rules="rules"
        class="add-and-edit-form"
    >
        <el-form-item label="人员所属" prop="inspectionStationId">
            <el-select
                filter
                clearable
                style="width: 100%"
                v-model="formData.inspectionStationId"
                placeholder="请选择人员所属"
            >
                <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="name">
            <el-input
                clearable
                maxlength="20"
                show-word-limit
                placeholder="请输入姓名"
                v-model.trim="formData.name"
            />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="formData.sex">
                <el-radio-button :label="1">男性 ♂</el-radio-button>
                <el-radio-button :label="0">女性 ♀</el-radio-button>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="电话" prop="phone">
            <el-input
                clearable
                maxlength="11"
                show-word-limit
                placeholder="请输入电话"
                v-model.trim="formData.phone"
            />
        </el-form-item>   
    </el-form>
</template>

<script setup name="AddAndEditForm">
import { ref } from 'vue'

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

const formRef = ref(null)

const rules = {
    inspectionStationId: [{ required: true, message: '请选择人员所属', trigger: 'change' }],
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    phone: [
        {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur',
        },
    ],
    positionId: [{ required: true, message: '请选择岗位', trigger: 'change' }],
    personnelNatureId: [{ required: true, message: '请选择人员性质', trigger: 'change' }],
    personnelClassificationId: [{ 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>
