
<!--选择幼儿园-->
<template>
  <treeselect
    v-model="localTenantId"
    class="j-tree-select"
    :multiple="false"
    :options="tenantOptions"
    :default-expand-level="10"
    :placeholder="placeholder"
    :disabled="disabled"
    :searchable="true"
    :disable-branch-nodes="true"
    search-nested
    @select="val => $emit('select', val)"
  />
</template>
<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { fetchAllTenantTree } from '@/api/system/tenant'
import options from '@/utils/dict/options'

export default {
  name: 'SelectTenantTree',
  components: { Treeselect },
  model: {
    prop: 'tenantId',
    event: 'update:tenantId'
  },
  props: {
    tenantId: {
      type: [String, Number],
      default: null
    },
    disabled: {
      type: Boolean,
      default: () => false
    },
    placeholder: {
      type: String,
      default: '请选择所属幼儿园'
    }
  },
  data() {
    return {
      tenantOptions: [] // 集团、幼儿园树结构
    }
  },
  computed: {
    localTenantId: {
      get() {
        return this.tenantId
      },
      set(val) {
        this.$emit('update:tenantId', val)
      }
    }
  },
  created() {
    this.getAllTenantTree()
  },
  methods: {
    formatTenantTree(list) {
      let obj = {}
      return list.map((item, i) => {
        delete item.children
        obj = {
          label: item.tenantName,
          isDisabled: item.tenantType === options.sysTenantTypeMap.group // 禁用集团类型
        }
        if (item.sysTenantList && item.sysTenantList.length > 0) {
          obj.children = this.formatTenantTree(item.sysTenantList)
        }
        return Object.assign({}, item, obj)
      })
    },
    getAllTenantTree() {
      fetchAllTenantTree().then(({ data }) => {
        this.tenantOptions = data && data.length > 0 ? this.formatTenantTree(data) : []
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "@/assets/styles/treeselect";
</style>
