<template>
  <a-tree-select
    :model-value="modelValue"
    @update:model-value="onUpdate"
    :data="gameListTree"
    tree-checked-strategy="child"
    :tree-checkable="multiple"
    :max-tag-count="2"
    :fieldNames="{ title: 'name', key: 'id' }"
    allow-search
    allow-clear
    placeholder="请选择游戏" />
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
import commonApi from '../../views/v1/api/common'

const props = defineProps({
  modelValue: {
    type: [String, Number, Array],
    default: '',
  },
  multiple: {
    type: Boolean,
    default: false,
  },
})

const emit = defineEmits(['update:modelValue', 'change'])
const onUpdate = (val) => {
  emit('update:modelValue', val)
  emit('change', val)
}
const gameListTree = ref([])

const fetchGameList = async () => {
  // 这里替换为你的实际API请求
  // const response = await api.getGameList()
  // gameListTree.value = response.data
  const response = await commonApi.getGameOptionsApi()
  gameListTree.value = response.data

  if (!props.multiple) {
    gameListTree.value = response.data.map((item) => {
      return {
        ...item,
        disabled: true,
        children: item.children || [],
      }
    })
  }
}

onMounted(fetchGameList)
</script>
