<template>
  <el-dialog class="x-tree-dialog" :before-close="handleBeforeClose"
             @opened="handleOpened"
             @size-change="handleResizeChange"
             append-to-body
             modal-append-to-body
             ref="dialog"
             :height="height"
             v-bind="$attrs"
             v-on="$listeners"
             :body-padding="false">
    <x-page-container class="common-page-container">
      <template v-slot:header>
        <x-button-group :button-config="buttonConfig"></x-button-group>
      </template>
      <template v-slot:sub>
        <x-condition :condition-config="conditionConfig"></x-condition>
      </template>
      <template v-slot:main>
        <el-scrollbar ref="scrollbar" v-bind="$attrs">
          <el-tree ref="tree" :highlight-current="highlightCurrent" :show-checkbox="showCheckbox" v-bind="$attrs"
                   v-on="$listeners" @node-expand="handleTreeChange" @node-collapse="handleTreeChange">
            <template v-slot:default="{node, data}">
              <slot :node="node" :data="data">
                <div class="x-tree-dialog-node" @dblclick="handleDbclick({node, data})">
                  <div>{{node.label}}</div>
                </div>
              </slot>
            </template>
          </el-tree>
        </el-scrollbar>
      </template>
    </x-page-container>
  </el-dialog>
</template>

<script>
import { Scrollbar, Tree } from 'element-ui';
import { XPageContainer, XButtonGroup, XCondition, XDialog } from '@newpearl/ui';
import * as appUtils from '../../util/appUtils';

export default {
  name: 'XTreeDialog',
  inheritAttrs: false,
  components: {
    [XPageContainer.name]: XPageContainer,
    [XButtonGroup.name]: XButtonGroup,
    [XCondition.name]: XCondition,
    [XDialog.ElDialog.name]: XDialog.ElDialog,
    [Tree.name]: Tree,
    [Scrollbar.name]: Scrollbar
  },
  props: {
    buttonConfig: Object,
    conditionConfig: Object,
    highlightCurrent: {
      type: Boolean,
      default: true
    },
    // 是否多选
    showCheckbox: {
      type: Boolean,
      default: false
    },
    height: {
      type: String,
      default: '75vh'
    }
  },
  methods: {
    handleResizeChange(args) {
      this.$nextTick(() => {
        this.$refs.scrollbar.update();
      });
    },
    handleDbclick(args) {
      this.$emit('node-dbclick', args);
    },
    handleTreeChange() {
      this.$nextTick(() => {
        this.$refs.scrollbar.update();
      });
    },
    setCheckedKeys(keys, leafOnly) {
      this.$refs.tree.setCheckedKeys(keys, leafOnly);
    },
    handleBeforeClose(resolve) {
      this.setCheckedKeys([]);
      // resolve();
    },
    getCheckedNodes(leafOnly, includeHalfChecked) {
      return this.$refs.tree.getCheckedNodes(leafOnly, includeHalfChecked);
    },
    getCurrentNode() {
      return this.$refs.tree.getCurrentNode();
    },
    handleOpened() {
      if (!appUtils.isEmpty(this.conditionConfig.model.filterText)) {
        this.$refs.tree.filter(this.conditionConfig.model.filterText);
      }
    }
  }
};
</script>
