<template>
  <div v-loading="loading" class="personal-container flx-center">
    <div class="container">
      <div class="personal-filter flx-direction-column">
        <div class="personal-header">
          <autocomplete
            ref="autocompleteRef"
            v-model:list="querySearch"
            v-model:valueKey="valueKey"
            placeholder="搜索关键字"
            style="margin-bottom: 22px"
            @search-change="searchChange"
            @query-search-async="querySearchAsync"
          />
          <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">
            <div class="personal-ct-item-tp">
              <div class="personal-ct-item-tp-lf" @click="toPositionDetail(item.FID)">
                <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" @click="toCompanyDetail(item.FirmID)">
                <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="submitResume(item.FID)">
                <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>
</template>

<script setup lang="ts">
import { filterList } from './config/index'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import { getInformation } from '@/services/api/common'
import {
  getUserPostionList,
  sendResume,
  getCompanyList
} from '@/services/api/recruitmentManagement'
import { baseURL } from '@/services'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import customSelect from '@/components/customSelect.vue'
import info from './components/info.vue'

const route = useRoute()
const router = useRouter()
const userInfoStore = useUserInfoStore()

const activeName = ref('0')
const autocompleteRef = ref()
const loading = ref(true)
const filterLoading = ref(true)
const streetList = ref([] as any)
const informationData = ref()
const querySearch = ref([])
const valueKey = ref('JobName')

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 querySearchAsync = async (searchVal: string, selectType: string) => {
  if (selectType === '1') {
    const res: any = await getUserPostionList({
      pageIndex: 1,
      pageSize: 10,
      Filter: { FNAME: searchVal }
    })
    if (res.code === 200) {
      querySearch.value = res.data || []
    }
  } else {
    const res: any = await getCompanyList({
      pageIndex: 1,
      pageSize: 10,
      Filter: { FNAME: searchVal }
    })
    if (res.code === 200) {
      querySearch.value = res.data || []
    }
  }
}

const searchChange = (searchValue: string, selectType: string) => {
  if (selectType === '1') {
    queryList.value.Filter.FNAME = searchValue
    initUserPostionList()
  } else router.push({ path: '/recruitmentManagement/seeMoreCompany', query: { searchValue } })
}

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.FEXPERIENCE = ''
  queryList.value.Filter.SalaryRange = ''
  queryList.value.Filter.FEDUCATIONALBACKGROUND = ''
  queryList.value.Filter.FFINANCINGS = ''
  queryList.value.Filter.FSCALES = ''
  initUserPostionList()
}

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

// 投递简历
const submitResume = async (FID: number) => {
  const res: any = await sendResume({ JobID: FID })
  if (res.code === 200) {
    userInfoStore.personalInfo.DeliverCount = res.data.DeliverCount
    userInfoStore.personalInfo.Interiview = res.data.Interiview
    ElNotification.success({
      title: '投递简历',
      message: '投递成功'
    })
  }
}

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

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

const initUserPostionList = async () => {
  filterLoading.value = true
  let params = JSON.parse(JSON.stringify(queryList.value))
  for (const key in params.Filter) {
    if (typeof params.Filter[key] !== 'number')
      params.Filter[key] = (params.Filter[key] + '').trim()
  }
  const res: any = await getUserPostionList(params)
  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
      item.FNAME + '办'
    })
    streetList.value.unshift({
      FNAME: '全部',
      FID: '',
      active: true
    })
    if (queryList.value.Filter.FSUBSTREET) {
      streetList.value.map((item: any) => {
        if (item.FID == queryList.value.Filter.FSUBSTREET) item.active = true
        else item.active = false
      })
    }
  }
  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, street } = route.query
  autocompleteRef.value.searchValue = searchValue
  queryList.value.Filter.FNAME = searchValue || ''
  queryList.value.Filter.FSUBSTREET = Number(street) || ''
  init()
})
</script>

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