<template>
  <commonStyle :btnTitle="title" v-if="show">
    <v-list :items="items">
      <v-list-item
        color="primary"
        :active="selectedItems.includes(item.id)"
        v-for="item in items" :key="item.id" :value="item.id"
        @click="handle(item)"
      > 
        <template v-if="selectedItems.includes(item.id)" v-slot:append>
          <v-icon icon="mdi-check"></v-icon>
        </template>
        <v-list-item-title>{{ item.label }}</v-list-item-title>
      </v-list-item>
    </v-list>
  </commonStyle>
</template>

<script setup>
import commonStyle from './commonStyle.vue'
import { getDict } from '@/hooks/web/useDictionaries'
import { ref, inject } from 'vue';

defineOptions({name: 'conditionFilter-area-type'})
const emits = defineEmits(['inputChange'])
const props = defineProps({
  list: Array
})

const show = ref(false)
const query = inject('routeQuery')
const title = ref('工作地点')
let items = ref()
let selectedItems = ref([])
getDict('menduner_area_type', {}, 'areaList').then(({ data }) => {
  data = data?.length && data || []
  const arr = props.list.map(e => {
    const obj = data.find(k => Number(k.id) === Number(e.key))
    if (!obj) return
    const { id, parentId, type, name: label } = obj
    return { id, label, number: e.value, parentId, type }
  })
  items.value = [{ id: -1, label: '全部' }, ...arr]
  show.value = true
})

if (query && query?.areaIds) {
    title.value = '工作地点(1)'
    selectedItems.value = [query.areaIds]
    emits('inputChange', { values: selectedItems.value })
  }

const handle = (val) => {
  const obj = selectedItems.value.includes(val.id)
  title.value = obj ? '工作地点' : (val.id === -1 ? '工作地点' : '工作地点(1)')
  selectedItems.value = obj ? [] : [val.id]
  emits('inputChange', { values: selectedItems.value })
}
</script>

<style lang="scss" scoped>
</style>
