<template>
  <div class="tableLayout">
    <iov-breadcrumb v-if="!hideCrumb"></iov-breadcrumb>
    <div class="layoutContainer">
      <div class="layoutContainerFlex">
        <div v-if="treeData" class="treeContainer" :class="{ collapsed: collapsed }">
          <div class="tapContainer">
            <!-- <div class="tap" @click="collapsed = !collapsed"></div> -->
            <img class="lefttap" v-if="!this.collapsed" @click="collapsed = !collapsed" src="/cdn/icon/resources/arrowleft.svg" />
            <img class="lefttap" v-else @click="collapsed = !collapsed" src="/cdn/icon/resources/arrowright.svg" />
          </div>
          <stms-list
            v-if="treeStyle === 'list'"
            :title="treeTitle"
            :value="treeValue"
            :data="computedTreeData"
            @node-click="treeClick"
            ref="tree"
          >
            <template slot="extra">
              <slot name="extra"> </slot>
            </template>
            <template slot="tool">
              <slot name="tool"> </slot>
            </template>
          </stms-list>
          <stms-tree
            v-else
            :title="treeTitle"
            :value="treeValue"
            :data="computedTreeData"
            @node-click="treeClick"
            ref="tree"
          >
            <template slot="extra">
              <slot name="extra"> </slot>
            </template>
            <template slot="tool">
              <slot name="tool"> </slot>
            </template>
          </stms-tree>
        </div>
        <div class="tableContainer">
          <div class="tableContainerFlex">
            <slot name="container"></slot>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    treeValue: {
      type: Object,
      required: false,
      default: null
    },
    treeTitle: {
      type: String,
      required: false,
      default: ""
    },
    treeData: {
      type: Array,
      required: false,
      default: function() {
        return null;
      }
    },
    // 支持default、metro、list三种风格
    treeStyle: {
      type: String,
      required: false,
      default: function() {
        return "default";
      }
    },
    hideCrumb: {
      required: false,
      type: Boolean,
      default: false
    }
  },
  computed: {
    computedTreeData() {
      if (this.treeStyle === "default") {
        return [
          {
            name: this.treeTitle,
            children: this.treeData
          }
        ];
      }
      return this.treeData;
    }
  },
  data() {
    return {
      collapsed: false
    };
  },
  methods: {
    treeClick(data) {
      this.$emit("tree-click", data);
    },
    setFirstTreeNode() {
      // const treeObj = this.$refs.tree.getTreeObj();
      // const validNodes = treeObj.transformToArray(treeObj.getNodes()).filter(val => !val.disabled);
      // // 设置默认节点
      // for (const val of validNodes) {
      //   if (!val.disabled && !val.children) {
      //     treeObj.selectNode(val);
      //     return val;
      //   }
      // }
      // treeObj.selectNode(validNodes[0]);
      // return validNodes[0];
      return this.treeData[0];
    },
    getTreeObj() {
      return this.$refs.tree.getTreeObj();
    }
  }
};
</script>

<style lang="less">
.tableLayout {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .layoutContainer {
    height: 0;
    flex: auto;
    position: relative;
    .layoutContainerFlex {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      .treeContainer {
        height: 100%;
        width: 360px;
        position: relative;
        transition: all 0.1s linear;
        border-right: 1px solid #dcdcdc;
        .tapContainer {
          position: absolute;
          top: calc(50% - 20px);
          right: -17px;
          height: 40px;
          width: 18px;
          z-index: 99;
          overflow: hidden;
          .lefttap{
            height: 100%;
            width: 100%;
            cursor: pointer;
          }
          .tap {
            height: 100%;
            width: 100%;
            color: #ddd;
            box-shadow: 0 0 8px #ddd;
            border: 1px solid #ddd;
            cursor: pointer;
            position: relative;
            opacity: 0.2;
            transition: all linear 0.1s;
            background: #666;
          }
          .tap:after,
          .tap:before {
            content: "";
            display: block;
            height: 3px;
            width: 10px;
            background: #ddd;
            position: absolute;
            left: 3px;
          }
          .tap:before {
            top: 14px;
            transform: rotate(-45deg);
          }
          .tap:after {
            bottom: 15px;
            transform: rotate(45deg);
          }
        }
        .tapContainer:hover {
          .tap {
            opacity: 1;
          }
        }
      }
      .treeContainer.collapsed {
        width: 0;
        .stms-tree {
          display: none;
        }
        .tapContainer {
          right: -17px;
          .tap {
            right: 0;
          }
          .tap:before {
            transform: rotate(45deg);
          }
          .tap:after {
            transform: rotate(-45deg);
          }
        }
      }
      .tableContainer {
        width: 0;
        flex: auto;
        transition: all 0.1s linear;
        display: flex;
        flex: auto;
        position: relative;
        .tableContainerFlex {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
      }
    }
  }
  .iov-content {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    .iov-tool {
      padding: 10px 20px 0;
      .el-button {
        i {
          margin-left: 5px;
        }
      }
      .split {
        float: left;
        height: 100%;
        width: 1px;
        background: #eee;
        margin: 0 25px;
      }
      .el-input {
        width: 250px;
        float: right;
      }
      .template-tab {
        margin-top: -10px;
      }
    }
    .iov-table {
      flex: auto;
      position: relative;
      padding: 10px 20px;
      .stms-scrollbar {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }
    }
  }
}
</style>
