<template>
  <div 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="filterState['selectVal' + index]"
                :name="item.name"
                :list="item.list"
              />
            </div>
            <el-link class="clear-filter" :underline="false" target="" @click="clearFilter"
              >清空筛选条件</el-link
            >
          </div>
        </div>
        <div class="personal-contnet">
          <div v-for="item in 6" :key="item" class="personal-ct-item">
            <div class="personal-ct-item-tp">
              <div class="personal-ct-item-tp-lf">
                <div style="margin-bottom: 12px">电销质培主管 [深圳·南山区·科技园]</div>
                <div>
                  <div class="salary" style="font-size: 16px">8-13K</div>
                  <span class="info-label">3-5年</span>
                  <span class="info-label">大专</span>
                </div>
              </div>
              <div class="personal-ct-item-tp-ct">
                <img
                  src="@/assets/img/icon-can.png"
                  width="54"
                  height="54"
                  style="margin-right: 12px"
                />
                <div class="flx-column-start-between">
                  <div class="company-name nowrap-ellipsis">货拉拉科技</div>
                  <div>
                    <span class="info-label">互联网</span>
                    <span class="info-label">D轮及以上</span>
                    <span class="info-label">10000人以上</span>
                  </div>
                </div>
              </div>
              <div class="personal-ct-item-tp-bt">
                <span>投递</span>
              </div>
            </div>
            <div class="personal-ct-item-bt flx-align-center">
              <div style="width: 416px">
                <span>全职</span>
                <el-divider direction="vertical" />
                <span>远程办公</span>
                <el-divider direction="vertical" />
                <span>线下办公</span>
                <el-divider direction="vertical" />
                <span>抖音</span>
                <el-divider direction="vertical" />
                <span>快手</span>
              </div>
              <p class="nowrap-ellipsis">
                交通补助，带薪年假，节日福利，员工旅游，零食下午茶，交通补助，带薪年假，节日福利，员工旅游，零食下午茶.
              </p>
            </div>
          </div>
          <div style="text-align: center; margin-top: 8px">
            <span class="n-more">查看更多</span>
          </div>
        </div>
        <!-- <el-empty description="暂无数据" /> -->
      </div>
      <div class="personal-info">
        <div class="personal-info-tp">
          <div class="personal-info-tp-lf">{{ personalInfo?.FNAME }}</div>
          <div class="personal-info-tp-rg">编辑简历</div>
        </div>
        <div class="personal-info-ct">
          <span>年龄：{{ personalInfo?.AGE }}</span>
          <span>工作年限：2年</span>
          <span>学历：{{ personalInfo?.F_LQKJ_EDUCATIONS }}</span>
        </div>
        <el-divider />
        <div class="personal-info-bt">
          <div class="personal-info-bt-item">
            <div class="personal-info-label">求职状态</div>
            <span>{{ personalInfo?.F_LQKJ_DEPARTREMAIN }}</span>
          </div>
          <div class="personal-info-bt-item">
            <div class="personal-info-label">已投递</div>
            <span>{{ personalInfo?.DeliverCount }}次</span>
          </div>
          <div class="personal-info-bt-item">
            <div class="personal-info-label">已面试</div>
            <span>{{ personalInfo?.InteriviewCount }}次</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { filterList } from './config/index'
import { useUserInfoStore } from '@/stores/modules/userInfo'
import { useGlobalStore } from '@/stores/modules/global'
import { getStreet } from '@/services/api/streetOfficeSpecialTopic'
import { getInformation } from '@/services/api/common'
import search from '@/components/search.vue'
import customSelect from '@/components/customSelect.vue'

const globalStore = useGlobalStore()
const userInfoStore = useUserInfoStore()
const route = useRoute()

const activeName = ref('0')
const searchRef = ref()
const streetActive = ref('粤海街道办')
const streetList = ref([] as any)
const informationData = ref()

const filterState: any = ref({
  selectVal: '',
  selectVal1: '',
  selectVal2: '',
  selectVal3: '',
  selectVal4: ''
})

const token = computed(() => globalStore.getToken)
const personalInfo = computed(() => userInfoStore.getPersonalInfo)

const searchChange = (searchValue: string) => {}

const streetChange = (index: number) => {
  streetActive.value = streetList.value[index].name
  streetList.value.map((item: any, i: number) => {
    if (i === index) item.active = true
    else item.active = false
  })
}

const clearFilter = () => {
  filterState.value = {
    selectVal: '',
    selectVal1: '',
    selectVal2: '',
    selectVal3: '',
    selectVal4: ''
  }
}

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) => {
      if (i === 0) 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
    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
    console.log(filterList)
  }
}

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

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