<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:00:54
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-27 09:28:34
 * @FilePath: /ouicai_web_framework_vite_ep_nolang/src/views/backend/enterprise/organizational/employee/info.vue
-->
<template>
  <el-dialog custom-class="ba-operate-dialog" :close-on-click-modal="false"
    :model-value="employeeInfo.baTable.form.operate=='info' ? true : false" @close="employeeInfo.baTable.toggleForm">
    <template #header>
      <div class="title" v-drag="['.ba-operate-dialog', '.el-dialog__header']" v-zoom="'.ba-operate-dialog'">
        查看详情</div>
    </template>
    <el-scrollbar v-loading="employeeInfo.baTable.form.loading" class="ba-table-form-scrollbar">
      <div class="ba-operate-form" :class="'ba-' + employeeInfo.baTable.form.operate + '-form'">
        <el-descriptions v-if="!_.isEmpty(employeeInfo.baTable.form.extend!.info)" :column="3" border>
          <el-descriptions-item label="姓名">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.trueName}}
          </el-descriptions-item>
          <el-descriptions-item label="部门">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.departmentName}}
          </el-descriptions-item>
          <el-descriptions-item label="职务">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.postName}}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.sexName}}
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.birthday}}
          </el-descriptions-item>
          <el-descriptions-item label="手机">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.mobile}}
          </el-descriptions-item>
          <el-descriptions-item label="Email">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.email}}
          </el-descriptions-item>
          <el-descriptions-item label="民族">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.nation}}
          </el-descriptions-item>
          <el-descriptions-item label="政治面貌">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.politic}}
          </el-descriptions-item>
          <el-descriptions-item label="户籍">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.censusRegister}}
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="2" label="身份证号">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.idNumber}}
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="3" label="住址">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.address}}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系人">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.emergencyContact}}
          </el-descriptions-item>
          <el-descriptions-item label="紧急联系电话">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.emergencyMobile}}
          </el-descriptions-item>
          <el-descriptions-item label="入职日期">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.hireDate}}
          </el-descriptions-item>
          <el-descriptions-item label="签订日期">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.contractDate}}
          </el-descriptions-item>
          <el-descriptions-item label="合同周期(年)">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.contractPeriod}}
          </el-descriptions-item>
          <el-descriptions-item label="有效天数">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.validDays}}
          </el-descriptions-item>
          <el-descriptions-item label="平台账号">
            <el-tag type="info" v-if="!employeeInfo.baTable.form.extend!.info.employeeInfo.platformAccount">未分配</el-tag>
            <el-tag type="success" v-if="employeeInfo.baTable.form.extend!.info.employeeInfo.platformAccount">已分配
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag type="info" v-if="employeeInfo.baTable.form.extend!.info.employeeInfo.status==0">待入职</el-tag>
            <el-tag type="warning" v-if="employeeInfo.baTable.form.extend!.info.employeeInfo.status==1">试用期</el-tag>
            <el-tag type="success" v-if="employeeInfo.baTable.form.extend!.info.employeeInfo.status==2">正式</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="修改时间">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.updateTime}}
          </el-descriptions-item>
          <el-descriptions-item label="t('organizational.employee.employeeAnnexList')" :span="3">
            <div style="padding-top:10px;padding-bottom: 10px;padding-left: 10px;">
              <el-button type="primary" size="small" @click="innerVisible = true">上传附件</el-button>
            </div>
            <el-row>
              <el-col :span="24" style="padding:10px;"
                v-for="(item,index) in employeeInfo.baTable.form.extend!.info.employeeAnnexList" :key="index">
                <div
                  style=" display:flex;align-items: center;border-bottom: 1px gainsboro dotted;justify-content:space-between; ">
                  <div>{{item.title}}</div>
                  <div style="margin-right:20px">
                    <el-link type="primary" :href="item.previewUrl" target="_blank" :underline="false">查看</el-link>
                    <el-link type="danger" :underline="false" style="margin-left:10px" @click="onDel(item.id)">删除
                    </el-link>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-descriptions-item>
          <el-descriptions-item label="照片">
            <el-image :src="employeeInfo.baTable.form.extend!.info.employeeInfo.previewPicture" fit="cover"
              style="width:80px;height:80px" :preview-teleported="true"
              :preview-src-list="[employeeInfo.baTable.form.extend!.info.employeeInfo.previewPicture]"></el-image>
          </el-descriptions-item>
          <el-descriptions-item :width="120" :span="2" label="备注">
            {{employeeInfo.baTable.form.extend!.info.employeeInfo.remark}}
          </el-descriptions-item>

        </el-descriptions>
      </div>
    </el-scrollbar>
    <el-dialog v-model="innerVisible" width="30%" title="附件上传" append-to-body draggable>
      <div>
        <el-upload class="upload-demo" drag :action="uploadUrl" multiple :show-file-list="true"
          v-model:file-list="fileList" accept="image/gif, image/jpg, image/jpeg, image/bmp, image/png, image/webp,.pdf"
          @success="onSuccess" @remove="onRemove">
          <el-icon class="el-icon--upload">
            <upload-filled />
          </el-icon>
          <div class="el-upload__text">
            拖拽文件到这里或 <em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              <el-alert title="限定jpg/png/pdf格式，且在25M以内的文件" show-icon type="info" :closable="false" />
            </div>
          </template>
        </el-upload>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :disabled="employeeAnnex.length==0" @click="onSave">提交</el-button>
        </span>
      </template>
    </el-dialog>

  </el-dialog>

</template>

<script setup lang="ts">
import { inject, onMounted, reactive, ref, nextTick } from 'vue'

import type BaTable from '/@/utils/baTable'
import { timeFormat } from '/@/components/table'
import _ from 'lodash'
import { ElMessage, ElMessageBox, UploadFile, UploadFiles } from 'element-plus'
import { UploadFilled } from '@element-plus/icons-vue'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { fileUploadUrl } from '/@/api/common'
import { info, SaveEmployeeAnnex, DelEmployeeAnnex } from '/@/api/backend/enterprise/employee'

interface AnnexData {
    empId?: number
    title?: string
    fileType?: string
    fileSize?: number
    savePath?: string
    previewUrl?: string
}

const employeeInfo = reactive({
    baTable: inject('baTable') as BaTable,
})

const innerVisible = ref(false)


const uploadUrl = ref(fileUploadUrl())

const fileList = ref<UploadUserFile[]>([])

const employeeAnnex = ref([] as AnnexData[])

const onSuccess = (result: any, file: any, fileList: any) => {
    let annex: AnnexData = {}
    annex.empId = employeeInfo.baTable.form.extend!.info.employeeInfo.id
    annex.fileSize = result.data.fileSize
    annex.fileType = result.data.fileType
    annex.title = result.data.originalFilename
    annex.savePath = result.data.fileUrl
    annex.previewUrl = result.data.previewUrl
    employeeAnnex.value.push(annex)
}

const onRemove = (uploadFile: UploadFile, uploadFiles: UploadFiles) => {
    let index = employeeAnnex.value.findIndex((item) => {
        return item.title == uploadFile.name
    })
    if (index != -1) {
        employeeAnnex.value.splice(index, 1)
    }
}

// 删除附件
const onDel = (id: number) => {
    ElMessageBox.confirm('您确定要删除附件吗，删除后无法恢复?', '操作提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            let req = { id: 0 }
            req.id = id
            DelEmployeeAnnex(req).then((res) => {
                if (res.code == 1) {
                    onRefresh()
                }
            })

            ElMessage({
                type: 'success',
                message: '操作成功！',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '操作已取消',
            })
        })
}

// 刷新数据
const onRefresh = () => {
    let req = { id: '', pid: '' }
    req.id = employeeInfo.baTable.form.extend!.info.employeeInfo.id
    req.pid = employeeInfo.baTable.form.extend!.info.employeeInfo.departmentId
    info(req).then((res) => {
        employeeInfo.baTable.form.extend!.info = res.data
    })
}

const onSave = () => {
    SaveEmployeeAnnex(employeeAnnex.value).then((res) => {
        if (res.code == 1) {
            onRefresh()
            innerVisible.value = false
        }
    })
}
</script>

<style scoped lang="scss">
:deep(.color-red) {
    color: var(--color-danger) !important;
}
.table-el-tree {
    :deep(.el-tree-node) {
        white-space: unset;
    }
    :deep(.el-tree-node__content) {
        display: block;
        align-items: unset;
        height: unset;
    }
}
</style>
