<template>
  <div class="flexible-container">
    <div class="container">
      <img :src="imgUrl" height="560" />
      <div class="flexible-list">
        <flexible
          v-for="(item, index) in flexibleNameList"
          :key="index"
          :title="item.name"
          :list="flexibleList"
          is-more
        />
      </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="loading"
            :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">
                <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" direction="vertical" />
                  <span>餐饮</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 { imgUrl } from '@/assets/imgUrl'
import { getPositionList } from '@/services/api/home'
import flexible from '@/views/flexibleEmploym/components/flexible.vue'

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 loading = ref(false)
const activeName = ref(0)
const searchValue = ref('')

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

const flexibleList = [
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '深圳市创业带动就业补贴办事指南' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' },
  { detail: '关于协助做好2022年农村电商“省级精英训练营”宣传发动有关工作的通知' }
]

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

const search = () => {
  init()
  // console.log(searchValue.value)
}

const init = async () => {
  loading.value = true
  const res: any = await getPositionList(listQuery)
  if (res.code === 200) {
    loading.value = false
    positionList.value = res.data.obj
  }
}
init()
</script>

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