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

<script lang="ts" setup>
import { getRegionInfo } from '@/service/index/api'
import CheckGroup from '@/pages-sub/components/check-group/CheckGroup.vue'

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

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

const handleChange = (val: any) => {
  const chooseObj = val.map((code) => regionList.value.find((item) => item.code === code))

  emits(
    'changeName',
    chooseObj.map((item) => item.name),
  )
  emits('change', val)
  emits('changeObj', chooseObj)
}
</script>
