<template>
  <div v-loading="loading" class="detail-container flx-center">
    <div class="container">
      <div class="detail-filter">
        <div class="detail-header">
          <div class="company-info">
            <div style="display: flex">
              <img
                src="@/assets/img/icon-can.png"
                width="96"
                height="96"
                style="border-radius: 8px; margin-right: 26px"
              />
              <div class="flx-column-start-between" style="justify-content: space-evenly">
                <div class="position-name">公司名称</div>
                <div class="flx-align-center">
                  <span>融资情况</span>
                  <el-divider direction="vertical" style="border-left: 1px solid #274e80" />
                  <span>公司规模</span>
                  <el-divider direction="vertical" style="border-left: 1px solid #274e80" />
                  <span>公司类型</span>
                </div>
              </div>
            </div>
            <div style="margin-top: 17px">
              <span style="font-size: 60px; margin: 4px 6px 0 0">20</span>
              <span>在招职位</span>
            </div>
          </div>
          <div class="company-switch">
            <span
              :style="{ color: activeName ? '#177cfa' : '' }"
              style="margin-right: 64px"
              @click="activeName = true"
              >公司简介</span
            >
            <span :style="{ color: activeName ? '' : '#177cfa' }" @click="activeName = false"
              >招聘职位(20)</span
            >
          </div>
        </div>
        <div v-if="activeName">
          <div class="hot-position">
            <div class="flx-justify-between" style="margin-bottom: 24px">
              <span class="desc-title" style="margin-bottom: 0">热招职位</span>
              <div class="flx-align-center" style="cursor: pointer">
                <span style="font-size: 18px; color: #177cfa">查看全部20个职位</span>
                <el-icon color="#177CFA"><i-ep-CaretRight /></el-icon>
              </div>
            </div>
            <div class="position-list">
              <div v-for="item in 4" :key="item" class="position-item">
                <div class="flx-justify-between" style="margin-bottom: 15px">
                  <span class="nowrap-ellipsis" style="display: inline-block; width: 135px"
                    >软件测试 (学信网软件测asdasdas试)</span
                  >
                  <span style="font-size: 18px; color: #ff3333">11-15K</span>
                </div>
                <div>
                  <span class="position-label">深圳 福田区 新洲</span>
                  <span class="position-label">经验不限</span>
                </div>
              </div>
            </div>
          </div>
          <div class="company-info">
            <span class="desc-title">公司福利</span>
            <div style="margin-top: 24px">
              <span class="position-label">深圳 福田区 新洲</span>
              <span class="position-label">经验不限</span>
              <span class="position-label">经验不限</span>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="position-type">
            <div style="display: flex; margin-bottom: 16px">
              <span class="desc-title" style="margin-bottom: 0; width: 72px">职位类型</span>
              <div class="type-list">
                <span class="type-item">全部(20)</span>
                <span class="type-item">运营(1)</span>
                <span class="type-item">销售(9)</span>
                <span v-for="item in 20" :key="item" class="type-item">咨询(10)</span>
              </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>
    </div>
  </div>
</template>

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

const morePositionRef = ref()
const loading = ref(false)
const activeName = ref(false)
const filterList = ref([
  {
    name: '工作经验',
    prop: 'FEXPERIENCE',
    list: []
  },
  {
    name: '薪资待遇',
    list: [],
    prop: 'SalaryRange'
  },
  {
    name: '学历要求',
    list: [],
    prop: 'FEDUCATIONALBACKGROUND'
  }
])
const queryList = ref({
  pageIndex: 1,
  pageSize: 10,
  Filter: {
    //传id
    FNAME: '', //标题
    FEXPERIENCE: '', //经验
    SalaryRange: '', //薪资范围
    FEDUCATIONALBACKGROUND: '' //学历
  } as any
})

const positionList = ref([] as any)
const informationData = ref()

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

const init = async () => {
  const res: any = await getInformation({
    AuxiliaryS: ['Experience', 'SalaryRange', 'Degree2']
  })
  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)
    filterList.value[0].list = res.data.Experience
    filterList.value[1].list = res.data.SalaryRange
    filterList.value[2].list = res.data.Degree2
    morePositionRef.value.init()
  }
}

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

<style lang="scss" scoped>
@import url(./style/companyDetail.scss);
</style>
