<template>
  <div class="see-more-company">
    <div class="container">
      <div class="filter">
        <div class="filter-list">
          <div v-for="(item, index) in filterList" :key="index" class="filter-item">
            <div class="filter-label">{{ item.name }}</div>
            <div class="filter-span">
              <span
                v-for="col in item.list"
                :key="col.FENTRYID"
                :style="{ color: col.FENTRYID === queryList.Filter[item.prop] ? '#177cfa' : '' }"
                @click="filterChange(item.prop, col.FENTRYID)"
                >{{ col.FDATAVALUE }}</span
              >
            </div>
          </div>
        </div>
        <div class="filter-clear">
          <span @click="clear">清空筛选条件</span>
        </div>
        <el-autocomplete
          v-model="queryList.Filter.FNAME"
          value-key="FirmName"
          :fetch-suggestions="querySearchAsync"
          placeholder="搜索公司"
          @select="search"
          @change="search"
        >
          <template #prefix>
            <span style="padding-right: 28px">找企业</span>
          </template>
          <template #suffix>
            <el-icon size="24" style="cursor: pointer" @click="querySearchAsync"
              ><i-ep-Search
            /></el-icon>
          </template>
        </el-autocomplete>
      </div>

      <div v-if="companyList.length" v-loading="loading" class="company-content">
        <div class="company-list">
          <div v-for="item in companyList" :key="item.FirmFID" class="company-item">
            <div class="company-tp" @click="toCompanyDetail(item.FirmFID)">
              <img :src="baseURL + '/' + item.FLOGO" width="50" height="50" />
              <div class="company-tp-rg flx-column-start-between">
                <span>{{ item.FirmName }}</span>
                <div class="company-label">
                  <span>{{ item.FFINANCINGS }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FSCALES }}</span>
                  <el-divider direction="vertical" />
                  <span>{{ item.FINDUSTRY }}</span>
                </div>
              </div>
            </div>
            <div class="company-bt">
              <div class="company-position-list flx-direction-column">
                <div
                  v-for="col in item.JobS"
                  :key="col.JobFID"
                  class="company-position-item"
                  @click="toPositionDetail(col.JobFID)"
                >
                  <div class="flx-justify-between" style="margin-bottom: 22px">
                    <div
                      class="nowrap-ellipsis"
                      style="width: 207px; text-align: left"
                      :title="col.JobName"
                    >
                      {{ col.JobName }}
                    </div>
                    <div>
                      <span class="salary">{{ col.FMINIMUMWAGE }}-{{ col.FMAXIMUMSALARY }}</span>
                      <span class="monthly-pay">元/月</span>
                    </div>
                  </div>
                  <div class="hot-position-item-ft">
                    <span class="nowrap-ellipsis" :title="col.FWORKPLACE">{{
                      `${col.FWORKPLACE.split('/')[1]} ${col.FWORKPLACE.split('/')[2]} ${
                        col.FWORKPLACE.split('/')[3]
                      }`
                    }}</span>
                    <span>{{ col.FEXPERIENCE }} </span>
                    <span>{{ col.FEDUCATIONALBACKGROUND }}</span>
                  </div>
                </div>
              </div>
              <div v-if="item.JobS && item.JobS?.length" class="company-bt-btn">
                <span @click="toCompanyDetail(item.FirmFID)">点击查看更多</span>
              </div>
            </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 { getInformation } from '@/services/api/common'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import { getCompanyList } from '@/services/api/recruitmentManagement'
import { baseURL } from '@/services'
import customPagination from '@/components/customPagination.vue'

const route = useRoute()
const router = useRouter()

const queryList = ref({
  pageIndex: 1,
  pageSize: 12,
  Filter: {
    FNAME: '', //名称
    FSUBSTREET: '', //街道
    FINDUSTRY: '', //公司类型
    FSCALES: '', //公司规模
    FFINANCINGS: '' //融资情况
  } as any,
  total: 0
})

const filterList: any = ref([
  {
    name: '公司类型',
    prop: 'FINDUSTRY',
    list: []
  },
  {
    name: '所在街道办',
    list: [],
    prop: 'FSUBSTREET'
  },
  {
    name: '公司规模',
    list: [],
    prop: 'FSCALES'
  },
  {
    name: '融资情况',
    list: [],
    prop: 'FFINANCINGS'
  }
])

const loading = ref(true)
const informationData = ref()
const companyList: any = ref([])
let timeout: ReturnType<typeof setTimeout>

const filterChange = (prop: string, FENTRYID: string) => {
  queryList.value.Filter[prop] = FENTRYID
  initCompanyList()
}

const currentChange = (pageIndex: number) => {
  queryList.value.pageIndex = pageIndex
  initCompanyList()
  window.scrollTo({
    top: 0,
    behavior: 'auto' // 可选，smooth 平滑滚动效果
  })
}

const toCompanyDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/companyDetail', query: { FID } })
}

const toSeeMorePosition = () => {
  router.push({ path: '/recruitmentManagement/seeMorePosition' })
}
const toPositionDetail = (FID: number) => {
  router.push({ path: '/recruitmentManagement/positionDetail', query: { FID } })
}

const search = (item: Record<string, any>) => {
  initCompanyList()
}

const clear = () => {
  queryList.value.Filter.FINDUSTRY = ''
  queryList.value.Filter.FSCALES = ''
  queryList.value.Filter.FSUBSTREET = ''
  queryList.value.Filter.FFINANCINGS = ''
  initCompanyList()
}

const querySearchAsync = async (queryString: string, cb: (arg: any) => void) => {
  const res: any = await getCompanyList({
    pageIndex: 1,
    pageSize: 10,
    Filter: {
      FNAME: queryList.value.Filter.FNAME //名称
    }
  })
  if (res.code === 200) {
    let results = res.data || []
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      cb(results)
    }, 300)
  }
}

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

const init = async () => {
  const { searchValue } = route.query
  if (searchValue) queryList.value.Filter.FNAME = searchValue
  const res: any = await getInformation({
    AuxiliaryS: ['Trade', 'Member', 'Financing']
  })
  if (res.code === 200) {
    informationData.value = res.data
    const item = { FDATAVALUE: '不限', FENTRYID: '' }
    res.data.Trade.unshift(item)
    res.data.Member.unshift(item)
    res.data.Financing.unshift(item)
    filterList.value[0].list = res.data?.Trade || []
    filterList.value[2].list = res.data?.Member || []
    filterList.value[3].list = res.data?.Financing || []

    const street: any = await getStreet()
    if (street.code === 200) {
      street.data?.forEach((item: any) => {
        item.FDATAVALUE = item.FNAME + '办'
        item.FENTRYID = item.FID
      })
      const item = { FDATAVALUE: '全部', FENTRYID: '' }
      street.data.unshift(item)
      filterList.value[1].list = street.data || []
      initCompanyList()
    }
  }
}

init()
</script>

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