<template>
  <div class="d-flex">
    <div class="label-title">公司地点</div>
    <div class="label-content">
      <span 
        v-for="k in items" 
        :key="k.id"
        :class="['label-color', {'actives': k.active}]"
        @click="handleItemClick(k)"
      >{{ k.name }}</span>
    </div>
  </div>
</template>

<script setup>
defineOptions({ name: 'search-area-type'})
import { ref, watch } from 'vue'
import { useRoute } from 'vue-router'
import { getHotArea } from '@/api/common'

const emits = defineEmits(['handleClick', 'clear'])
const props = defineProps({
  isClear: {
    type: Boolean,
    default: false
  }
})
watch(
  () => props.isClear, 
  (newVal) => {
    if (!newVal) return
    // 清空筛选条件时默认选中不限
    items.value.map(e => {
      e.active = false
      if (e.id === -1) e.active = true
      return e
    })
    emits('clear')
  }
)

const route = useRoute()
const routeQuery = route.query

const items = ref([])
const getAreaList = async () => {
  const data = await getHotArea()
  const list = data.slice(0, 13).map(e => {
    e.active = false
    return e
  })
  items.value = [{ id: -1, name: '全国', active: true }, ...list]
  // 刷新回显
  if (routeQuery.areaIds) {
    const obj = items.value.find(e => e.id === routeQuery.areaIds)
    items.value.map(e => e.active = false)
    if (obj) obj.active = true
  }
}
getAreaList()

const handleItemClick = (k) => {
  items.value.map(e => e.active = false)
  k.active = true
  emits('handleClick', [k.id], 'areaIds')
}
</script>

<style scoped lang="scss">
@import '@/styles/recruit/company.scss';
</style>
