<!--  -->
<template>
    <HcCard scrollbar title="员工合同信息" actionUi="text-center">
        <div class="content_box">
            <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                <el-form-item label="员工姓名:" prop="userId">
                    <el-select v-model="formModel.userId" block filterable>
                        <el-option v-for="item in userList" :label="item.name" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="合同类型:" prop="conType">
                    <el-select v-model="formModel.conType" block>
                        <el-option v-for="item in conTypeData" :label="item.dictName" :value="item.dictValue"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="合同开始日期:" prop="startDate">
                    <el-date-picker v-model="formModel.startDate" type="date" class="block" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="合同结束日期:" prop="endDate">
                    <el-date-picker v-model="formModel.endDate" type="date" class="block" format="YYYY-MM-DD" value-format="YYYY-MM-DD"/>
                </el-form-item>
                <el-form-item label="合同附件:" v-if="formModel.fileUrl">
                    <HcFormUpload :src="formModel.fileUrl" @upload="formItemUpload"/>
                </el-form-item>
                <el-form-item label="合同附件:" v-show="!formModel.fileUrl">
                    <HcUploadFile ref="uploadFileRef" drop :options="uploadOptions" @success="uploadFileSuccess" class="w-full"/>
                </el-form-item>
            </el-form>
        </div>
        <template #action>
            <el-button hc-btn @click="goBackClick">
                <HcIcon name="arrow-go-back"/>
                <span>取消返回</span>
            </el-button>
            <el-button hc-btn type="primary" :loading="submitLoading" @click="formSaveClick">
                <HcIcon name="save"/>
                <span>提交保存</span>
            </el-button>
        </template>
    </HcCard>
</template>

<script setup>
import {ref, onActivated} from 'vue'
import mainApi from "~api/people/contract";
import {useRoute, useRouter} from 'vue-router'
import {getTokenHeader} from "~src/api/request/header";
import {formValidate, getArrValue, getObjValue} from "js-fast-way"
import {getDictInfo, getuserList} from "~api/other";

//路由变量
const router = useRouter(), useRoutes = useRoute()
//路由参数
const dataId = ref(useRoutes?.query?.id ?? '')

//页面被激活
onActivated(() => {
    dataId.value = useRoutes?.query?.id ?? ''
    if (dataId.value) {
        getDetail()
    } else {
        formModel.value = {}
    }
    getuserListApi()
    getConType()
})

//获取用户下拉数据
const userList = ref([])
const getuserListApi = async () => {
    const {data} = await getuserList()
    userList.value = getArrValue(data)
}

//合同类型字典
const conTypeData = ref([])
const getConType = async () => {
    const {data} = await getDictInfo('con_type')
    conTypeData.value = getArrValue(data)
}

//表单数据
const formRef = ref(null)
const formModel = ref({})
const getDetail = async () => {
    const {data} = await mainApi.detail({id: dataId.value})
    formModel.value = getObjValue(data)
}
const formRules = {
    userId: [{required: true, message: '请选择员工', trigger: 'change'}],
    conType: [{required: true, message: '请选择合同类型', trigger: 'change'}],
    startDate: [{required: true, message: '请选择合同开始日期', trigger: 'change'}],
    endDate: [{required: true, message: '请选择合同结束日期', trigger: 'change'}],
}

//上传配置
const uploadFileRef = ref(null)
const uploadOptions = {
    headers: getTokenHeader(),
    multiple: false,
    size: 50
}

//上传文件
const formItemUpload = () => {
    uploadFileRef.value?.selectFile();
}

// 文件上传成功的回调
const uploadFileSuccess = ({resData}) => {
    const { pdfUrl, originalName } = getObjValue(resData)
    formModel.value.fileUrl = pdfUrl
    formModel.value.conFileName = originalName
    uploadFileRef.value?.setModalShow(false);
}

//取消并返回
const goBackClick = () => {
    router.back()
}

//提交保存
const submitLoading = ref(false)
const formSaveClick = async () => {
    submitLoading.value = true
    const isForm = await formValidate(formRef.value)
    if (!isForm) {
        submitLoading.value = false
        return false
    }
    //发起请求
    const {error, code, msg} = await mainApi.submit({
        ...formModel.value,
        type: 1 //合同类型
    })
    //判断状态
    submitLoading.value = false
    if (!error && code === 200) {
        window.$message?.success('提交成功')
        router.push({name: 'people-contract'}).then()
    } else {
        window.$message?.error(msg)
    }
}
</script>

<style lang='scss' scoped>
.content_box {
    width: 60%;
    text-align: center;
    margin: 0 auto;
}
</style>
