<!--  -->
<template>
    <HcCard scrollbar title="员工档案信息编辑" action-ui="text-center">
        <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="姓名:">
                        <el-input v-model="formModel.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="年龄:">
                        <el-input v-model="formModel.userAge" oninput="value=value.replace(/[^\d]/g,'')" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号:">
                        <el-input v-model="formModel.phone" oninput="value=value.replace(/[^\d]/g,'')" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证姓名:">
                        <el-input v-model="formModel.carName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性别:">
                        <el-select v-model="formModel.sex" block placeholder="请选择">
                            <el-option label="男" value="1" />
                            <el-option label="女" value="2" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="民族:">
                        <el-input v-model="formModel.nation" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号码:">
                        <el-input v-model="formModel.idNumber" oninput="value=value.replace(/[^\d]/g,'')" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="出生日期:">
                        <el-date-picker v-model="formModel.birthday" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="试用期:">
                        <el-input v-model="formModel.periodMoth" oninput="value=value.replace(/[^\d]/g,'')">
                            <template #append>
                                月
                            </template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证地址:">
                        <el-input v-model="formModel.carAddr" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="入职时间:">
                        <el-date-picker v-model="formModel.entryTime" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同类型:">
                        <el-input v-model="formModel.conTypeName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="司龄:">
                        <el-input v-model="formModel.cyear" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同开始日期:">
                        <el-date-picker v-model="formModel.conStartDate" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="职位:">
                        <el-input v-model="formModel.postName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同结束日期:">
                        <el-date-picker v-model="formModel.conEndDate" class="block" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="婚姻状况:">
                        <el-select v-model="formModel.marriageStatus" block placeholder="请选择">
                            <el-option v-for="item in dictData.marriage_status" :label="item.dictName" :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="邮箱:">
                        <el-input v-model="formModel.email" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="续签次数:">
                        <el-input v-model="formModel.renewalCount" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="户籍:">
                        <el-input v-model="formModel.domicileAddr" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="部门:">
                        <el-input v-model="formModel.deptName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="合同附件:">
                        <el-link class="truncate" type="primary" target="_blank" :href="formModel.conFileUrl">
                            {{ getFileName(formModel.conFileUrl) }}
                        </el-link>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="学历:">
                        <el-select v-model="formModel.educationType" block>
                            <el-option v-for="item in dictData.education_type" :label="item.dictName" :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="直属主管:">
                        <el-input v-model="formModel.leaderName" disabled />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="紧急联系人姓名:">
                        <el-input v-model="formModel.emergencyName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="专业:">
                        <el-input v-model="formModel.speciality" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="政治面貌:">
                        <el-select v-model="formModel.politicalType" block placeholder="请选择">
                            <el-option v-for="item in dictData.political_type" :label="item.dictName" :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人电话:" oninput="value=value.replace(/[^\d]/g,'')">
                        <el-input v-model="formModel.emergencyPhone" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="开户行:">
                        <el-input v-model="formModel.bankName" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工状态:">
                        <el-select v-model="formModel.userStatus" block placeholder="请选择">
                            <el-option v-for="item in dictData.user_status" :label="item.dictName" :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="联系人关系:">
                        <el-input v-model="formModel.emergencyRelation" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="银行卡号:">
                        <el-input v-model="formModel.bankNum" oninput="value=value.replace(/[^\d]/g,'')" :controls="false" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工类型:">
                        <el-select v-model="formModel.userType" block placeholder="请选择">
                            <el-option v-for="item in dictData.user_type" :label="item.dictName" :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工身份证（人像）:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.carAimgUrl" @upload="formItemUpload('carAimgUrl')" @change="formItemChange($event, 'carAimgUrl')" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工身份证（国徽）:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.carBimgUrl" @upload="formItemUpload('carBimgUrl')" @change="formItemChange($event, 'carBimgUrl')" />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="员工照片:">
                        <HcFormUpload type="preview" :num="1" :src="formModel.userImgUrl" @upload="formItemUpload('userImgUrl')" @change="formItemChange($event, 'userImgUrl')" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #action>
            <el-button size="large" type="info" hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back" />
                <span>取消并返回</span>
            </el-button>
            <el-button size="large" type="primary" hc-btn :loading="submitLoading" @click="formSaveClick">
                <HcIcon name="check-double" />
                <span>提交保存</span>
            </el-button>
        </template>

        <!-- 上传组件 -->
        <HcUploadFile ref="uploadFileRef" :options="uploadOptions" :echo-params="uploadParams" @success="uploadSuccess" />
    </HcCard>
</template>

<script setup>
import { onActivated, ref } from 'vue'
import mainApi from '~api/people/archive'
import { getTokenHeader } from '~src/api/request/header'
import { getArrValue, getObjValue } from 'js-fast-way'
import { useRoute, useRouter } from 'vue-router'
import { getDictInfo } from '~api/other'
import { getFileName } from '~uti/tools'

//初始路由数据
const router = useRouter(), useRoutes = useRoute()
const dataId = ref(useRoutes?.query?.id ?? '')

//页面被激活
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    getDictionaryData()
    getUserInfo()
})

//费用类型字典
const dictData = ref({})
const getDictionaryData = async () => {
    let newDict = {}
    //婚姻 ：marriage_status  学历 education_type  政治面貌 political_type  员工状态 user_status  员工类型 user_type
    const keys = ['marriage_status', 'education_type', 'political_type', 'user_status', 'user_type']
    for (let i = 0; i < keys.length; i++) {
        const { data } = await getDictInfo(keys[i])
        newDict[keys[i]] = getArrValue(data)
    }
    dictData.value = newDict
}

//获取用户信息
const getUserInfo = async () => {
    const { data } = await mainApi.detail({
        id: dataId.value,
    })
    formModel.value = getObjValue(data)
}

//表单信息
const formRef = ref(null)
const formModel = ref({})
const formRules = {}

//上传配置
const uploadFileRef = ref(null)
const uploadParams = ref({})
const uploadOptions = {
    url: '/api/blade-resource/oss/endpoint/put-file',
    headers: getTokenHeader(),
    accept: 'image/png,image/jpg,image/jpeg',
    accept_tip: '只能上传图片(png、jpg、jpeg)',
    multiple: false,
    size: 50,
}

//上传
const formItemUpload = (key) => {
    uploadParams.value = { key }
    uploadFileRef.value?.selectFile()
}

//文件变化
const formItemChange = (src, key) => {
    formModel.value[key] = src
}

//文件上传成功
const uploadSuccess = ({ resData, echoParams }) => {
    const { key } = echoParams
    formModel.value[key] = resData.link
    uploadFileRef.value?.setModalShow(false)
}

//提交保存
const submitLoading = ref(false)
const formSaveClick = async () => {
    submitLoading.value = true
    //发起请求
    const { error, code, msg } = await mainApi.submit(formModel.value)
    //判断状态
    submitLoading.value = false
    if (!error && code === 200) {
        window.$message?.success('提交保存成功')
        router.back()
    } else {
        window.$message?.error(msg)
    }
}

//返回
const goBackClick = () => {
    router.back()
}
</script>
