<template>
  <commonStyle :btnTitle="title">
    <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-close"></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, defineEmits } from 'vue';

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

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 { id, parentId, type, name: label } = data.find(k => Number(k.id) === Number(e.key))
    return { id, label, number: e.value, parentId, type, props: { appendIcon: '' } }
  })
  items.value = [{ id: -1, label: '全部', props: { appendIcon: '' } }, ...arr]
})
const handle = (val) => {
  const obj = selectedItems.value.find(e => e === val.id)
  title.value = obj ? '工作地点' : '工作地点(1)'
  val.props.appendIcon = obj ? '' : 'mdi-check'
  selectedItems.value = obj ? [] : [val.id]
  emits('selectedItems', selectedItems.value)
}
</script>
<style lang="scss" scoped>
</style>
