<template>
  <el-tabs v-model="activeName" v-loading="loading" stretch @tab-click="handleClick">
    <el-tab-pane
      v-for="(item, index) in recruitStatus"
      :key="index"
      :label="item.status + ' ' + item.value"
      :name="item.type"
    >
      <div v-if="talentList.length">
        <div v-for="col in talentList" :key="col.DeliverFID" class="tab-item">
          <div class="tab-item-tp">
            <div class="tab-item-tp-lf" @click="openResume">
              <el-avatar :src="baseURL + '/' + col.FPHOTOS" size="large" />
              <div class="user-info">
                <div>{{ col.UserName }}</div>
                <div class="flx-align-center">
                  <span>{{ col.FSEX === '0' ? '男' : '女' }}</span>
                  <el-divider direction="vertical" style="margin-bottom: 0" />
                  <span>{{ col.Age }}岁</span>
                </div>
                <div class="flx-align-center">
                  <img src="@/assets/img/icon-learn-time.png" />
                  <span style="margin-left: 3px">{{ selectDepartRemain(col.FDEPARTREMAIN) }}</span>
                </div>
                <div class="flx-align-center">
                  <img src="@/assets/img/icon-stutus.png" />
                  <span style="margin-left: 3px">{{
                    col.FGoWorkCount
                      ? col.FGoWorkCount < 10
                        ? `工作${col.FGoWorkCount}年`
                        : '10年以上经验'
                      : ''
                  }}</span>
                </div>
              </div>
            </div>
            <div class="tab-item-tp-rg">
              <div class="flx-align-center">
                <span class="info-label" @click="talentStatusChange('B', col.DeliverFID)"
                  >简历待定</span
                >
                <span class="info-label" @click="talentStatusChange('C', col.DeliverFID)"
                  >安排面试</span
                >
                <el-dropdown>
                  <span class="info-label">更多</span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="talentStatusChange('D', col.DeliverFID)"
                        >已面试</el-dropdown-item
                      >
                      <el-dropdown-item @click="talentStatusChange('E', col.DeliverFID)"
                        >已录用</el-dropdown-item
                      >
                      <el-dropdown-item @click="talentStatusChange('F', col.DeliverFID)"
                        >已入职</el-dropdown-item
                      >
                      <el-dropdown-item @click="talentStatusChange('G', col.DeliverFID)"
                        >人才库</el-dropdown-item
                      >
                      <el-dropdown-item @click="talentStatusChange('H', col.DeliverFID)"
                        >人才储备</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
              <!-- <div class="recommend flx-align-center">
              推荐指数
              <el-rate v-model="rateValue" style="margin-left: 8px" />
            </div> -->
            </div>
          </div>
          <div class="tab-item-bt flx-justify-between">
            <div>
              <span class="user-label">{{ col.FEDUCATIONBACKGROUND }}</span>
              <el-divider direction="vertical" />
              <span class="user-label">{{ col.FLEARNINGNAME }}</span>
              <el-divider direction="vertical" />
              <span class="user-label">{{ col.FSPECIALTY }}</span>
            </div>
            <div>
              <span class="user-label">{{ col.JobName }}</span>
              <el-divider direction="vertical" />
              <span class="user-label">{{ col.FDELIVERYTIME }}投递</span>
            </div>
          </div>
        </div>
        <customPagination
          :pageSize="queryList.pageSize"
          :pageIndex="queryList.pageIndex"
          :total="queryList.total"
          @current-change="currentChange"
        />
      </div>
      <el-empty v-else description="暂无数据" />
    </el-tab-pane>
  </el-tabs>
  <previewResume v-model:show="previewResumeShow" :data="resumeData" />
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { recruitStatus, jobStatus } from '../config/index'
import {
  getTalentResume,
  updateTalentResume,
  getResume
} from '@/services/api/recruitmentManagement'
import customPagination from '@/components/customPagination.vue'
import previewResume from './previewResume.vue'

const activeName = ref('A')
const loading = ref(true)
const previewResumeShow = ref(false)
// const rateValue = ref(4)
const talentList = ref([] as any)
const resumeData = ref()
const queryList = ref({
  pageIndex: 1,
  pageSize: 10,
  Type: 'A',
  total: 0
})

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

const openResume = async () => {
  loading.value = true
  const res: any = await getResume()
  if (res.code === 200) {
    resumeData.value = res.data
    previewResumeShow.value = true
  }
}

const currentChange = (pageIndex: number) => {
  queryList.value.pageIndex = pageIndex
  init()
}

const handleClick = (tab: any) => {
  queryList.value.Type = tab.props.name
  init()
}

const talentStatusChange = async (Type: string, DeliverFID: number) => {
  const data = {
    DeliverFID, //投递记录id
    Type //更改类型
  }
  const res: any = await updateTalentResume(data)
  if (res.code === 200) {
    init()
    ElMessage.success(res.msg)
  }
}

const init = async () => {
  loading.value = true
  const res: any = await getTalentResume(queryList.value)
  if (res.code === 200) {
    talentList.value = res.data?.datalist || []
    queryList.value.total = res.total
    for (const key in res.data?.StatisticsCount) {
      const item = recruitStatus.value.find((item: any) => item.type === key)
      if (item) {
        item.value = res.data?.StatisticsCount[key] + '份'
      }
    }

    loading.value = false
  }
}

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.tab-item {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 16px;

  .tab-item-tp {
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;

    .tab-item-tp-lf {
      display: flex;
      cursor: pointer;
      .user-info {
        display: flex;
        flex-direction: column;
        margin-left: 8px;
        div {
          margin-bottom: 12px;

          &:last-child {
            margin-bottom: 0;
          }
        }
        span {
          font-size: 14px;
          font-weight: 400;
          color: #666666;
        }
      }
    }

    .tab-item-tp-rg {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .recommend {
        font-size: 16px;
        font-weight: 400;
        color: #222222;
      }
      :deep(.el-dropdown) {
        line-height: normal;
      }
    }
  }
  .tab-item-bt {
    background: linear-gradient(90deg, #e3f0ff 0%, rgba(227, 240, 255, 0.15) 100%);
    border-radius: 0px 0px 12px 12px;
    padding: 15px 26px 15px 86px;

    .user-label {
      font-size: 12px;
      font-weight: 400;
      color: #666666;
    }
  }
}

:deep(.el-tabs__active-bar) {
  background: linear-gradient(90deg, #a5cdff 0%, #177cfa 100%);
}
.info-label {
  padding: 4px 8px;
  background: #c0dcff;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #177cfa;
  margin-right: 8px;
  cursor: pointer;

  &:focus {
    outline: 0 !important;
  }
}
</style>
