<template>
  <el-dialog
    :title="title"
    :visible="dialogVisible"
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <ht-tree
      :data="treeData"
      :props="defaultProps"
      :highlight-current="highlightCurrent"
      node-key="id"
      :show-checkbox="showCheckbox"
      :render-content="renderContent"
      :expand-on-click-node="expandOnClickNode"
      @node-click="handleNodeClick"
      @check="check"
      :support-filter="supportFilter"
      :default-expand-all="defaultExpandAll"
      :default-expanded-keys="defaultExpandedKeys"
      @node-expand="nodeExpend"
      @node-collapse="nodeCollapse"
      @refresh="loadData"
      ref="htTree"
    >
      <!-- 作用域插槽：插槽prop -->
      <!-- <slot slot-scope="{ node, data }" :node="node" :data="data"></slot> -->
    </ht-tree>
    <span slot="footer" class="dialog-footer" style="text-align: right;">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="dialogConfirm"
        >确认</el-button
      > 
    </span>
  </el-dialog>
</template>

<script>
import org from '@/api/org.js'
import utils from '@/hotent-ui-util.js'

export default {
  name: 'org-tree-dialog',
  props: {
    title: {
      type: String,
      default: '请选择组织'
    },
    orgTreeDialogVisible: {
      type: Boolean,
      default: false
    },
    defId: {
      type: String | Number,
      required: true
    },
    supportFilter: {
      type: Boolean,
      default: false
    },
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    defaultExpandAll: {
      type: Boolean,
      default: true
    },
    expandOnClickNode: {
      type: Boolean,
      default: true
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    renderContent: {
      type: Function
    }
  },
  data() {
    return {
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      defaultExpandedKeys: ['0'],
      org: {
        id: '',
        name: '',
        parentOrgName: '',
        groupCode: '',
        orderNo: '',
        grade: '',
        demId: '',
        demCode: '',
        parentId: '',
        code: '',
        exceedLimitNum: 0,
        limitNum: 0,
        nowNum: 0
      }
    }
  },
  computed: {
    dialogVisible() {
      return this.orgTreeDialogVisible
    }
  },
  methods: {
    handleNodeClick(node) {
      this.org = node
      this.$emit('node-click', node)
    },
    check(data, checkedObj) {
      this.$emit('check', data, checkedObj)
    },
    loadData(cb) {
      var param = {
        demId: this.defId
      }
      org
        .getByParentAndDemToTree(param)
        .then(data => {
          this.treeData = utils.tile2nest(data)
        })
        .finally(() => {
          cb && cb()
        })
    },
    nodeExpend(data) {
      this.defaultExpandedKeys.push(data.id) // 在节点展开是添加到默认展开数组
    },
    nodeCollapse(data) {
      this.defaultExpandedKeys.splice(
        this.defaultExpandedKeys.indexOf(data.id),
        1
      )
    },
    handleClose() {
      this.$emit('update:orgTreeDialogVisible', false)
    },
    dialogConfirm() {
      this.$emit('org-tree-dialog-confirm', this.org)
      this.handleClose()
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>
<style lang="scss" scoped>
> .el-tree .el-tree__empty-block {
  margin: 20px 20px;  width: calc(100% - 40px);
}

> .el-tree {
  width: 100%;
}
/deep/.el-tree__wrapper {
  height: 500px;
  overflow: auto;
}
</style>