<template>
  <div class="tree-main">
    <Tree :data="treeData" :render="renderContent" ref="tree"></Tree>
  </div>
</template>
<script>
  export default {
    props: ["treeDatas", "volumeCode"],
    data() {
      return {
        treeData: [],
        schoolInfo: {},
        inputValue: "",
        editValue: "",
        modalFlag: false,
        editFlag: false,
        addBookFlag: false,
        nodeType: "章节",
        currentNode: "",
        currentLiNode: "",
      };
    },
    created() {
      this.treeData = this.treeDatas;
      this.schoolInfo = JSON.parse(localStorage.getItem('c_role_info')).roleClaim[0]; //默认选中第一个学校
      let schoolClaims = this.schoolInfo.claim;
      for (let i in schoolClaims) {
        if (schoolClaims[i].claimType == "SchoolCode") {
          this.schoolInfo = schoolClaims[i]
        }
      }
    },

    //监听树形数据源变化
    watch: {
      treeDatas: {
        handler(newValue) {
          this.treeData = newValue;
        },
        deep: true
      }
    },
    methods: {
      //自定义渲染树形工具
       renderContent(h, { root, node, data }) {
        let that = this;
        return h(
          "span",
          {
            domProps: {
              className: "singleClass"
            },
            on: {
              click: () => {
                this.titleClick(root, node, data, event);
              },
              mouseover: e => {
                e.stopPropagation();
                this.handleLiOver(event);
              },
              mouseleave: e => {
                e.stopPropagation();
                this.handleLiLeave(node, event);
              }
            }
          },
          [
            h("span", [
              h("Icon", {
                props: {
                  type:
                    data.children && data.children.length > 0
                      ? "md-albums"
                      : "ios-paper-outline"
                },
                style: {
                  marginRight: "5px",
                }
              }),
              h("span", data.name)
            ]),
            h(
              "span",
              {
                style: {
                  float: "right",
                  top: "6px",
                  display: "none"
                },
                on: {
                  mouseleave: e => {
                    e.stopPropagation();
                    //this.hideTools(event);
                  },
                },
                domProps: {
                  className: "tools"
                }
              },
              [
                h(
                  "span",
                  {
                    style: {
                      fontSize: "10px",
                      //color:"#339aef"
                    },
                    domProps: {
                      innerHTML: "<i class='ivu-icon ivu-icon-md-cloud-download' style='margin-bottom: 5px;margin-right: 2px;color:#339aef;font-size:20px'></i> 引入至私有知识块 / 知识点库"
                    },
                    on: {
                      click: e => {
                        e.stopPropagation();
                        this.saveKnowledge(data);
                      }
                    }
                  },
                ),
              ]
            )
          ]
        );
      },
      //引入到私有知识库
      saveKnowledge(data) {
        this.$Modal.confirm({
          title: '温馨提示',
          content: '<p>确认将<span style="color:#339aef;font-weight:bold"> '+data.name+' </span> 添加到 私有知识块 / 知识点库 吗？</p>',
          okText: "确认",
          cancelText:"取消",
          onOk: () => {
            let params = {
              KnowledgeId: data.rowKey,
              SchoolCode: this.schoolInfo.claimCode,
              SubjectCode: "Subject_Chinese",
              PartitionKey: this.schoolInfo.partitionKey
            }
            this.$api.SaveOrUpdateSchoolKnowledgeAsStdKnowledge(params).then(res => {
              this.$Message.success("导入成功！");
            })
          }
        });
      },
      // 标题点击收缩展开
      titleClick(root, node, data, event) {
        data.expand = !data.expand;
        console.log(data);
      },
      // 根目录点击事件
      rootClick(data) {
        data.expand = !data.expand;
      },
     
      // 更多操作
      handleTools(root, node, data, event) {
        let toolsDom = event.currentTarget.nextElementSibling;
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        let list = document.getElementsByClassName("tools");
        let cFlag = toolsDom.style.display;
        for (let i = 0; i < list.length; i++) {
          list[i].style.display = "none";
        }
        // 判断TOOL显示与隐藏
        if (cFlag == "none") {
          toolsDom.style.display = "inline-flex";
          toolsDom.classList.add("animated");
          toolsDom.classList.add("slideInDown");
        } else {
          toolsDom.style.display = "none";
        }
      },
      // 鼠标从工具条移开的时候隐藏
      hideTools(event) {
        event.currentTarget.style.display = "none";
      },
      handleLiOver(event) {
        event.currentTarget.lastElementChild.style.display = "block";
        event.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.68)";
        event.currentTarget.style.border = "1px solid #000";
      },
      handleLiLeave(node, event) {
        event.currentTarget.lastElementChild.style.display = "none";
        if (this.currentLiNode.nodeKey != node.nodeKey) {
          event.currentTarget.style.backgroundColor = "transparent";
          event.currentTarget.style.border = "0";
        }
      },

    },
  };
</script>
<style scoped>
  .tree-main {
    margin-left: 5%;
    width: 90%;
  }

    .tree-main /deep/ .ivu-icon-ios-paper-outline {
      font-size: 16px;
    }

    .tree-main /deep/ .ivu-select {
      width: 80% !important;
    }

  .slideSelect .ivu-select-selection {
    height: 40px;
    background: #d8d8d870;
    border: 1px solid #808080;
  }

  .slideSelect, .slideSelect .ivu-icon {
    color: rgba(255,255,255,.8);
  }

  .tree-main /deep/ .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
  }
  /* .ivu-tree ul li {
    margin: 18px 0;
  } */
  .tree-main /deep/ .ivu-tree ul {
    font-size: 14px;
  }

    .tree-main /deep/ .ivu-tree ul li {
      margin: 8px 0;
    }

  .ivu-tree .ivu-tree-arrow {
    width: 2%;
  }

  .ivu-input-wrapper {
    width: 80% !important;
  }

  .modelRow {
    margin: 20px;
    font-size: 14px;
  }

  .tree-main /deep/ .tools {
    position: absolute;
    right: 60px;
    bottom: 5px;
    display: inline-flex;
    z-index: 999;
  }

    .tree-main /deep/ .tools .ivu-icon {
      margin-right: 15px;
      font-size: 16px;
      font-weight: 200;
      color: #808080;
    }

  .btn_more {
    background: #fff;
    border: 1px solid rgb(248,248,248);
  }

  .animated {
    animation-duration: 0.5s;
  }

  @-webkit-keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0,-10%, 0);
      transform: translate3d(0, -10%, 0) !important;
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0%, 0);
      transform: translate3d(0, 0%, 0);
    }
  }

  @keyframes slideInDown {
    from {
      -webkit-transform: translate3d(0, -10%, 0);
      transform: translate3d(0, -10%, 0) !important;
      visibility: visible;
    }

    to {
      -webkit-transform: translate3d(0, 0%, 0);
      transform: translate3d(0, 0%, 0);
    }
  }

  .slideInDown {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
  }

  .tree-main /deep/ .singleClass {
    position: relative;
    display: inline-flex !important;
    flex-direction: row;
    align-items: center;
    height: 40px;
    width:95%;
    text-align: left;
    padding-left: 2%;
    cursor: pointer;
    box-sizing: border-box;
  }

  .btn-addClass {
    width: 16%;
    padding: 10px 6px !important;
  }

  .ivu-tabs-nav-scroll {
    display: flex;
    justify-content: center;
  }
</style>
