<template>
  <div class="tree-main">
    <Tree :data="treeData" :render="renderContent" ref="tree" show-checkbox empty-text="暂无课纲内容"></Tree>
  </div>
</template>
<script>
  export default {
    props: ["treeDatas"],
    data() {
      return {
        treeData: []
      };
    },
    created() {
      this.treeData = this.treeDatas;
    },

    //监听树形数据源变化
    watch: {
      treeDatas: {
        handler(newValue) {
          this.treeData = newValue;
        },
        deep: true
      }
    },
    methods: {
      //自定义渲染树形工具
       renderContent(h, { root, node, data }) {
        return h(
          "span",
          {
            domProps: {
              className: "singleClass"
            },
            on: {
              click: () => {
                this.titleClick(root, node, data, event);
              },
            }
          },
          [
            h("span", [
              h("span", {
                domProps: {
                  className: "syllabus-name"
                },
              }, data.title)
            ])
          ]
        );
      },
      // 标题点击收缩展开
      titleClick(root, node, data, event) {
        data.expand = !data.expand;
      },
      // 根目录点击事件
      rootClick(data) {
        data.expand = !data.expand;
      }
    },
  };
</script>
<style scoped>
  .tree-main {
    margin-left: 5%;
    width: 90%;
  }

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

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

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

  .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 {
     margin:0;
  }


  .tree-main /deep/ .singleClass .syllabus-name{
    width:100px;    
    overflow: hidden;    
    text-overflow:ellipsis;    
    white-space: nowrap;
    display:inline-block;
    vertical-align:middle;
  }
  .tree-main /deep/ .ivu-tree-empty{
    width:100%;
    height:60px;
    line-height:60px;
    text-align:center;
    font-size:14px;
  }

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

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