<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]"
          is-more
          @change="flexibleChange"
        />
      </div>
      <el-input v-model="searchValue" placeholder="搜索关键词" @change="search">
        <template #suffix>
          <el-icon size="24" style="cursor: pointer" @click="search"><i-ep-Search /></el-icon>
        </template>
      </el-input>
      <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 } 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()

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

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

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 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) {
    console.log(res)
    flexibleData.value = res.data
    loading.value = false
    initPosition()
  }
}

init()
</script>

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