<template>
  <div>
    <el-tree v-loading="treeDlgLoading"
      :data="branches"
      :render-content="renderContent"
      :props="defaultProps"
      node-key="branchInnerCode"
      :expand-on-click-node="false"
      :show-checkbox="showCheckBox"
      :default-expand-all="true"
      :default-checked-keys="defaultChecked"
      :highlight-current="true"
      :check-strictly="true"
      @check-change="getCheckChange"
      ref="tree">
    </el-tree>
  </div>
</template>
<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      treeDlgLoading: false,
      branches: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      clientHeight: document.documentElement.clientHeight - 350
    }
  },
  methods: {
    renderContent: function(createElement, { node, data, store }) {
      let params = {
        h: createElement,
        treeObj: { node, data, store }
      }
      return util.renderTreeContent(params)
    },
    getCheckChange(data, checked, indeterminate) {
      let checkedNodes = this.$refs.tree.getCheckedNodes()
      this.$emit('getCheckedNodes', checkedNodes)
    },
    async loadBranches() {
      this.treeDlgLoading = true
      let branchesResp = await axios.get('/ui/branches')
      this.treeDlgLoading = false
      this.branches = branchesResp.data.data
    }
  },
  created() {
    this.loadBranches()
  },
  props: {
    showCheckBox: Boolean,
    defaultChecked: Array
  }
}
</script>

<style scoped>

</style>
