<script>
import instance from "dui/lib/js/request";

export default {
  name: "AiAreaTree",
  props: {
    instance: {default: () => instance},
    action: {default: "/admin/area/queryAreaByParentId"},
    rootId: String,
    value: String,
    range: {default: 5} //可选最小级别地区
  },
  model: {
    prop: "value",
    event: "input"
  },
  data() {
    return {
      areaProps: {
        label: "name",
        isLeaf: "isLeaf"
      }
    }
  },
  methods: {
    getAreas(node, resolve) {
      let id = node.data?.id
      if (node.level == 0) {
        id = this.rootId
      }
      this.getAreasByParent(id).then(resolve)
    },
    handleClick(data) {
      this.$emit("input", data.id)
    },
    getAreasByParent(id) {
      return this.instance.post(this.action, null, {
        withoutToken: !0,
        params: {id}
      }).then(res => {
        return res.data?.map(e => ({...e, isLeaf: e.type == this.range})) || []
      })
    }
  },
}
</script>

<template>
  <el-scrollbar class="AiAreaTree">
    <el-tree :load="getAreas" @node-click="handleClick" lazy :props="areaProps"/>
  </el-scrollbar>
</template>

<style scoped lang="scss">
.AiAreaTree {
  min-width: 200px;
  height: 100%;

  :deep(.el-scrollbar__wrap) {
    overflow-x: hidden;
  }

  :deep(.el-tree) {
    background-color: transparent;
  }
}
</style>
