<!--
  省市县三级联动选择 （拉卡拉）

  @author xiaoyu
  @site https://www.jeequan.com
  @date 2022/01/17 19:34
-->

<template>
  <a-cascader :value="props.value" :options="allList" placeholder="选择省市县" @change="changeFunc" />
</template>
<script lang="ts" setup>
import { defineProps, onMounted, ref } from 'vue'
import { getOriginIfCode } from '../util/jeepayComponentUtil.js'

const props = defineProps({
    value: { type: Array, default: null },
    ifCode: { type: Array, default: null }
})

const allList = ref([])

onMounted(() => {
  const ifCodeView = getOriginIfCode(props.ifCode).toLowerCase()

  // 根据支付接口名称 动态引入json
  import(`./areacode${ifCodeView.charAt(0).toUpperCase() + ifCodeView.slice(1)}.json`).then((module) => {
    allList.value = module.default
  }).catch((e) => {
    console.log('省市区编码导入失败！ ', e)
  })
})

// emit 父组件使用： v-model="val" 进行双向绑定。
const emit = defineEmits(['update:value', 'change'])

// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。 
function changeFunc(value, selectedOptions){
    emit('change', selectedOptions)
    emit('update:value', value)
}

</script>

