<template>
  <CheckGroup :list="regionList" @change="handleChange" label-key="simplename" v-bind="$attrs" />
</template>

<script lang="ts" setup>
import { getRegionInfo } from '@/service/index/api'
import CheckGroup from '@/pages-evaluation-sub/components/check-group/CheckGroup.vue'
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})

interface Region {
  code: string
  name: string
  parentcode: string
  simplename: string
  pinyin: string
}
const regionList = ref([])
getRegionInfo().then((res) => {
  if (res.code === 200) {
    regionList.value = res.result as Region[]
  }
})

const emits = defineEmits(['change', 'changeName'])

const handleChange = (val: any) => {
  const names = regionList.value.filter((item) => val.includes(item.code)).map((item) => item.name)
  emits('changeName', names)
  emits('change', val)
}
</script>
