<template>
  <a-cascader
    :value="selectValue"
    :options="wxMccList"
    placeholder="选择微信经营类目"
    @change="changeFunc"
  />
</template>
<script lang="ts" setup>
import { defineProps, defineEmits, computed } from 'vue'
import mccJSON from './mccHmpayWx.json'

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

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

// 微信渠道经营类目列表
let wxMccList = computed(() => {
  if (props.merchantType == 1) {
    // 个人小微
    return mccJSON.smallBusinessesList
  } else if (props.merchantType == 2) {
    // 个体工商户 
    return mccJSON.individualList
  } else if (props.merchantType == 3) {
    // 企业
    return mccJSON.enterpriseList
  } else {
    return null
  }
})

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

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