<template>
  <commonStyle v-if="show" :btnTitle="title" :closeOnContentClick="props.isSingle">
    <v-list>
      <v-list-item
        color="primary"
        :active="selectedItems.includes(item.value)"
        v-for="item in items" :key="item.id" :value="item.value"
        @click="handle(item.value)"
      >
        <template v-if="selectedItems.includes(item.value)" 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-expType'})
const emits = defineEmits(['inputChange'])
const query = inject('routeQuery')
const props = defineProps({
  isSingle: {
    type: Boolean,
    default: false
  },
  positionIndexPage: { // 职位检索
    type: Boolean,
    default: false
  }
})
const title = ref('工作经验')
const show = ref(false)
let items = ref()
const selectedItems = ref([])

getDict('menduner_exp_type').then(({ data }) => {
  data = data?.length && data || []
  items.value = data
  if (query && query.expType) {
    const str = query.expType.split(',')[0]
    const arr = str.split('_')
    if (arr?.length) {
      selectedItems.value = arr
      title.value = selectedItems.value.length ? `工作经验(${selectedItems.value.length})` : '工作经验'
      if (!props.positionIndexPage) emits('inputChange', { values: selectedItems.value, isEmit: true })
    }
  }
  show.value = true
})
const handle = (val) => {
  const obj = selectedItems.value.find(e => e === val)
  if (props.isSingle) {
    // 单选
    selectedItems.value = obj ? [] : [val]
  } else {
    // 多选 
    if (obj) {
      // 已存在的再次选中就取消掉
      selectedItems.value = selectedItems.value.filter(i => i !== val)
    } else {
      // 不存在
      if (val === '2') selectedItems.value = [val] // 选中经验不限时清空其它选中项
      else selectedItems.value.push(val)
      // 当经验不限已存在时还选中其它项，把经验不限给清掉
      if (val !== '2' && selectedItems.value.find(k => k === '2')) selectedItems.value = selectedItems.value.filter(i => i !== '2')
    }
  }
  title.value = selectedItems.value.length ? `工作经验(${selectedItems.value.length})` : '工作经验'
  if (props.positionIndexPage) emits('inputChange', selectedItems.value)
  else emits('inputChange', { values: selectedItems.value, isEmit: true })
}
</script>

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