<template>
  <div v-show="personalInfo && JSON.stringify(personalInfo) !== '{}'" class="personal-info">
    <div class="personal-info-tp">
      <div class="personal-info-tp-lf">{{ personalInfo?.FNAME }}</div>
      <div class="personal-info-tp-rg" @click="toEditResume">编辑简历</div>
    </div>
    <div class="personal-info-ct">
      <span>年龄：{{ personalInfo?.AGE }}</span>
      <span>工作年限：{{ personalInfo?.FGOWORKCOUNT }}年</span>
      <span>学历：{{ personalInfo?.FEDUCATIONBACKGROUND }}</span>
    </div>
    <el-divider />
    <div class="personal-info-bt">
      <div class="personal-info-bt-item">
        <div class="personal-info-label">求职状态</div>
        <span>{{ selectDepartRemain }}</span>
      </div>
      <div class="personal-info-bt-item">
        <div class="personal-info-label">已投递</div>
        <span>{{ personalInfo?.DeliverCount }}次</span>
      </div>
      <div class="personal-info-bt-item">
        <div class="personal-info-label">已面试</div>
        <span>{{ personalInfo?.Interiview }}次</span>
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center">
      <span class="logout" @click="logout">退出登录</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useGlobalStore } from '@/stores/modules/global'
import { jobStatus } from '../config'

const globalStore = useGlobalStore()
const userInfoStore = useUserInfoStore()
const router = useRouter()

const personalInfo = computed(() => userInfoStore.getPersonalInfo)

const selectDepartRemain = computed(() => {
  let row = jobStatus.find((item: any) => item.value === personalInfo.value.FDEPARTREMAIN)
  return row ? row.label : jobStatus[3].label
})

const toEditResume = () => {
  router.push('/recruitmentManagement/editResume')
}

const logout = () => {
  userInfoStore.$reset()
  globalStore.$reset()
  router.push('/recruitmentManagement')
}
</script>

<style lang="scss" scoped>
.personal-info {
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.03);
  border-radius: 12px;
  background-color: #ffffff;
  margin-left: 24px;
  padding: 12px 20px;
  height: 210px;

  .personal-info-tp {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    .personal-info-tp-lf {
      text-align: center;
      flex: 1;
      font-size: 18px;
      font-weight: 500;
      color: #222222;
    }
    .personal-info-tp-rg {
      width: 48px;
      font-size: 12px;
      font-weight: 400;
      color: #177cfa;
      cursor: pointer;
    }
  }

  .personal-info-ct {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    span {
      margin-right: 16px;
    }
  }

  .el-divider {
    margin: 8px 0;
  }
  .personal-info-bt {
    .personal-info-bt-item {
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      .personal-info-label {
        text-align: justify;
        -moz-text-align-last: justify;
        text-align-last: justify;
        width: 64px;
        font-size: 16px;
        font-weight: 400;
        color: #222222;
        margin-right: 24px;
      }
      span {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
    }
  }

  .logout {
    cursor: pointer;
    display: block;
    width: 88px;
    height: 29px;
    background: linear-gradient(90deg, #177cfa 0%, #177cfa 100%);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: #ffffff;
    line-height: 29px;
    text-align: center;
    margin-top: 24px;
  }
}
</style>
