<template>
  <div class="see-more-position">
    <div class="container">
      <div class="sell-position">
        <div class="flx-align-center">
          <span
            class="desc-title"
            :style="{ color: queryList.Filter.FNAME === '' ? '#177cfa' : '' }"
            @click="selectChange('')"
            >推荐职位</span
          >
          <div class="flx-align-center" style="cursor: pointer">
            <div
              v-for="(item, index) in expectedPositionList"
              :key="item.FDESIREDPOSITION"
              class="expected-position"
              :style="{
                borderRight: expectedPositionList.length - 1 === index ? 0 : '',
                color: queryList.Filter.FNAME === item.FDATAVALUE ? '#177cfa' : ''
              }"
              @click="selectChange(item.FDATAVALUE)"
            >
              {{ item.FDATAVALUE }}
            </div>
            <div
              v-show="!expectedPositionList.length || expectedPositionList.length > 3"
              class="flx-align-center"
              style="padding-left: 24px; border-left: 1px solid #cccccc"
              @click="toEditResume"
            >
              <el-icon style="margin: 3px 4px 0 0"><i-ep-CirclePlus /></el-icon>
              <span>添加求职期望</span>
            </div>
          </div>
        </div>
        <div class="select-list">
          <customSelect
            v-for="(item, index) in filterList"
            :key="index"
            v-model="queryList.Filter[item.prop]"
            :name="item.name"
            :list="item.list"
            @change="selectChange"
          />
        </div>
      </div>
      <morePosition
        v-if="positionList.length"
        ref="morePositionRef"
        v-loading="loading"
        :positionList="positionList"
        :queryList="queryList"
        isPositon
        @current-change="currentChange"
      />
      <el-empty v-else description="暂无数据" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getDesirePosition, getUserPostionList } from '@/services/api/recruitmentManagement'
import morePosition from './components/morePosition.vue'
import customSelect from '@/components/customSelect.vue'

const router = useRouter()
const queryList = ref({
  pageIndex: 1,
  pageSize: 6,
  Filter: {
    //传id
    FNAME: '', //标题
    FSUBSTREET: '', //街道
    FEXPERIENCE: '', //经验
    SalaryRange: '', //薪资范围
    FEDUCATIONALBACKGROUND: '', //学历
    FSCALES: '', //规模
    FFINANCINGS: '' //融资情况
  } as any,
  total: 0
})

const filterList = ref([
  {
    name: '工作经验',
    prop: 'FEXPERIENCE',
    list: []
  },
  {
    name: '薪资待遇',
    list: [],
    prop: 'SalaryRange'
  },
  {
    name: '学历要求',
    list: [],
    prop: 'FEDUCATIONALBACKGROUND'
  },
  {
    name: '公司类型',
    list: [],
    prop: 'FINDUSTRY'
  },
  {
    name: '公司规模',
    list: [],
    prop: 'FSCALES'
  }
])

const positionList = ref([] as any)
const morePositionRef = ref()
const informationData = ref()
const loading = ref(true)
const expectedPositionList = ref([] as any)

const selectChange = (FName?: string) => {
  if (FName) queryList.value.Filter.FNAME = FName
  else queryList.value.Filter.FNAME = ''
  initUserPostionList()
}

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

const toEditResume = () => {
  router.push({ path: '/recruitmentManagement/editResume', query: { addExpected: 'true' } })
}

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

const initDesirePosition = async () => {
  const res: any = await getDesirePosition()
  if (res.code === 200) {
    const { FzData, QwDat } = await res.data
    informationData.value = res.data?.FzData
    expectedPositionList.value = QwDat || []
    const item = { FDATAVALUE: '不限', FDESCRIPTION: '不限', FENTRYID: '' }
    FzData.Experience.push(item)
    FzData.SalaryRange.push(item)
    FzData.Degree2.push(item)
    FzData.Member.push(item)
    filterList.value[0].list = FzData.Experience
    filterList.value[1].list = FzData.SalaryRange
    filterList.value[2].list = FzData.Degree2
    filterList.value[3].list = FzData.Trade
    filterList.value[4].list = FzData.Member
    initUserPostionList()
    loading.value = false
    morePositionRef.value?.init()
  }
}

onMounted(() => {
  initDesirePosition()
})
</script>

<style lang="scss" scoped>
.see-more-position {
  display: flex;
  justify-content: center;
  color: #222222;
  font-size: 16px;
  margin: 24px 0;
  .container {
    width: 1316px;
    .sell-position {
      padding: 24px 20px 14px;
      background: #ffffff;
      border-radius: 12px;
      margin-bottom: 24px;
    }

    .desc-title {
      cursor: pointer;
      display: inline-block;
      font-size: 18px;
      color: #000000;
      margin-right: 16px;
    }
    .expected-position {
      padding: 0 24px;
      border-right: 1px solid #cccccc;
    }
    .select-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 24px;
    }
  }
}
</style>
