<script lang="ts" setup>
import { ref } from 'vue'
import CollapseItem from '../CollapseItem.vue'
import { useDictionary } from '@/store/modules/dictonary'

const props = defineProps<{
  value: string[] | null
  label: string
}>()

const emit = defineEmits<{
  (e: 'update:value', value: string[]): void
}>()

const checkedKeys = ref(props.value)

const configStore = useDictionary()

function onChange(value: string[]) {
  emit('update:value', value)
}
</script>

<template>
  <div class="wrapper">
    <n-collapse :default-expanded-names="['1']" arrow-placement="right">
      <CollapseItem
        v-model:checked-keys="checkedKeys" :title="label" name="1" :request="configStore.fetchRegionList"
        @update:checked-keys="onChange"
      />
    </n-collapse>
  </div>
</template>

<style lang="less" scoped>
.wrapper {
  padding: 10px;
}
</style>
