<!--  -->
<template>
  <HcCard>
    <template #header>
       员工合同信息
    </template>
    <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="name">
                <el-select v-model="formModel.name" placeholder="请选择用户" size="large" style="width: 100%;">
                                    <el-option
                                    v-for="item in peopleOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                  </el-select>
             </el-form-item>
             <el-form-item label="合同类型:" prop="name">
                <el-select v-model="formModel.contarctType"  placeholder="请选择" size="large" style="width: 100%;">
                                    <el-option
                                    v-for="item in contatctOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    />
                  </el-select>
             </el-form-item>
             <el-form-item label="合同开始日期:">
                            <el-date-picker
                            v-model="formModel.startTime"
                            type="date"
                            placeholder=""
                            style="width: 100%;"
                             />
              </el-form-item>
              <el-form-item label="合同结束日期:">
                            <el-date-picker
                            v-model="formModel.endTime"
                            type="date"
                            placeholder=""
                            style="width: 100%;"
                             />
              </el-form-item>
              <el-form-item label="合同附件:">
                            <HcUploadFile
                            ref="HcUploadFileRef"
                                :options="UploadFileOptions"
                                @progress="HcUploadFileProgress"
                                @success="HcUploadFileSuccess"
                                @change="HcUploadFileChange"
                                drop
                                style="width: 100%;"
                            >
                            <div class="accept-tip">支持的文件格式：图片(png、jpg、jpeg)、 Excel(xls、xlsx) PDF 、Word(doc、docx)</div>
                            <div class=" text-bold" v-show="infoData?.originalName">
                               附件名称： {{ infoData?.originalName }}
                            </div>
                            
                             </HcUploadFile>
                             
                </el-form-item>
       
        
      </el-form>
    </div>
    <template #action>
      <div class="action_box">
        <el-button type="primary" size="large">
                    <HcIcon name="save"/>
                    <span>保存</span>
        </el-button>
        <el-button type="primary" size="large" @click="goBackClick">
                    <HcIcon name="arrow-go-back"/>
                    <span>取消</span>
         </el-button>
      </div>
    </template>
  </HcCard>
</template>

<script setup>
import {ref, watch} from  'vue'
import {useRouter} from 'vue-router'
import {getTokenHeader} from "~src/api/request/header";
import {getObjValue} from "js-fast-way"

const router = useRouter()


const formRef = ref(null)
const formModel = ref({})
const formRules = {
    
}
const contatctOptions=ref([])
const peopleOptions=ref([])


//上传配置
const UploadFileOptions = {
    //此处设置header
    headers: getTokenHeader(),
}

// 文件上传进度
const HcUploadFileProgress = (res) => {
    console.log('文件上传进度', res)
}
const infoData=ref({})
const HcUploadFileRef=ref(null)
// 文件上传成功的回调
const HcUploadFileSuccess = (res) => {
    const { originalName } = getObjValue(res.resData)
    infoData.value.originalName = originalName
    HcUploadFileRef.value?.setModalShow(false);
   
}

// 文件全部上传成功
const HcUploadFileChange = () => {
    console.log('文件全部上传成功')
}
//取消并返回
const goBackClick = () => {
    router.back()
}
</script>
<style lang='scss' scoped>
.action_box{
  text-align: center;
}
.content_box{
  width: 60%;
  text-align: center;
  margin: 0 auto;
}
</style>