<script setup lang="ts" name="EmploymentApplicationDetailFlow">
/* 拟入职申请 */
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { showImagePreview } from 'vant'
import { getFlowChart } from '@/api/flowEngine/flowInterface'
import { getEmploymentApplication } from '@/api/personnel/employmentApplication'
import { useDict } from '@/common/utils/dict'
import { selectDictLabel } from '@/common/utils/ruoyi'
import { getDeptName, getPostName } from '@/common/utils/transcoding'
import FlowTimeline from '@/components/Flow/FlowTimeline.vue'
import UploadImage from '@/components/Upload/UploadImage.vue'
import MyAvatar from '@/components/Avatar/MyAvatar.vue'
import ListItemEducationExperiences from './ListItemEducationExperiences.vue'
import ListItemWorkExperiences from './ListItemWorkExperiences.vue'
import ListItemTrainExperiences from './ListItemTrainExperiences.vue'

const {
  work_schedule,
  sys_job_grade,
  sys_job_level,
  employees_change_type,
  yes_no,
  sys_user_sex,
  sys_marital_status,
  political_status,
  document_type,
  sys_educational_background,
  recruitment_channels,
  user_relation,
  sys_period_duration,
  housing_flag,
  stay_type
} =
useDict(
  'work_schedule',
  'sys_job_grade',
  'sys_job_level',
  'employees_change_type',
  'yes_no',
  'sys_user_sex',
  'sys_marital_status',
  'political_status',
  'document_type',
  'sys_educational_background',
  'recruitment_channels',
  'user_relation',
  'sys_period_duration',
  'housing_flag',
  'stay_type'
)

const router = useRouter()
const props = defineProps<{
  id: string
  instanceId: string
}>()

const activeTab = ref('0')
const activeCollapse = ref('1')
const detail = ref<any>({})
const nodeData = ref<any>()
// 教育经历
const educationExperiences = computed(() => detail.value?.employmentExperiences?.filter?.(item => item.type === '1') ?? [])
// 工作经历
const workExperiences = computed(() => detail.value?.employmentExperiences?.filter?.(item => item.type === '2') ?? [])
// 培训经历
const trainExperiences = computed(() => detail.value?.employmentExperiences?.filter?.(item => item.type === '3') ?? [])

getEmploymentApplication(props.id).then(res => {
  detail.value = res.data
})
getFlowChart({ instanceId: props.instanceId }).then(res => {
  nodeData.value = res.data
})

// 预览
function onPreview() {
  router.push({ path: '/preview', query: { fileUrl: detail.value.file.url } })
}
</script>

<template>
  <div class="container__body">
    <div class="container__card flex">
      <van-tabs v-model="activeTab">
        <van-tab name="0" title="详情">
          <van-collapse v-model="activeCollapse" accordion>
            <van-collapse-item title="简历信息" name="1">
              <van-cell>
                <template #title>
                  <div class="cell-top">
                    <MyAvatar
                      width="6rem"
                      height="6rem"
                      :src="detail.photo"
                      :sex="detail.sex" />
                    <div class="cell-top-content">
                      <div>姓名：<span class="cell-top-content-name">{{ detail.name }}</span></div>
                      <div>英文名：{{ detail.enName }}</div>
                      <div>性别：{{ selectDictLabel(sys_user_sex, detail.sex) }}</div>
                    </div>
                  </div>
                </template>
              </van-cell>
              <van-cell title="出生日期" :value="detail.birthday || '-'" />
              <van-cell title="年龄" :value="detail.age || '-'" />
              <van-cell title="婚姻" :value="selectDictLabel(sys_marital_status, detail.maritalStatus) || '-'" />
              <van-cell title="籍贯" :value="detail.nativePlace || '-'" />
              <van-cell title="政治面貌" :value="selectDictLabel(political_status, detail.politicalStatus) || '-'" />
              <van-cell title="证件类型" :value="selectDictLabel(document_type,detail.documentType) || '-'" />
              <van-cell title="证件号" :value="detail.documentNumber || '-'" />
              <van-cell title="首次参加工作时间" :value="detail.firstEmploymentDate || '-'" />
              <van-cell title="身(cm)" :value="detail.height || '-'" />
              <van-cell title="体(kg)" :value="detail.weight || '-'" />
              <van-cell title="健康状况" :value="detail.healthStatus || '-'" />
              <van-cell title="学历" :value="selectDictLabel(sys_educational_background, detail.educationalBackground) || '-'" />
              <van-cell title="毕业院校" :value="detail.malaMater || '-'" />
              <van-cell title="专业" :value="detail.major || '-'" />
              <van-cell title="毕业日期" :value="detail.graduateDate || '-'" />
              <van-cell title="爱好特长" :value="detail.speciality || '-'" />
              <van-cell title="语言能力" :value="detail.languageSkills || '-'" />
              <van-cell title="电脑操作" :value="detail.computerSkills || '-'" />
              <van-cell title="其他资格" :value="detail.otherQualifications || '-'" />
              <van-cell title="备注" :value="detail.remark || '-'" />
              <van-field label="求职者附件" label-align="top">
                <template #input>
                  <UploadImage
                    :model-value="detail.files"
                    :deletable="false"
                    :show-upload="false"
                    name="name"
                    result-type="file"
                    accept="*/*"
                    @click-preview="onPreview" />
                </template>
              </van-field>
            </van-collapse-item>
            <van-collapse-item title="招聘渠道" name="2">
              <van-cell title="招聘渠道" :value="selectDictLabel(recruitment_channels, detail.channel) || '-'" />
              <van-cell title="推荐人姓名" :value="detail.refereeName || '-'" />
              <van-cell title="推荐人工号" :value="detail.refereeCode || '-'" />
              <van-cell title="任职部门" :value="detail.refereeDept || '-'" />
              <van-cell title="任职岗位" :value="detail.refereePost || '-'" />
            </van-collapse-item>
            <van-collapse-item title="联系方式" name="3">
              <van-cell title="个人电话" :value="detail.contactInformation || '-'" />
              <van-cell title="微信号" :value="detail.wechatId || '-'" />
              <van-cell title="QQ号" :value="detail.qqCode || '-'" />
              <van-cell title="个人邮箱" :value="detail.email || '-'" />
              <van-cell title="现居住地址" :value="detail.mailingAddress || '-'" />
              <van-cell title="户籍地址" :value="detail.currentAddress || '-'" />
              <van-cell title="公司邮箱" :value="detail.companyEmail || '-'" />
              <van-cell title="办公电话" :value="detail.officePhone || '-'" />
            </van-collapse-item>
            <van-collapse-item title="紧急联系人" name="4">
              <van-cell title="紧急联系人1：" :value="detail.contactOne || '-'" />
              <van-cell title="关系：" :value="selectDictLabel(user_relation,detail.contactOneRelation) || '-'" />
              <van-cell title="电话：" :value="detail.contactOnePhone || '-'" />
              <van-cell title="紧急联系人2：" :value="detail.contactTwo || '-'" />
              <van-cell title="关系：" :value="selectDictLabel(user_relation,detail.contactTwoRelation) || '-'" />
              <van-cell title="电话：" :value="detail.contactTwoPhone || '-'" />
            </van-collapse-item>
            <van-collapse-item title="任职信息" name="5">
              <van-cell title="任职部门：" :value="getDeptName(detail.serviceDepartmentId) || '-'" />
              <van-cell title="任职岗位：" :value="getPostName(detail.positionHeldId) || '-'" />
              <van-cell title="入职时间：" :value="detail.startDate || '-'" />
              <van-cell title="工作制：" :value="selectDictLabel(work_schedule, detail.workSchedule) || '-'" />
              <van-cell title="工作地点：" :value="detail.workLocation || '-'" />
              <van-cell title="综合工资：" :value="detail.totalCompensation || '-'" />
              <van-cell title="职等：" :value="selectDictLabel(sys_job_grade, detail.jobGrade) || '-'" />
              <van-cell title="职级：" :value="selectDictLabel(sys_job_level, detail.jobLevel) || '-'" />
              <van-cell title="试用期截止日：" :value="detail.probationaryPeriodDeadlin || '-'" />
              <van-cell title="试用期月数：" :value="selectDictLabel(sys_period_duration,detail.probationaryPeriodDuration) || '-'" />
              <van-cell title="是否住宿：" :value="selectDictLabel(housing_flag,detail.housingFlag) || '-'" />
              <van-cell title="住宿类型：" :value="selectDictLabel(stay_type,detail.stayType) || '-'" />
            </van-collapse-item>
            <van-collapse-item v-if="detail?.otherFiles?.length" title="详细说明附件" name="6">
              <van-field label="附件" label-align="top">
                <template #input>
                  <UploadImage
                    :model-value="detail.otherFiles"
                    :deletable="false"
                    :show-upload="false"
                    name="name"
                    result-type="file"
                    accept="*/*"
                    @click-preview="onPreview" />
                </template>
              </van-field>
            </van-collapse-item>
          </van-collapse>
          <FlowTimeline :node-data="nodeData" />
        </van-tab>
        <van-tab name="1" title="教育经历">
          <ListItemEducationExperiences :list="educationExperiences" :yes_no="yes_no" />
        </van-tab>
        <van-tab name="2" title="工作经历">
          <ListItemWorkExperiences :list="workExperiences" />
        </van-tab>
        <van-tab name="3" title="培训经历">
          <ListItemTrainExperiences :list="trainExperiences" />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<style lang="less" scoped>
.grid {
  :deep(.van-image) {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 0.6rem;
    box-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.5);
    overflow: hidden;
    .van-image__img {
      position: absolute;
      object-fit: cover;
    }
  }
}

:deep(.van-cell:not(.van-collapse-item__title)) {
  .van-cell__title {
    margin-right: 1rem;
    flex: none;
  }
  .van-cell__value {
    display: flex;
    justify-content: flex-end;
    color: var(--van-cell-text-color);
    overflow: hidden;
    span {
      text-align: justify;
    }
  }
}
.cell-top {
  display: flex;
  align-items: center;
  &-content {
    margin-left: 1.8rem;
    &-name {
      font-size: 1.6rem;
    }
  }
}

:deep(.van-collapse-item__content) {
  padding: 0 1.2rem;
}

:deep(.tag-label) {
  font-size: 1.4rem;
}

.list {

}
</style>
