<!--
  省市县三级联动选择 （国标）

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

<template>
  <a-cascader :value="selectValue" :options="allList" placeholder="请选择mcc" @change="changeFunc" />
  <span style="color: red;">{{ vdata.msg }}</span>
</template>
<script lang="ts" setup>
import { defineProps, computed, defineEmits, reactive } from 'vue'
import allList from './leshuaMcc.json'

const vdata = reactive({
  msg: ''
})

const props = defineProps({
    value: { type: String, default: '' }
})

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

// 计算属性 
const selectValue = computed(() => {
   if (props.value && (typeof props.value == 'string')){
    return props.value.split('_')
  }
  return null
})

// 当属性发生了变化， 需要通过函数向父组件通信 --》 父组件再通知子组件进行数据的变化。 
function changeFunc(value, selectedOptions) {
   emit('change', selectedOptions)
   emit('update:value', value[0] + '_' + value[1] + '_' + value[2])
   vdata.msg = selectedOptions[1].msg?selectedOptions[1].msg:''
}


// 递归遍历树状结构数据
function recursionTreeData(treeData, func, pid) {
    for (let i = 0; i < treeData.length; i++) {
        const item = treeData[i]
        if (func(item)) {
            return [item, pid]
        }
        if (item.children && item.children.length > 0) {
            let res = recursionTreeData(item.children, func, item.value)
            if (res) {
                return res
            }
        }
    }
}

</script>

