<template>
  <div class="personal-container flx-center">
    <div class="container">
      <div class="personal-filter flx-direction-column">
        <div class="personal-header">
          <search
            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.name }}</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 search from '@/components/search.vue'
import customSelect from '@/components/customSelect.vue'

const globalStore = useGlobalStore()
const userInfoStore = useUserInfoStore()
const activeName = ref('0')
const streetActive = ref('粤海街道办')
const streetList = ref([
  { name: '粤海街道办', active: true },
  { name: '南山街道办', active: false },
  { name: '南头街道办', active: false },
  { name: '西明街道办', active: false },
  { name: '招商街道办', active: false },
  { name: '桃源街道办', active: false },
  { name: '沙河街道办', active: false },
  { name: '蛇口街道办', active: false }
])

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: ''
  }
}
</script>

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