<template>
  <div class="cms-common-tree">
    <el-row class="cms-common-main">
      <el-col :span="leftSpan">
        <el-card :bordered="true" class="tree-card">
          <div
            slot="header"
            style="padding: initial"
            class="clearfix"
            v-if="showLeftHeader"
          >
            <span v-if="leftTitle">{{ leftTitle }}</span>
            <slot name="leftHeader"></slot>
          </div>
          <el-tree
            style="padding: 10px"
            ref="nodeTreeRefs"
            :data="treeData"
            :show-checkbox="showCheckbox"
            :accordion="false"
            :check-strictly="false"
            :check-on-click-node="true"
            :empty-text="emptyText"
            node-key="id"
            v-bind="$attrs"
            v-on="listeners"
            :default-expanded-keys="defaultShowNodes"
            :default-checked-keys="defaultCheckedKeys"
            :props="defaultProps"
          >
            <slot></slot>
            <template slot="empty">
              <slot name="empty"></slot>
            </template>
          </el-tree>
        </el-card>
      </el-col>
      <el-col :span="rightSpan">
        <el-card :bordered="true" class="tree-card card-right">
          <div slot="header" class="clearfix" v-if="rightTitle">
            <span>{{ rightTitle }}</span>
          </div>
          <slot name="content"></slot>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "CmsCommonTree",
  data() {
    let { ...listeners } = this.$listeners;
    return {
      listeners: listeners,
    };
  },
  props: {
    leftSpan: {
      type: Number,
      default: 24,
    },
    rightSpan: {
      type: Number,
      default: 24,
    },
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    leftTitle: {
      type: [String],
      default: "",
    },
    emptyText: {
      type: String,
      default: () => {
        return "";
      },
    },
    showLeftHeader: {
      type: Boolean,
      default: false,
    },
    rightTitle: {
      type: String,
      default: "",
    },
    nodeKey: {
      type: String,
      default: "id",
    },
    showCheckbox: {
      type: Boolean,
      default: true,
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label",
        };
      },
    },
    /** 默认展开的节点 */
    defaultShowNodes: {
      type: Array,
      default: () => {
        return [];
      },
    },
    /** 默认选中的节点 */
    defaultCheckedKeys: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  methods: {
    getTreeRefs() {
      return this.$refs["nodeTreeRefs"];
    },
    getCheckedNodes() {
      const nodeRefs = this.$refs["nodeTreeRefs"];
      return nodeRefs.getCheckedNodes(false, true);
    },
    clearCheckNode() {
      const that = this;
      const refs = that.getTreeRefs();
      let data = refs.getCheckedNodes();
      if (!data) data = [];
      data.forEach((item) => {
        const node = refs.getNode(item.id);
        if (node.isLeaf) {
          refs.setChecked(node, false);
        }
      });
    },
    setTreeNodeCheck(data) {
      const that = this;
      this.$nextTick(() => {
        if (!data) data = [];
        data.forEach((i) => {
          const treeNode = that.getTreeRefs();
          const node = treeNode.getNode(i);
          if (node.isLeaf) {
            treeNode.setChecked(node, true);
          }
        });
      });
    },
  },
};
</script>

<style scoped lang="less">
.cms-common-tree {
  min-height: 100%;
}

/deep/ .tree-card.el-card {
  display: flex;
  //padding: 10px;
  flex-direction: column;
  height: calc(100vh - 120px);

  .el-card__header {
    height: 50px;
  }

  .el-card__body {
    flex: 1;
    padding: 0;
  }
}

/deep/ .el-card .el-card__header {
  height: 50px !important;
  padding: 5px !important;
}

/deep/ .el-col-18 {
  .el-card__body {
    overflow-y: hidden;
  }
}

/deep/ .el-card__header .clearfix {
  display: flex;
  flex-direction: row;
  .el-button {
    margin-left: 10px;
  }
}
.card-right .clearfix {
  height: 45px;
  font-size: 16px;
  line-height: 45px;
}
</style>
