<template>
    <div class="p-3">
        <div class="bg-fff flex1 ov-hd d-flex flex-cln">
            <div class="d-flex a-c pd-16 border-bottom">
                <div class="f-s-20 c-333 f-w-7 mr-10">{{ form.id ? '编辑' : '新增' }}专家信息</div>
                <el-button @click="router.go(-1)" type="primary" text>
                    <el-icon>
                        <Back />
                    </el-icon>
                    返回上一级
                </el-button>
            </div>
            <div class="flex1 over-auto">
                <el-form ref="formRef" label-width="auto" label-position="top" :model="form" :rules="rules">
                    <div class="pd-16 border-bottom ov-hd">
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-form-item label="专家头像" prop="avatar">
                                    <UploadAvatar v-model="form.avatar" shapeImg="square" shape="square"></UploadAvatar>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="专家姓名" prop="name">
                                    <el-input v-model="form.name" placeholder="请输入专家姓名" clearable />
                                </el-form-item>
                            </el-col>
                            <!-- 性别 -->
                            <el-col :span="6">
                                <el-form-item label="性别" prop="sex">
                                    <!-- <el-select v-model="form.sex" clearable placeholder="请选择性别">
                                        <el-option v-for="item in sys_sex_type" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select> -->
                                    <!-- 单选框 -->
                                    <el-radio-group v-model="form.sex">
                                        <el-radio v-for="item in sys_sex_type" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="民族" prop="nation">
                                    <el-input v-model="form.nation" maxlength="20" placeholder="请输入民族" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="身份证号" prop="idCard">
                                    <el-input v-model="form.idCard" maxlength="20" placeholder="请输入身份证号" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="政治面貌" prop="politicalStatus">
                                    <el-input v-model="form.politicalStatus" placeholder="请输入政治面貌" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="最高学历" prop="educationalBg">
                                    <el-select v-model="form.educationalBg" clearable placeholder="请选择最高学历">
                                        <el-option v-for="item in dm_educational_type" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="所学专业" prop="major">
                                    <el-input v-model="form.major" placeholder="请输入所学专业" maxlength="50" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="从事专业" prop="job">
                                    <el-input v-model="form.job" placeholder="请输入从事专业" maxlength="50" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="职称/职务" prop="post">
                                    <el-input v-model="form.post" placeholder="请输入职称/职务" maxlength="50" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="单位" prop="workUnit">
                                    <el-input v-model="form.workUnit" placeholder="请输入单位" maxlength="50" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="拟加入专家组" prop="personType">
                                    <!-- <el-input v-model="form.personType" placeholder="请输入拟加入专家组" clearable /> -->
                                    <el-select v-model="form.personType" clearable placeholder="请选择拟加入专家组" multiple>
                                        <el-option v-for="item in dm_person_type" :key="item.value" :label="item.label" :value="item.value" />
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="专业品种" prop="variety">
                                    <el-input v-model="form.variety" placeholder="请输入专业品种" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="通信地址" prop="address">
                                    <el-input v-model="form.address" placeholder="请输入通信地址" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="联系电话" prop="phone">
                                    <el-input v-model="form.phone" placeholder="请输入联系电话" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="传真电话" prop="faxPhone">
                                    <el-input v-model="form.faxPhone" placeholder="请输入传真电话" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="邮箱" prop="email">
                                    <el-input v-model="form.email" placeholder="请输入邮箱" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="微信号" prop="wxNum">
                                    <el-input v-model="form.wxNum" placeholder="请输入微信号" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="随机因子" prop="factor">
                                    <template #label>
                                        <span>随机因子</span>
                                        <span class="c-999 f-s-12">（填写0~100；数字越大，抽取概率越大）</span>
                                    </template>
                                    <el-input v-model="form.factor" type="number" placeholder="请输入随机因子" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="岗位状态" prop="status">
                                    <!-- <el-select v-model="form.status" clearable placeholder="请选择岗位状态">
                                        <el-option label="在岗" value="1" />
                                        <el-option label="离岗" value="0" />
                                    </el-select> -->
                                    <!-- // 单选框 -->
                                    <el-radio-group v-model="form.status">
                                        <el-radio v-for="item in dm_position_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="附件" prop="attachment">
                                    <FileUpload v-model="form.attachment" format="array" :limit="10" :fileSize="100"></FileUpload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="图片" prop="images">
                                    <imageUpload v-model="form.images" :limit="50" isString :isShowTip="false"></imageUpload>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="简介" prop="brief">
                                    <div class="flex1">
                                        <Editor v-model="form.brief" placeholder="请输入简介"></Editor>
                                    </div>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                </el-form>
            </div>
            <div class="d-flex a-c j-c pd-16">
                <el-button @click="router.go(-1)">取消</el-button>
                <el-button @click="save" type="primary">提交</el-button>
            </div>
        </div>
    </div>
</template>

<script setup name="authority-input" lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { debounce } from 'lodash';
import { useRouter } from 'vue-router';
import { expertPersonAdd, expertPersonUpdate, expertPersonDetail } from '@/api/authority';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_sex_type, dm_educational_type, dm_person_type, dm_position_status } = toRefs<any>(proxy?.useDict('sys_sex_type', 'dm_educational_type', 'dm_person_type', 'dm_position_status'));
const router = useRouter();
const route = useRoute();
const form = ref<any>({
    id: undefined,
    avatar: '',
    name: '',
    sex: '0',
    status: '1',
    attachment: []
});
const rules = reactive({
    // 自动生成全部
    avatar: [{ required: true, message: '请上传专家头像', trigger: 'blur' }],
    name: [{ required: true, message: '请输入专家姓名', trigger: 'blur' }],
    // sex: [{ required: true, message: '请选择性别', trigger: 'change' }],
    // nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
    idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    // politicalStatus: [{ required: true, message: '请输入政治面貌', trigger: 'blur' }],
    // educationalBg: [{ required: true, message: '请选择最高学历', trigger: 'change' }],
    // major: [{ required: true, message: '请输入所学专业', trigger: 'blur' }],
    // job: [{ required: true, message: '请输入从事专业', trigger: 'blur' }],
    // post: [{ required: true, message: '请输入职称/职务', trigger: 'blur' }],
    workUnit: [{ required: true, message: '请输入单位', trigger: 'blur' }],
    personType: [{ required: true, message: '请选择拟加入专家组', trigger: 'change' }],
    variety: [{ required: true, message: '请输入专业品种', trigger: 'blur' }],
    // address: [{ required: true, message: '请输入通信地址', trigger: 'blur' }],
    phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
    // faxPhone: [{ required: true, message: '请输入传真电话', trigger: 'blur' }],
    // email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
    // wxNum: [{ required: true, message: '请输入微信号', trigger: 'blur' }],
    factor: [
        { required: true, message: '请输入随机因子', trigger: 'blur' },
        // 1 ~ 100 的整数
        { pattern: /^(100|[1-9][0-9]?)$/, message: '随机因子必须是1~100的整数', trigger: 'blur' }
    ],
    status: [{ required: true, message: '请选择岗位状态', trigger: 'change' }],
    brief: [{ required: true, message: '请输入简介', trigger: 'blur' }]
});
const formRef = ref();

const save = debounce(async () => {
    await formRef.value.validate();
    const res = form.value.id ? await expertPersonUpdate(form.value) : await expertPersonAdd(form.value);
    if (res && res.code === 200) {
        router.go(-1);
    }
}, 500);
// 获取专家详情
const getExpertDetail = async () => {
    if (route.query?.id) {
        const res = await expertPersonDetail(route.query.id);
        if (!res || res.code !== 200) return;
        form.value = {
            ...res.data,
            attachment: res.data.attachments
        };
    }
};
onMounted(() => {
    getExpertDetail();
});
</script>
