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

import mccCompany from './mccKqCompany.json'
import mccIndividual from './mccKqIndividual.json'
import mccMirco from './mccKqMicro.json'

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

// 根据不同的 merchantType 选择对应的 options
const selectedOptions = computed(() => {
  switch (props.merchantType) {
    case 1:
      return mccMirco
    case 2:
      return mccIndividual
    case 3:
    default:
      return mccCompany
  }
})

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

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

  return null
})

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

// 查找一级分类
function queryOne(val) {
  // debugger;
  let allList
  console.log(props.merchantType,'')
  switch (props.merchantType) {
    case 1:
      allList = mccMirco
      break;
    case 2:
      allList = mccIndividual
      break;
    case 3:
      allList = mccCompany
      break;
  }

  let result = allList.filter((v) => {
    // debugger;
    if (v.children) {
      return v.children.filter((v2) => v2.value == val).length > 0
    }
    return false
  })

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

</script>

