<script setup lang="ts">
import { getDistrictTree } from '../api'
import { ref } from 'vue'

const props = defineProps({
  // 最顶级节点是否disabled
  topDisabled: {
    type: Boolean,
    default: false
  }
})

const model = defineModel()
const data = ref([])

const getDistrictTreeApi = async () => {
  const res = await getDistrictTree()
  data.value = res.data
  if (props.topDisabled) {
    res.data[0].disabled = true
  }
}
getDistrictTreeApi()
</script>

<template>
  <el-tree-select
    v-model="model"
    :data="data"
    :render-after-expand="false"
    :default-expanded-keys="['3600']"
    check-strictly
    check-on-click-node
    clearable
    :props="{
      label: 'name'
    }"
    node-key="id"
    v-bind="$attrs"
    class="min-w-180px w-100%"
  />
</template>

<style scoped lang="less"></style>
