<template>
  <div class="see-more-position">
    <div class="container">
      <div class="sell-position">
        <div class="flx-align-center">
          <span class="desc-title">推荐职位</span>
          <div class="flx-align-center" style="cursor: pointer">
            <span>测试员</span>
            <el-divider direction="vertical" />
            <span>测试员</span>
            <el-divider direction="vertical" />
            <div class="flx-align-center">
              <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($event, index)"
          />
        </div>
      </div>
      <morePosition ref="morePositionRef" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getInformation } from '@/services/api/common'
import morePosition from './components/morePosition.vue'
import customSelect from '@/components/customSelect.vue'

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

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

const selectChange = (e: any, index: number) => {}

const init = async () => {
  const res: any = await getInformation({
    AuxiliaryS: ['Experience', 'SalaryRange', 'Degree2', 'Member', 'Financing']
  })
  if (res.code === 200) {
    informationData.value = res.data
    const item = { FDATAVALUE: '不限', FDESCRIPTION: '不限', FENTRYID: ' ' }
    res.data.Experience.push(item)
    res.data.SalaryRange.push(item)
    res.data.Degree2.push(item)
    res.data.Member.push(item)
    res.data.Financing.push(item)
    filterList.value[0].list = res.data.Experience
    filterList.value[1].list = res.data.SalaryRange
    filterList.value[2].list = res.data.Degree2
    filterList.value[3].list = res.data.Member
    filterList.value[4].list = res.data.Financing
    morePositionRef.value.init()
  }
}

onMounted(() => {
  init()
})
</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 {
      display: inline-block;
      font-size: 18px;
      color: #000000;
      margin-right: 40px;
    }
    .select-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 24px;
    }
  }
}
</style>
