<template>
  <div v-loading="loading" class="personal-container flx-center">
    <div class="container">
      <div class="personal-filter flx-direction-column">
        <div class="personal-header">
          <search
            ref="searchRef"
            placeholder="搜索关键字"
            style="margin-bottom: 22px"
            @search-change="searchChange"
          />
          <el-tabs v-model="activeName">
            <el-tab-pane label="所属街道办" name="0"></el-tab-pane>
          </el-tabs>
          <div class="street-list">
            <el-button
              v-for="(item, index) in streetList"
              :key="index"
              :type="item.active ? 'primary' : ''"
              link
              @click="streetChange(index)"
              >{{ item.FNAME }}</el-button
            >
          </div>
          <div class="flx-justify-between">
            <div class="select-list">
              <customSelect
                v-for="(item, index) in filterList"
                :key="index"
                v-model="queryList.Filter[item.prop]"
                :name="item.name"
                :list="item.list"
                @change="selectChange($event, index)"
              />
            </div>
            <el-link class="clear-filter" :underline="false" target="" @click="clearFilter"
              >清空筛选条件</el-link
            >
          </div>
        </div>
        <div v-if="userPostionList.length" v-loading="filterLoading" class="personal-contnet">
          <div
            v-for="item in userPostionList"
            :key="item"
            class="personal-ct-item"
            @click="toPositionDetail(item.FID)"
          >
            <div class="personal-ct-item-tp">
              <div class="personal-ct-item-tp-lf">
                <div
                  :title="
                    item.JobName + [item.FWORKPLACE?.replace(/^.*?\//, '').replace(/\//g, '.')]
                  "
                  class="nowrap-ellipsis"
                  style="margin-bottom: 12px"
                >
                  {{ item.JobName }} [
                  <span>{{ item.FWORKPLACE?.replace(/^.*?\//, '').replace(/\//g, '.') }}</span>
                  ]
                </div>
                <div>
                  <div class="salary" style="font-size: 16px">
                    {{ item.FMINIMUMWAGE }}-{{ item.FMAXIMUMSALARY }}
                  </div>
                  <span class="info-label">{{ item.FEXPERIENCE }}</span>
                  <span class="info-label">{{ item.FEDUCATIONALBACKGROUND }}</span>
                </div>
              </div>
              <div class="personal-ct-item-tp-ct">
                <img
                  :src="baseURL + '/' + item.FLOGO"
                  width="54"
                  height="54"
                  style="margin-right: 12px"
                />
                <div class="flx-column-start-between">
                  <div class="company-name nowrap-ellipsis">{{ item.FirmName }}</div>
                  <div>
                    <span class="info-label">{{ item.FINDUSTRY }}</span>
                    <span class="info-label">{{ item.FFINANCINGS }}</span>
                    <span class="info-label">{{ item.FSCALES }}</span>
                  </div>
                </div>
              </div>
              <div class="personal-ct-item-tp-bt" @click.stop="handleDeliver">
                <span>投递</span>
              </div>
            </div>
            <div class="personal-ct-item-bt flx-align-center">
              <div class="nowrap-ellipsis" style="width: 380px; margin-right: 36px; display: flex">
                <div
                  v-for="(col, cIndex) in item.FJOBKEYWORDS.filter((item: any, i: number) => i < 5)"
                  :key="cIndex"
                  style="white-space: nowrap"
                >
                  <span>{{ col }}</span>
                  <el-divider
                    v-show="
                      cIndex !==
                      item.FJOBKEYWORDS.filter((item: any, i: number) => i < 5).length - 1
                    "
                    direction="vertical"
                  />
                </div>
              </div>
              <p class="nowrap-ellipsis">
                {{ item.FCORPORATEWELFARE }}
              </p>
            </div>
          </div>
          <div style="text-align: center; margin-top: 8px">
            <span v-if="queryList.pageSize < total" class="n-more" @click="seeMore">查看更多</span>
            <span v-else class="n-more" style="cursor: not-allowed">没有更多了</span>
          </div>
        </div>
        <el-empty v-else description="暂无数据" />
      </div>
      <info />
    </div>
  </div>
  <dragUpload v-model:show="dragShow" />
</template>

<script setup lang="ts">
import { filterList } from './config/index'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import { getInformation } from '@/services/api/common'
import { getUserPostionList } from '@/services/api/recruitmentManagement'
import { baseURL } from '@/services'
import search from '@/components/search.vue'
import customSelect from '@/components/customSelect.vue'
import dragUpload from '@/components/dragUpload.vue'
import info from './components/info.vue'
import router from '@/routers'

const route = useRoute()

const activeName = ref('0')
const searchRef = ref()
const loading = ref(true)
const filterLoading = ref(true)
const dragShow = ref(false)
const streetList = ref([] as any)
const informationData = ref()

const queryList = ref({
  pageIndex: 1,
  pageSize: 10,
  Filter: {
    //传id
    FNAME: '', //标题
    FSUBSTREET: '', //街道
    FEXPERIENCE: '', //经验
    SalaryRange: '', //薪资范围
    FEDUCATIONALBACKGROUND: '', //学历
    FSCALES: '', //规模
    FFINANCINGS: '' //融资情况
  } as any
})
const total = ref(0)

const userPostionList: any = ref([])

const searchChange = (searchValue: string) => {
  queryList.value.Filter.FNAME = searchValue
  initUserPostionList()
}

const streetChange = (index: number) => {
  queryList.value.Filter.FSUBSTREET = streetList.value[index].FID
  streetList.value.map((item: any, i: number) => {
    if (i === index) item.active = true
    else item.active = false
  })
  initUserPostionList()
}

const selectChange = (e: any, index: number) => {
  initUserPostionList()
}

const clearFilter = () => {
  queryList.value.Filter = {
    FNAME: queryList.value.Filter.FNAME, //标题
    FSUBSTREET: '', //街道
    FEXPERIENCE: '', //经验
    SalaryRange: '', //薪资范围
    FEDUCATIONALBACKGROUND: '', //学历
    FSCALES: '', //规模
    FFINANCINGS: '' //融资情况
  }
  initUserPostionList()
}

const seeMore = () => {
  queryList.value.pageSize += 10
  initUserPostionList()
}

const handleDeliver = () => {
  dragShow.value = true
}

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

const initUserPostionList = async () => {
  filterLoading.value = true
  const res: any = await getUserPostionList(queryList.value)
  if (res.code === 200) {
    loading.value = false
    filterLoading.value = false
    userPostionList.value = res.data || []
    total.value = res.total
  }
}

const init = async () => {
  const street: any = await getStreet()
  if (street.code === 200) {
    streetList.value = street.data.sort((a: any, b: any) => a.FSERIALNUMBER - b.FSERIALNUMBER)
    streetList.value.map((item: any, i: number) => {
      item.active = false
      const result = item.FNAME.match(/(.+)专题/)
      result && result.length > 1 ? (item.FNAME = result[1] + '办') : ''
    })
    streetList.value.unshift({
      FNAME: '全部',
      FID: ' ',
      active: true
    })
  }
  const res: any = await getInformation({
    AuxiliaryS: ['Experience', 'SalaryRange', 'Degree2', 'Member', 'Financing']
  })
  if (res.code === 200) {
    informationData.value = res.data
    const item = { FDATAVALUE: '不限', FDESCRIPTION: '不限', FENTRYID: ' ' }
    res.data.Experience.push(item)
    res.data.SalaryRange.push(item)
    res.data.Degree2.push(item)
    res.data.Member.push(item)
    res.data.Financing.push(item)
    filterList.value[0].list = res.data.Experience
    filterList.value[1].list = res.data.SalaryRange
    filterList.value[2].list = res.data.Degree2
    filterList.value[3].list = res.data.Member
    filterList.value[4].list = res.data.Financing
  }
  await initUserPostionList()
}

onMounted(() => {
  const { searchValue } = route.query
  searchRef.value.searchValue = searchValue
  init()
})
</script>

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