<template>
  <div class="default-width">
    <div class="white-bgc py-3">
      <headSearch placeholder="搜索公司" @handleSearch="val => handleSearch(val, 'name')"></headSearch>
      <div class="px-5 mt-3 clear-parent">
        <areaType class="mb-3" :isClear="clear" @handleClick="handleSearch"></areaType>
        <industryType :isClear="clear" @handleClick="handleSearch"></industryType>
        <natureType class="my-5" :isClear="clear" @handleClick="handleSearch"></natureType>
        <scaleType :isClear="clear" @clear="clear = false" @handleClick="handleSearch"></scaleType>
        <div class="clear" @click="handleClear">清空筛选条件</div>
      </div>
    </div>
    <div v-if="items.length">
      <companyItem class="mt-3" :list="items"></companyItem>
      <MPagination
        :total="total"
        :page="query.pageNo"
        :limit="query.pageSize"
        @handleChange="handleChangePage"
      ></MPagination>
    </div>
    <Empty v-else class="mt-3"></Empty>
  </div>
</template>

<script setup>
defineOptions({name: 'retrieval-company-page'})
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getEnterpriseSearch } from '@/api/enterprise'
import { dealDictArrayData } from '@/utils/position'
import headSearch from '@/components/headSearch'
import scaleType from './components/scaleType'
import natureType from './components/natureType'
import industryType from './components/industryType'
import areaType from './components/areaType'
import companyItem from './components/companyItem'
import MPagination from '@/components/CtPagination'

const route = useRoute()
const router = useRouter()
const clear = ref(false)

const total = ref(0)
const items = ref([])
const query = ref({
  pageNo: 1,
  pageSize: 12
})

const dealRouteQuery = (data) => {
  const arr = Object.keys(data).map(e => {
    if (e !== 'pageSize' && e !== 'pageNo') {
      return Array.isArray(data[e]) ? `${e}=${data[e].join()}` : `${e}=${data[e]}`
    }
  }).filter(Boolean)
  if (!arr.length) return router.push(route.path)
  const str = arr?.join('&')
  if (str) router.push(`${route.path}?${str}`)
}

// 搜索
const handleSearch = async (val, key) => {
  if (!val) return
  query.value.pageNo = 1
  // val为-1时选择的是不限或者全国， 此时选中的字段不传
  if (val === -1 || val[0] === -1) delete query.value[key]
  else query.value[key] = val
  dealRouteQuery(query.value)
  await getCompanyData()
}

const getCompanyData = async () => {
  const { list, total: number } = await getEnterpriseSearch(query.value)
  if (!list.length) {
    list.value = []
    total.value = 0
    return
  }
  total.value = number
  items.value = dealDictArrayData([], list)
}

const handleClear = () => {
  clear.value = true
  query.value.pageNo = 1
  router.push(route.path)
  getCompanyData()
}

// 刷新页面时url中带有参数请求检索接口
if (Object.keys(route.query).length) {
  const objData = {}
  Object.keys(route.query).map(e => {
    if (e === 'areaIds' || e === 'industryIds') return objData[e] = [route.query[e]]
    else objData[e] = route.query[e]
  })
  if (Object.keys(objData).length) {
    query.value.pageNo = 1
    query.value = Object.assign(query.value, objData)
    getCompanyData()
  }
} else getCompanyData()

// 分页
const handleChangePage = (index) => {
  query.value.pageNo = index
  getCompanyData()
}
</script>

<style lang="scss" scoped>
.clear-parent {
  position: relative
}
.clear {
  position: absolute;
  bottom: 0;
  right: 30px;
  color: var(--color-999);
  font-size: 14px;
  cursor: pointer;
  &:hover {
    color: var(--v-primary-base);
  }
}
</style>