<template>
  <div v-loading="loading" class="flexible-container">
    <div class="container">
      <img :src="baseURL + '/' + flexibleData?.HbData?.[0]?.FPOSTERPICTURE" height="560" />
      <div class="flexible-list">
        <flexible
          v-for="(item, index) in flexibleNameList"
          :key="index"
          :title="item.name"
          :list="flexibleData?.[item.field]"
          :params="paramsData?.[item.field]"
          is-more
          @change="flexibleChange"
          @see-more="seeMore(item.field)"
        />
      </div>
      <el-autocomplete
        v-model="searchValue"
        value-key="postName"
        :fetch-suggestions="querySearchAsync"
        placeholder="搜索职位、公司"
        @change="search"
      >
        <template #suffix>
          <el-icon size="24" style="cursor: pointer" @click="search"><i-ep-Search /></el-icon>
        </template>
      </el-autocomplete>
      <div class="hot-position">
        <el-tabs v-model="activeName" class="hot-position-tabs" stretch @tab-change="handleChange">
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            v-loading="flexibleLoading"
            :label="item.label"
            :name="item.name"
            class="hot-position-tab-pane"
          >
            <div v-if="positionList.length" class="position-list">
              <div
                v-for="col in positionList"
                :key="col.id"
                class="position-item"
                @click="toJobDetail(col)"
              >
                <div class="flx-justify-between" style="margin-bottom: 20px">
                  <div class="position-title nowrap-ellipsis">
                    {{ col.postName }}
                  </div>
                  <div>
                    <span class="salary">{{
                      col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))
                        ? col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))
                        : col.salaryRange
                    }}</span>
                    <span
                      v-show="col.salaryRange?.substring(0, col.salaryRange.indexOf('元'))"
                      class="monthly-pay"
                      >元/月</span
                    >
                  </div>
                </div>
                <div class="position-label">
                  <span>{{ col.academicRequirement }}</span>
                  <el-divider v-show="col.academicRequirement" direction="vertical" />
                  <span>{{ col.workingLife }}</span>
                  <el-divider
                    v-show="col.workingLife && col.recruitingNumbers"
                    direction="vertical"
                  />
                  <span v-show="col.recruitingNumbers">招聘{{ col.recruitingNumbers }}人</span>
                </div>
                <el-divider style="margin: 14px 0" />
                <div class="company">{{ col.customerName }}</div>
                <div class="company-label">
                  <span>{{ col.recruitingType }}</span>
                  <el-divider v-show="col.recruitingType" direction="vertical" />
                  <span v-show="col.ageRequirement">招聘{{ col.ageRequirement }}人</span>
                  <el-divider
                    v-show="col.ageRequirement && col.industryType"
                    direction="vertical"
                  />
                  <span>{{ col.industryType }}</span>
                </div>
              </div>
            </div>
            <el-empty v-else description="数据为空" />
          </el-tab-pane>
        </el-tabs>
        <span v-show="positionList.length" class="n-more">查看更多</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { baseURL } from '@/services'
import {
  getPositionList,
  getFlexibleEmploym,
  getFlexibleEmploymList
} from '@/services/api/flexibleEmploym'
import { useJobDetailStore } from '@/stores/modules/jobDetails'
import flexible from '@/views/flexibleEmploym/components/flexible.vue'

const jobDetailStore = useJobDetailStore()
const router = useRouter()
const tabsList = [
  { label: '安保', name: 0 },
  { label: '技术', name: 1 },
  { label: '餐饮', name: 2 },
  { label: '供应链', name: 3 },
  { label: '保洁', name: 4 },
  { label: '快递', name: 5 },
  { label: '促销员', name: 6 },
  { label: '店员', name: 7 },
  { label: '服务', name: 8 }
]

const listQuery = reactive({
  obj: {
    postName: tabsList[0].label
  },
  currentPage: 1,
  pageSize: 6
})

const positionList = ref([] as any)
const activeName = ref(0)
const searchValue = ref('')
const loading = ref(true)
const flexibleLoading = ref(false)
const queryList = ref({ pageIndex: 1, pageSize: 10 })
const flexibleData: any = ref({
  HbData: [],
  GgData: [],
  ZcData: [],
  XwData: []
})

const paramsData = reactive({
  GgData: { pageIndex: 1, pageSize: 0, total: 0 },
  ZcData: { pageIndex: 1, pageSize: 0, total: 0 },
  XwData: { pageIndex: 1, pageSize: 0, total: 0 }
}) as any

const flexibleNameList = [
  { name: '公告', field: 'GgData' },
  { name: '政策', field: 'ZcData' },
  { name: '新闻', field: 'XwData' }
]

let timeout: ReturnType<typeof setTimeout>

const flexibleChange = (row: any) => {
  router.push({ path: '/commonDetail', query: { FID: row.FID, FormType: 'D', FTITLE: row.FTITLE } })
}

const seeMore = (Type: string) => {
  switch (Type) {
    case 'GgData':
      if (paramsData.GgData.pageSize <= paramsData.GgData.total) {
        paramsData.GgData.pageSize += 10
        initFlexibleEmploymList({ ...paramsData.GgData, Type: 'A' })
      }
      break
    case 'ZcData':
      if (paramsData.ZcData.pageSize <= paramsData.ZcData.total) {
        paramsData.ZcData.pageSize += 10
        initFlexibleEmploymList({ ...paramsData.ZcData, Type: 'B' })
      }
      break
    default:
      if (paramsData.XwData.pageSize <= paramsData.XwData.total) {
        paramsData.XwData.pageSize += 10
        initFlexibleEmploymList({ ...paramsData.XwData, Type: 'C' })
      }
      break
  }
}

const querySearchAsync = async (queryString: string, cb: (arg: any) => void) => {
  const res: any = await getPositionList({
    obj: {
      postName: searchValue.value
    },
    currentPage: 1,
    pageSize: 10
  })
  if (res.code === 200) {
    let results = res.data.obj || []
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      cb(results)
    }, 500)
  }
}

const handleChange = (name: number) => {
  listQuery.obj.postName = tabsList[name].label
  initPosition()
}

const toJobDetail = (row: any) => {
  jobDetailStore.setJobDetail(row)
  router.push({ path: 'jobDetail' })
}

const search = () => {
  initPosition()
}

const initFlexibleEmploymList = async (params: any) => {
  const res: any = await getFlexibleEmploymList(params)
  if (res.code === 200) {
    switch (params.Type) {
      case 'A':
        flexibleData.value.GgData = res.data || []
        paramsData.GgData.total = res.total
        break
      case 'B':
        flexibleData.value.ZcData = res.data || []
        paramsData.ZcData.total = res.total
        break
      default:
        flexibleData.value.XwData = res.data || []
        paramsData.XwData.total = res.total
        break
    }
    // console.log(paramsData)
  }
}
const initPosition = async () => {
  flexibleLoading.value = true
  const res: any = await getPositionList(listQuery)
  if (res.code === 200) {
    flexibleLoading.value = false
    positionList.value = res.data.obj
  }
}

const init = async () => {
  const res: any = await getFlexibleEmploym(queryList.value)
  if (res.code === 200) {
    flexibleData.value.HbData = res.data?.HbData
    seeMore('GgData')
    seeMore('ZcData')
    seeMore('XwData')
    initPosition()
    loading.value = false
  }
}

init()
</script>

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