<template>
  <el-dialog
    :title="dialogTitle"
    :append-to-body="appendToBody"
    :close-on-click-modal="false"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    :destroy-on-close="destroyOnClose"
  >
    <el-scrollbar style="height:100%">
      <ht-tree
        :data="data"
        :props="props"
        :support-filter="supportFilter"
        :default-expand-all="defaultExpandAll"
        :load="load"
        :lazy="lazy"
        :show-checkbox="showCheckbox"
        :accordion="accordion"
        :node-key="nodeKey"
        :default-expanded-keys="defaultExpandedKeys"
        :highlight-current="highlightCurrent"
        :render-after-expand="renderAfterExpand"
        :render-content="renderContent"
        :check-on-click-node="checkOnClickNode"
        :auto-expand-parent="autoExpandParent"
        :check-strictly="checkStrictly"
        :current-node-key="currentNodeKey"
        :indent="indent"
        :icon-class="iconClass"
        :expand-on-click-node="expandOnClickNode"
        :default-checked-keys="defaultCheckedKeys"
        ref="htTree"
      >

      </ht-tree>
    </el-scrollbar>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onConfirm">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
const HtTree = () => import('@/components/HtTree.vue')
export default {
  name: 'ht-tree-dialog',
  components: {
    HtTree
  },
  props: {
    dialogTitle: {
      type: String,
      default: '请选择'
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    data: Array,
    load: {
      type: Function
    },
    lazy: {
      type: Boolean,
      default: false
    },
    accordion: {
      type: Boolean,
      default: false
    },
    showCheckbox: {
      type: Boolean,
      default: false
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },
    props: {
      type: Object,
      default: function() {
        return {
          children: 'children',
          label: 'label'
        }
      }
    },
    supportFilter: {
      type: Boolean,
      default: false
    },
    iconClass: {
      type: String
    },
    nodeKey: {
      type: String
    },
    defaultExpandedKeys: {
      type: Array
    },
    highlightCurrent: {
      type: Boolean,
      default: false
    },
    renderAfterExpand: {
      type: Boolean,
      default: true
    },
    renderContent: {
      type: Function
    },
    checkOnClickNode: {
      type: Boolean,
      default: false
    },
    autoExpandParent: {
      type: Boolean,
      default: true
    },
    checkStrictly: {
      type: Boolean,
      default: false
    },
    currentNodeKey: {
      type: [String, Number]
    },
    indent: {
      type: Number,
      default: 16
    },
    draggable: {
      type: Boolean,
      default: false
    },
    allowDrag: {
      type: Function
    },
    allowDrop: {
      type: Function
    },
    expandOnClickNode: {
      type: Boolean,
      default: false
    },
    defaultCheckedKeys: {
      type: Array,
      default() {
        return []
      }
    },
    // showCheck 为true时 是否只返回叶子节点
    leafOnly: {
      type: Boolean,
      default: false
    },
    // showCheck 为true时 是否只返回包含半选中的叶子节点
    includeHalfChecked: {
      type: Boolean,
      default: false
    },
    destroyOnClose: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogVisible: false,
      selectedNode: null
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    onConfirm() {
      let resultNodes = null
      if (this.$refs.htTree.showCheckbox) {
        resultNodes = this.$refs.htTree.$refs.elTree.getCheckedNodes(
          this.leafOnly,
          this.includeHalfChecked
        )
        if (!resultNodes || resultNodes.length <= 0) {
          this.$message.error('请选择')
          return
        }
      } else {
        resultNodes = this.$refs.htTree.$refs.elTree.getCurrentNode()
      }
      if (!resultNodes) {
        this.$message.error('请选择')
        return
      }
      this.dialogVisible = false
      this.$emit('onConfirm', resultNodes)
    }
  }
}
</script>

<style lang="scss" scoped>
>>> .el-dialog {
  width: 300px;
  height: 500px;
}
>>> .el-dialog__header {
  border-bottom: 1px solid darkgrey;
}
>>> .el-dialog__body {
  padding: 0px;
  height: 380px;
}
>>> .el-dialog__footer {
  position: absolute;
  text-align: center;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
>>> .el-tree {
  width: 300px;
}
>>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
