<template>
  <el-dialog :modelValue="show" title="简历预览" width="70%" :before-close="handleClose">
    <div class="resumen-content">
      <div class="resumen-content-header">
        <img :src="baseURL + '/' + data?.FPhotosUrl" />
        <div>
          <div class="resumen-content-header__tp">
            <span class="name">{{ data?.Jbdata.FName || '姓名' }}</span>
            <span>{{ data?.Jbdata.Age ? data?.Jbdata.Age + '岁' : '' }}</span>
            <el-divider v-if="data?.Jbdata.Age" direction="vertical" />
            <span>{{ data?.Jbdata.FSex === '0' ? '男' : '女' }}</span>
            <el-divider v-if="data?.Jbdata.FSex" direction="vertical" />
            <span>{{
              data?.Jbdata.FGoWorkCount
                ? data?.Jbdata.FGoWorkCount > 10
                  ? '10年以上经验'
                  : data?.Jbdata.FGoWorkCount + '年'
                : ''
            }}</span>
            <el-divider v-if="data?.Jbdata.FGoWorkCount" direction="vertical" />
            <span>{{ data?.Jbdata.FEducationBackground }}</span>
            <el-divider v-if="data?.Jbdata.FEducationBackground" direction="vertical" />
            <span>{{ selectDepartRemain(data?.Jbdata.FDepartRemain) }}</span>
          </div>
          <pre>{{ data?.Jbdata.FPersonalStrengths }}</pre>
        </div>
      </div>
      <div class="resumen-content-footer">
        <!-- 期望职位 -->
        <div v-if="data?.Qzdata?.length" style="display: flex; margin-bottom: 56px">
          <div class="resume-label">期望职位</div>
          <div class="flx-align-center">
            <span>{{ data?.Qzdata[0].FDesiredPositionName }}</span>
            <el-divider direction="vertical" />
            <span
              >{{ data?.Qzdata[0].FExpectSalaryMinName }}-{{
                data?.Qzdata[0].FExpectSalaryMaxName
              }}</span
            >
            <el-divider direction="vertical" />
            <span>{{ data?.Qzdata[0].FExpectTheIndustryName }}</span>
            <span class="round"></span>
            <span>{{ data?.Qzdata[0].FWorkCity }}</span>
          </div>
        </div>
        <!-- 工作经历 -->
        <div v-if="data?.Gzdata.length" style="display: flex; margin-bottom: 32px">
          <div class="resume-label">工作经历</div>
          <div class="flx-direction-column" style="flex: 1">
            <div v-for="item in data?.Gzdata" :key="item.FEntryID">
              <div class="flx-justify-between">
                <div class="flx-align-center" style="height: 44px">
                  <span>{{ item.FCompanyName }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FPosition }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FDepartment }}</span>
                </div>
                <span style="color: #666666"
                  >{{ dayjs(item.FStartDate).format('YYYY.MM') }}-{{
                    dayjs(item.FEndDate).format('YYYY.MM')
                  }}</span
                >
              </div>
              <pre>{{ item.FJobContent_Tag }}</pre>

              <div class="flx-align-center" style="margin: 16px 0 24px">
                <span
                  v-for="tag in item.FPossessSkills !== ' ' ? item.FPossessSkills.split(',') : []"
                  :key="tag"
                  class="tag-label"
                  >{{ tag }}</span
                >
              </div>
            </div>
          </div>
        </div>
        <!-- 项目经历 -->
        <div v-if="data?.Xmdata.length" style="display: flex; margin-bottom: 56px">
          <div class="resume-label">项目经历</div>
          <div class="flx-direction-column" style="flex: 1">
            <div v-for="item in data?.Xmdata" :key="item.FEntryID">
              <div class="flx-justify-between">
                <div class="flx-align-center" style="height: 44px">
                  <span>{{ item.FProjectName }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FProjectRole }}</span>
                </div>
                <span style="color: #666666"
                  >{{ dayjs(item.FProjectStartDate).format('YYYY.MM') }}-{{
                    dayjs(item.FProjectEndDate).format('YYYY.MM')
                  }}</span
                >
              </div>
              <pre>{{ item.FProjectDescription_Tag }}</pre>
            </div>
          </div>
        </div>
        <!-- 教育经历 -->
        <div v-if="data?.Jydata.length" style="display: flex; margin-bottom: 56px">
          <div class="resume-label">教育经历</div>
          <div class="flx-direction-column" style="flex: 1">
            <div v-for="item in data?.Jydata" :key="item.FEntryID">
              <div class="flx-justify-between">
                <div class="flx-align-center" style="height: 44px">
                  <img
                    src="@/assets/img/icon-resume5.png"
                    width="28"
                    height="28"
                    style="margin-right: 25px"
                  />
                  <span>{{ item.FLearningName }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FSpecialty }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FEducationBackgroundName }}</span>
                </div>
                <span style="color: #666666"
                  >{{ dayjs(item.FStartTime).format('YYYY.MM') }}-{{
                    dayjs(item.FEndTime).format('YYYY.MM')
                  }}</span
                >
              </div>
              <div v-show="item.FSchoolExperience_Tag" style="margin: 24px 0">
                <span style="display: block; font-size: 18px; margin-bottom: 12px">在校经历：</span>
                <pre>{{ item.FSchoolExperience_Tag }}</pre>
              </div>
            </div>
          </div>
        </div>

        <div v-if="data?.Fjdata.length" style="display: flex; margin-bottom: 56px">
          <div class="resume-label">资格证书</div>
          <div class="flx-direction-column" style="flex: 1">
            <div
              v-for="item in data?.Fjdata"
              :key="item.FEntryID"
              class="flx-align-center"
              style="height: 44px; color: #177cfa; cursor: pointer"
              @click="openFile(item)"
            >
              {{ item.FATTACHMENTNAME }}
            </div>
          </div>
        </div>
        <div v-if="data?.Jldata.length" style="display: flex; margin-bottom: 56px">
          <div class="resume-label">简历附件</div>
          <div class="flx-direction-column" style="flex: 1">
            <div
              v-for="item in data?.Jldata"
              :key="item.FEntryID"
              class="flx-align-center"
              style="height: 44px; color: #177cfa; cursor: pointer"
              @click="openFile(item)"
            >
              {{ item.FATTACHMENTNAME }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="isCompany" class="flx-center">
        <span class="btn" @click="talentStatusChange('B')">简历待定</span>
        <span class="btn" @click="talentStatusChange('C')">安排面试</span>
        <el-dropdown>
          <span class="btn">更多</span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="talentStatusChange('D')">已面试</el-dropdown-item>
              <el-dropdown-item @click="talentStatusChange('E')">已录用</el-dropdown-item>
              <el-dropdown-item @click="talentStatusChange('F')">已入职</el-dropdown-item>
              <el-dropdown-item @click="talentStatusChange('G')">人才库</el-dropdown-item>
              <el-dropdown-item @click="talentStatusChange('H')">人才储备</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </el-dialog>

  <previewFile
    v-model="state.previewFileShow"
    :suffix="state.fileSuffix"
    :url="state.fileUrl"
    :title="state.previewTitle"
  />
</template>

<script setup lang="ts">
import { jobStatus } from '../config'
import { baseURL } from '@/services'
import dayjs from 'dayjs'
import previewFile from '@/components/previewFile.vue'

const props = defineProps({
  show: {
    type: Boolean,
    defualt: false
  },
  data: {
    type: Object,
    default: () => {}
  },
  isCompany: {
    type: Boolean,
    default: false
  },
  deliverFID: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['update:show', 'status-change'])
const state = reactive({
  previewFileShow: false,
  previewTitle: '',
  fileSuffix: '',
  fileUrl: ''
})

// 设置求职状态
const selectDepartRemain = (departRemain: string) => {
  let row = jobStatus.find((item: any) => item.value === departRemain)
  return row ? row.label : jobStatus[3].label
}

const talentStatusChange = async (Type: string) => {
  emits('status-change', Type, props.deliverFID)
  handleClose()
}

// 预览文件
const openFile = (row: any) => {
  state.fileSuffix = row.FATTACHMENTNAME.split('.')[row.FATTACHMENTNAME.split('.').length - 1]
  state.fileUrl = baseURL + '/' + row.FFILEIDURL
  state.previewTitle = row.FATTACHMENTNAME.split('.')[0]
  state.previewFileShow = true
}

const handleClose = () => {
  emits('update:show', false)
}
</script>

<style lang="scss" scoped>
.resumen-content {
  padding: 0 44px;
  color: #222222;
  font-size: 16px;
  .resumen-content-header {
    display: flex;
    margin-bottom: 48px;

    img {
      width: 82px;
      height: 115px;
      margin-right: 30px;
    }
    .resumen-content-header__tp {
      display: flex;
      align-items: center;
      height: 36px;
      .name {
        font-size: 18px;
        color: #000000;
        font-weight: 500;
        margin-right: 24px;
      }
    }
    pre {
      // display: -webkit-box;
      // -webkit-line-clamp: 3;
      // -webkit-box-orient: vertical;
      // overflow: hidden;
      // text-overflow: ellipsis;
    }
  }

  .resumen-content-footer {
    .resume-label {
      width: 146px;
      min-width: 146px;
      height: 44px;
      line-height: 44px;
      text-align: center;
      box-sizing: border-box;
      background: linear-gradient(90deg, #a5cdff 0%, #177cfa 100%);
      box-shadow:
        0px 2px 2px 0px rgba(1, 80, 178, 0.18),
        inset 2px 3px 7px 0px rgba(255, 255, 255, 0.23);
      border-radius: 8px;
      font-size: 24px;
      color: #ffffff;
      margin-right: 24px;
    }
    .tag-label {
      box-sizing: border-box;
      height: 32px;
      padding: 8px 16px;
      background: #f8f8f8;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      color: #666666;
    }
  }

  .btn {
    display: inline-block;
    width: 130px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: #177cfa;
    border-radius: 4px;
    opacity: 1;
    border: 1px solid rgba(23, 124, 250, 1);
    margin-right: 48px;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }
}
pre {
  white-space: pre-wrap;
}
</style>
