<template>
  <a-cascader :value="selectValue" :options="mccList" :getPopupContainer="(triggerNode) => (triggerNode.parentElement)" placeholder="选择行业编码" @change="changeFunc" />
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue'
import mccJSON from './mccRyx.json'

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

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

// 行业列表
let mccList = computed(() => {

  if(mccJSON[props.operationalType]){
    if(mccJSON[props.operationalType].children){
      console.log(mccJSON[props.operationalType].children,'mccJSONpropsoperationalTypechildren')
      return  mccJSON[props.operationalType].children
    }
  }

  return []
  // return mccJSON[props.operationalType].children
})


// 计算属性 
const selectValue = computed(() => {
  if (props.value){
    console.log(props,'propsprops')
    return [queryOne(props.value), props.value]
  }
  return null
})

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

// 查找一级分类
function queryOne(val){
  let result = mccList.value.filter( (v) => {
    if(v.children){
      return v.children.filter( (v2) => v2.value == val).length > 0
    }
    return false
  })

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

</script>

