<script setup lang="ts" name="RecruitmentNeedsDetailFlow">
/* 用人需求详情 */
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
// import { showImagePreview } from 'vant'
import { getFlowChart } from '@/api/flowEngine/flowInterface'
import { getRecruitmentNeeds } from '@/api/personnel/recruitmentNeeds'
import { useDict } from '@/common/utils/dict'
import { selectDictLabel } from '@/common/utils/ruoyi'
import FlowTimeline from '@/components/Flow/FlowTimeline.vue'
import ListItemEmployees from './ListItemEmployees.vue'
import DetailEmployees from './DetailEmployees.vue'
import UploadImage from '@/components/Upload/UploadImage.vue'
// import { getDeptName } from '@/common/utils/transcoding'
import { parseTime } from '@/common/utils/ruoyi'

const {
  yes_no,
  sys_user_sex,
  sys_educational_background,
  sys_need_marital_status,
  cv_record_status,
  political_status
}
= useDict(
  'yes_no',
  'sys_user_sex',
  'sys_educational_background',
  'sys_need_marital_status',
  'cv_record_status',
  'political_status'
)

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

const active = ref('1')
const detail = ref<any>({})
const employeesDetail = ref<any>({})
const nodeData = ref<any>()
const activeTab = ref('0')
const activeCollapse = ref('1')

getRecruitmentNeeds(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 } })
}

// 点击员工列表，查看详情
function onDetailEmployees(item) {
  employeesDetail.value = item
  active.value = '2'
}

function onBack() {
  active.value = '1'
}
</script>

<template>
  <div class="container__body">
    <div v-show="active === '1'" 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 title="招聘标题" :value="detail.title" />
              <van-cell title="申请人" :value="detail.createUserName" />
              <van-cell title="申请日期" :value="parseTime(detail.createTime, '{y}-{m}-{d}')" />
              <van-cell title="需求单位" :value="detail.department" />
              <van-cell title="需求岗位" :value="detail.position" />
              <van-cell title="需求人数" :value="detail.needHeadcount" />
              <van-cell title="期望到岗日期" :value="detail.joiningDate" />
              <van-cell title="编制人数" :value="detail.approvedHeadcount" />
              <van-cell title="现有人数" :value="detail.currentHeadcount" />
              <van-cell title="工作内容" :value="detail.jobDuties" />
              <van-cell title="需求备注" :value="detail.remark" />
              <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-item title="任用资格" name="2">
              <van-cell title="性别" :value="selectDictLabel(sys_user_sex, detail.sex)" />
              <van-cell title="学历" :value="selectDictLabel(sys_educational_background, detail.educationalBackground)" />
              <van-cell title="专业" :value="detail.major" />
              <van-cell title="年龄" :value="detail.age" />
              <van-cell title="婚姻状况" :value="selectDictLabel(sys_need_marital_status, detail.maritalStatus)" />
              <van-cell title="工作能力" :value="detail.workExperience" />
              <van-cell title="语言能力" :value="detail.languageSkills" />
              <van-cell title="电脑操作" :value="detail.computerSkills" />
              <van-cell title="其他要求" :value="detail.otherQualifications" />
            </van-collapse-item>
            <van-collapse-item title="其他" name="3">
              <van-cell title="是否简历筛选" :value="selectDictLabel(yes_no, detail.filterCvFlag)" />
            </van-collapse-item>
          </van-collapse>
          <FlowTimeline :node-data="nodeData" />
        </van-tab>
        <van-tab name="1" title="面试人员">
          <ListItemEmployees
            :list="detail.needsCvs"
            :sys_user_sex="sys_user_sex"
            :sys_educational_background="sys_educational_background"
            :cv_record_status="cv_record_status"
            @on-detail="onDetailEmployees" />
        </van-tab>
      </van-tabs>
    </div>
    <DetailEmployees
      v-show="active === '2'"
      :political_status="political_status"
      :yes_no="yes_no"
      :sys_need_marital_status="sys_need_marital_status"
      :sys_user_sex="sys_user_sex"
      :sys_educational_background="sys_educational_background"
      :cv_record_status="cv_record_status"
      :detail="employeesDetail"
      @back="onBack" />
  </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;
      white-space: pre-wrap;
      word-break: break-word;
    }
  }
}

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

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

.list {

}
</style>
