<template>
  <div class="top">
    <div class="d-flex">
      <div class="font-weight-bold position-category-left">职位类别：</div>
      <div class="position-category-right">
        <span 
          :class="['category-item', {'default-active': k.active}]" 
          v-for="k in positionCategory" 
          :key="k.id"
          @mouseenter="k.active = true"
          @mouseleave="k.active = false"
        >{{ k.id === '-1' ? `${k.label}` : `${k.label} (${k.number})` }}</span>
      </div>
    </div>
    <div class="d-flex mt-3">
      <areaType v-if="areaList.length" :list="areaList"></areaType>
      <expType></expType>
      <educationType></educationType>
      <payScope></payScope>
      <div style="width: 200px;">
        <v-text-field  variant="outlined" placeholder="请输入职位名称" hide-details>
          <template #append-inner>
            <v-btn color="primary" size="x-small">搜索</v-btn>
          </template>
        </v-text-field>
      </div>
    </div>
  </div>
  <v-divider class="mt-5"></v-divider>
  <div class="bottom mt-4">
    <div 
      v-for="(val, i) in list" 
      :key="i" 
      :class="['bottom-item', {'border-bottom-dashed': i !== list.length -1}, 'd-flex', 'justify-space-between', 'cursor-pointer']" 
      @mouseenter="val.active = true"
      @mouseleave="val.active = false"
      @click="handlePosition(val)"
    >
      <div>
        <p :class="['name', {'default-active': val.active }]">{{ val.name }}</p>
        <div style="line-height: 40px;">
          <span v-for="k in desc" :key="k.mdi" class="mr-5">
            <v-icon color="#666" size="15">{{ k.mdi }}</v-icon>
            <span class="ml-1 tag-text">{{ val[k.value] }}</span>
          </span>
        </div>
      </div>
      <div v-if="!val.active" class="text-right">
        <p class="salary">{{ val.payFrom }}-{{ val.payTo }}k/{{ val.payName }}</p>
        <div class="update-time">{{ timesTampChange(val.updateTime) }} 刷新</div>
      </div>
      <div v-else class="account-info">
        <v-avatar image="https://cdn.vuetifyjs.com/images/john.jpg"></v-avatar>
        <span class="account-label">陈北方 · 人事经理</span>
        <span>
          <v-btn class="half-button" color="primary" size="small">立即沟通</v-btn>
        </span>
      </div>
    </div>
    <MPagination
      :total="total"
      :page="pageInfo.current"
      :limit="pageInfo.size"
      @handleChange="handleChangePage"
    ></MPagination>
  </div>
</template>

<script setup>
defineOptions({ name: 'recruitment-positions'})
import { ref } from 'vue'
import { timesTampChange } from '@/utils/date'
import { getDict } from '@/hooks/web/useDictionaries'
import { getJobAdvertisedPositionCount, getJobAreaByEnterpriseId } from '@/api/position'
import MPagination from '@/components/CtVuetify/CtPagination'
import expType from '@/views/recruit/position/components/conditionFilter/expType.vue'
import educationType from '@/views/recruit/position/components/conditionFilter/educationType.vue'
import payScope from '@/views/recruit/position/components/conditionFilter/payScope.vue'
import areaType from '@/views/recruit/position/components/conditionFilter/areaType.vue'

const props = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})

const total = ref(12)
const pageInfo = ref({
  size: 3,
  current: 1
})

const handleChangePage = (index) => {
  console.log(index, 'handle-page')
}

const handlePosition = (val) => {
  window.open(`/recruit/position/details/${val.positionId}`)
}

// 行业列表
const industryList = ref([])
const getDictData = async () => {
  const { data } = await getDict('menduner_industry_type', {}, 'industryList')
  industryList.value = data
}
getDictData()

// 职位类别&工作地点
const positionCategory = ref([])
const areaList = ref([])
const getData = async () => {
  const data = await getJobAdvertisedPositionCount({ enterpriseId: props.info.enterprise.id })
  areaList.value = await getJobAreaByEnterpriseId({ enterpriseId: props.info.enterprise.id })
  const list = data.map(val => {
    const value = industryList.value.find(e => Number(e.id) === Number(val.key))
    return { id: value.id, label: value.nameCn, number: val.value, active: false }
  })
  positionCategory.value = [{ id: '-1', label: '全部', active: true }, ...list]
}
getData()

const list = ref([
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false,
    positionId: 4
  },
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false,
    positionId: 4
  },
  {
    name: '产品经理',
    payFrom: 6,
    payTo: 11,
    payName: '月',
    updateTime: 1716175909224,
    areaName: '广州',
    eduName: '本科',
    expName: '1-3年',
    active: false,
    positionId: 4
  }
])
const desc = [
  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
  { mdi: 'mdi-school-outline', value: 'eduName' },
  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
]
</script>

<style scoped lang="scss">
.bottom-item {
  width: 100%;
  height: 68px;
  margin-bottom: 12px;
}
.name {
  position: relative;
  max-width: 200px;
  margin-right: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.salary {
  font-size: 16px;
  font-weight: 700;
  color: #fe574a;
  line-height: 22px;
  flex: none;
}
.tag-text {
  color: #222;
  font-size: 14px;
}
.update-time {
  color: #666;
  font-size: 14px;
  line-height: 40px;
}
.account-info {
  line-height: 52px;
  .account-label {
    color: #666;
    font-size: 14px;
    font-weight: 600;
    margin: 0 10px;
  }
}
.position-category-left {
  width: 80px;
}
.position-category-right {
  flex: 1;
}
.category-item {
  margin-right: 20px;
  font-size: 15px;
  color: #888;
  font-weight: 600;
  cursor: pointer;
}
:deep(.v-field__input) {
  height: 28px;
  padding: 0 0 0 10px;
  font-size: 12px;
  min-height: 28px;
}
</style>
