<template>
  <div class="resume">
    <search
      v-if="filterShow"
      placeholder="请输入学校"
      style="margin-bottom: 24px"
      @search-change="searchChange"
    />
    <div v-if="filterShow" class="resume-filter">
      <div v-for="item in list" :key="item.name" class="filter-item">
        <div v-if="item.name === '学历要求'">
          <span class="filter-title">{{ item.name }}</span>
          <span
            v-for="col in informationData?.Degree2"
            :key="col.FENTRYID"
            class="filter-item-label"
            :class="queryList.FEducationBackground === col.FENTRYID ? 'filter-item-active' : ''"
            @click="filterChange(col.FENTRYID)"
            >{{ col.FDATAVALUE }}</span
          >
        </div>
        <div v-if="item.name === '经验要求'">
          <span class="filter-title">{{ item.name }}</span>
          <span
            v-for="col in informationData?.Experience"
            :key="col.FENTRYID"
            class="filter-item-label"
            :class="queryList.FEducationBackground === col.FENTRYID ? 'filter-item-active' : ''"
            >{{ col.FDATAVALUE }}</span
          >
        </div>
        <div v-if="item.name === '其他要求'" class="flx-align-center">
          <span class="filter-title">{{ item.name }}</span>
          <customSelect
            v-for="(col, cIndex) in filterList"
            :key="cIndex"
            v-model="queryList[col.prop]"
            :name="col.name"
            :list="col.list"
            @change="selectChange($event, cIndex)"
          />
        </div>
      </div>
      <div class="clear-filter">
        <span>清空筛选</span>
      </div>
    </div>
    <div v-loading="loading" class="resume-list">
      <div v-if="resumeSearchList.length">
        <div v-for="item in resumeSearchList" :key="item.FID" class="resume-item">
          <div style="display: flex; padding: 20px 0 20px 40px">
            <div class="flx-center-column">
              <el-avatar :src="baseURL + '/' + item.FPHOTOS" style="width: 64px; height: 64px" />
              <div class="salary">{{ item.FExpectSalary }}</div>
            </div>
            <div class="user-info">
              <div class="user-name">{{ item.FName }}</div>
              <div style="margin: 10px 0">
                <span>{{ item.Age }}岁</span>
                <el-divider direction="vertical" />
                <span>{{ item.FSEX == '0' ? '男' : '女' }}</span>
                <el-divider direction="vertical" />
                <span>{{
                  item.FGoWorkCount
                    ? item.FGoWorkCount < 10
                      ? `${item.FGoWorkCount}年`
                      : '10年以上'
                    : ''
                }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.FEDUCATIONBACKGROUND }}</span>
                <el-divider direction="vertical" />
                <span>{{ selectDepartRemain(item.FDepartRemain) }}</span>
              </div>
              <div class="flx-justify-between" style="width: 838px; align-items: start">
                <p v-show="filterShow">{{ item.FPersonalStrengths }}</p>
                <div v-show="filterShow" class="flx-direction-column" style="font-size: 14px">
                  <div class="flx-align-center" style="margin-bottom: 6px">
                    <div style="color: #999999">职位：</div>
                    <span>{{ item.Zwdata?.[0]?.FCompanyName }}</span>
                    <div class="round" />
                    <span>{{ item.Zwdata?.[0]?.FPosition }}</span>
                  </div>
                  <div class="flx-align-center">
                    <div style="color: #999999">院校：</div>
                    <span>{{ item.Jydata?.slice(-1)[0]?.FLEARNINGNAME }}</span>
                    <div class="round" />
                    <spa>{{ item.Jydata?.slice(-1)[0]?.FSPECIALTY }}</spa>
                  </div>
                </div>

                <div v-show="!filterShow">
                  <span style="color: #999999">期望：</span>
                  <span>{{ item.FDESIREDPOSITION }}</span>
                </div>
                <div v-show="!filterShow">
                  <div
                    v-for="(col, cIndex) in item.Zwdata || []"
                    :key="cIndex"
                    class="flx-align-center"
                    style="width: 400px"
                  >
                    <div style="width: 90px; margin-right: 12px">
                      {{
                        `${Math.floor(col.FGoWorkCount / 12)}年${
                          col.FGoWorkCount % 12 === 0 ? '' : ' ' + (col.FGoWorkCount % 12) + '个月'
                        }`
                      }}
                    </div>
                    <span>{{ col.FCompanyName }}</span>
                    <div class="round" />
                    <spa>{{ col.FPosition }}</spa>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="flx-direction-column"
            style="padding: 14px 40px 14px 0; justify-content: center"
          >
            <!-- <div class="resume-btn flx-center">简历待定</div> -->
            <div class="resume-btn flx-center" @click="talentPool('G', item.FID)">人才库</div>
            <div class="resume-btn flx-center" @click="talentPool('H', item.FID)">人才储备</div>
          </div>
        </div>
        <customPagination
          :pageSize="queryList.pageSize"
          :pageIndex="queryList.pageIndex"
          :total="queryList.total"
          @current-change="currentChange"
        />
      </div>
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import { jobStatus } from '../config'
import { getInformation } from '@/services/api/common'
import { getResumeSearch, setTalentPool } from '@/services/api/recruitmentManagement'
import customPagination from '@/components/customPagination.vue'
import search from '@/components/search.vue'
import customSelect from '@/components/customSelect.vue'

defineProps({
  filterShow: {
    type: Boolean,
    default: true
  }
})

const list = [
  { name: '学历要求' },
  // { name: '院校要求' },
  // { name: '经验要求' },
  { name: '其他要求' }
]

const loading = ref(true)

const queryList: any = ref({
  pageIndex: 1,
  pageSize: 10,
  KeyStr: '', //搜索关键词（院校名称）
  FEducationBackground: '', //学历要求
  FSex: '', //性别
  FDepartRemain: '', //在职求职状态
  SalaryRange: '',
  total: 0
})

const resumeSearchList = ref([] as any)
const informationData = ref()
const filterList = ref([
  {
    name: '性别',
    prop: 'FSex',
    list: [
      { FDATAVALUE: '男', FENTRYID: '0' },
      { FDATAVALUE: '女', FENTRYID: '1' }
    ]
  },
  {
    name: '薪资区间',
    list: [],
    prop: 'SalaryRange'
  },
  {
    name: '求职状态',
    list: [
      { FDATAVALUE: '离职求职中', FENTRYID: '0' },
      { FDATAVALUE: '在职求职中', FENTRYID: '1' },
      { FDATAVALUE: '在职考虑中', FENTRYID: '2' },
      { FDATAVALUE: '待业', FENTRYID: '3' }
    ],
    prop: 'FDepartRemain'
  }
])

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

const searchChange = (searchValue: string) => {
  if (!searchValue) return
  queryList.value.KeyStr = searchValue
  init()
}

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

const talentPool = async (Type: string, FID: number) => {
  const res: any = await setTalentPool({ Type, FID })
  if (res.code === 200) {
    ElNotification.success({
      title: '添加',
      message: Type === 'G' ? '添加人才库成功' : '添加人才储备成功'
    })
  }
}
const selectChange = (e: any, index: number) => {
  init()
}

const filterChange = (FENTRYID: any) => {
  queryList.value.FEducationBackground = FENTRYID
  init()
}

const init = async () => {
  loading.value = true
  const res: any = await getResumeSearch(queryList.value)
  if (res.code === 200) {
    resumeSearchList.value = res.data || []
    queryList.value.total = res.total
    loading.value = false
  }
}

const initInformation = async () => {
  const res: any = await getInformation({
    AuxiliaryS: ['SalaryRange', 'Experience', 'Degree2']
  })
  if (res.code === 200) {
    const item = { FDATAVALUE: '不限', FDESCRIPTION: '不限', FENTRYID: '' }
    res.data.SalaryRange.push(item)
    res.data.Experience.unshift(item)
    res.data.Degree2.unshift(item)
    filterList.value[1].list = res.data.SalaryRange
    informationData.value = res.data
  }
}

initInformation()

defineExpose({
  init
})
</script>

<style lang="scss" scoped>
.resume {
  display: flex;
  align-items: center;
  flex-direction: column;
  .resume-filter {
    width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px 24px;
    margin-bottom: 24px;
    .filter-item {
      font-size: 16px;
      font-weight: 400;
      color: #222222;
      margin-bottom: 16px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      box-sizing: border-box;

      .filter-title {
        font-size: 16px;
        font-weight: 400;
        color: #909090;
        margin-right: 32px;
        margin-bottom: 10px;
      }

      .filter-item-label {
        cursor: pointer;
        padding: 4px 12px;
        border-radius: 4px;
        margin-right: 16px;
      }

      .filter-item-active {
        background: #dcecff;
        color: #177cfa;
      }

      &:nth-child(3) {
        margin-bottom: 6px;
      }
    }

    .clear-filter {
      font-size: 16px;
      font-weight: 400;
      color: #666666;
      display: flex;
      justify-content: flex-end;
      cursor: pointer;
    }
  }

  .resume-list {
    width: 100%;
    .resume-item {
      margin-bottom: 16px;
      background: #ffffff;
      border-radius: 12px;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      .salary {
        background: #ff3333;
        border-radius: 28px;
        margin-top: 7px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        padding: 2px 7px;
      }

      .user-info {
        margin-left: 16px;
        color: #222222;

        .user-name {
          font-size: 18px;
          font-weight: 400;

          span {
            font-size: 16px;
          }
        }
        p {
          width: 467px;
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          line-height: 19px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .resume-btn {
        cursor: pointer;
        border-radius: 4px;
        border: 1px solid #177cfa;
        padding: 5px 17px;
        font-size: 14px;
        font-weight: 400;
        color: #177cfa;
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }
}

.round {
  width: 4px;
  height: 4px;
  background: #cccccc;
  border-radius: 50%;
  margin: 0 4px;
}
</style>
