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

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

// 定义组件的传入参数 
const props = defineProps({
    value: { type: String, default: '' }
})

// emit： 向父组件进行通讯。 
const emit = defineEmits(['update:value'])

// 计算属性 
const selectValue = computed(() => {
  if (props.value){
    // 传递格式：【一级分类_二级分类】
    if (props.value.indexOf('_') > 0) {
      return props.value.split('_')
    }else {
      // 只有二级分类value，先查找一级分类
      return Array.of(findByChildrenValue(props.value), props.value)
    }
   }
  return null
})

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

// 只有二级分类value，先查找一级分类
function findByChildrenValue(childrenValue) {
  let result = allList.filter(i => {
    if (i.children) {
      return i.children.some(children => {
        return children.value == childrenValue
      })
    }
  })

  return result.length > 0 ? result[0].value : null
}
</script>

