<script setup lang="ts" name="DetailEmployees">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import MyAvatar from '@/components/Avatar/MyAvatar.vue'
import UploadImage from '@/components/Upload/UploadImage.vue'
import { selectDictLabel } from '@/common/utils/ruoyi'
// import { getDeptName, getPostName } from '@/common/utils/transcoding'

/* 员工详情 */
const emit = defineEmits<{
  back: []
}>()
const props = defineProps<{
  detail: any
  yes_no: any
  sys_need_marital_status: any
  sys_user_sex: any
  sys_educational_background: any
  cv_record_status: any
  political_status: any
}>()

const router = useRouter()
const activeCollapse = ref('1')
function onBack() {
  emit('back')
}

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

<template>
  <div class="container__body container float-bottom">
    <div class="container__card flex">
      <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="props.detail?.avatar"
                  :sex="props.detail?.sex" />
                <div class="cell-top-content">
                  <div>姓名：<span class="cell-top-content-name">{{ props.detail?.name }}</span></div>
                  <div>电话：{{ props.detail?.contactInformation }}</div>
                  <div>邮箱：{{ props.detail?.email }}</div>
                </div>
              </div>
            </template>
          </van-cell>
          <van-row>
            <van-col :span="12">
              <van-field
                label-width="3rem"
                label="性别"
                readonly
                :model-value="selectDictLabel(sys_user_sex, props.detail?.sex)" />
            </van-col>
            <van-col :span="12">
              <van-field
                label-width="3rem"
                label="年龄"
                readonly
                :model-value="props.detail?.age ?? '-'" />
            </van-col>
            <van-col :span="12">
              <van-field
                label-width="6rem"
                label="婚姻状况"
                readonly
                :model-value="props.detail?.userName ?? '-'" />
            </van-col>
            <van-col :span="12">
              <van-field
                label-width="3rem"
                label="学历"
                readonly
                :model-value="selectDictLabel(sys_educational_background, detail.educationalBackground) ?? '-'" />
            </van-col>
            <van-col :span="12">
              <van-field
                label-width="6rem"
                label="政治面貌"
                readonly
                :model-value="selectDictLabel(political_status, props.detail?.politicalStatus) ?? '-'" />
            </van-col>
            <van-col :span="12">
              <van-field
                label-width="3rem"
                label="籍贯"
                readonly
                :model-value="props.detail?.nativePlace ?? '-'" />
            </van-col>
          </van-row>
          <van-cell title="毕业院校" :value="props.detail?.malaMater ?? '-'" />
          <van-cell title="专业" :value="props.detail?.major ?? '-'" />
          <van-cell title="求职岗位" :value="props.detail?.appliedPosition ?? '-'" />
          <van-cell title="招聘渠道" :value="props.detail?.needName" />
          <van-cell title="语言能力" :value="props.detail?.languageSkills" />
          <van-cell title="电脑操作" :value="props.detail?.computerSkills" />
          <van-cell title="其他资格" :value="props.detail?.otherQualifications" />
          <van-cell title="备注" :value="props.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">
          <template v-if="Array.isArray(props.detail?.cvLogs)">
            <template v-for="(item, index) in props.detail?.cvLogs" :key="index">
              <div class="cv-log-item">
                <div class="cv-log-item-row">
                  <span>操作：</span><span>{{ item.description }}</span>
                </div>
                <div class="cv-log-item-row">
                  <span>操作人：</span><span>{{ item.name }}</span>
                </div>
                <div class="cv-log-item-row">
                  <span>时间：</span><span>{{ item.createTime }}</span>
                </div>
                <div class="cv-log-item-row">
                  <span>说明：</span><span>{{ item.memo }}</span>
                </div>
              </div>
            </template>
          </template>
          <van-empty v-else description="暂无数据" />
        </van-collapse-item>
      </van-collapse>
      <van-button class="button-default float-bottom" type="default" @click="onBack">返回</van-button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.container {
  padding: 0;
  &.float-bottom {
    padding-bottom: calc(1.8rem + var(--float-button-height)) !important;
  }
}
: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;
    }
  }
}

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

.cell-top {
  display: flex;
  align-items: center;
  &-content {
    margin-left: 1.8rem;
    &-name {
      font-size: 1.6rem;
    }
  }
}

.cv-log-item {
  margin-top: 1.2rem;
  margin-bottom: 1.6rem;
  padding: var(--container-pd);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 40rpx  rgba(64, 103, 251, 0.14);
  color: #333;
  font-size: 1.4rem;
  &-row {
    display: flex;
    margin-top: 0.2rem;
    > span:nth-child(1) {
      width: 6rem;
    }
    > span:nth-child(2) {
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
