<template>
  <div
    :class="{'block_expand': isExpand}"
    :style="computedStyle"
    class="menu-bar"
    style="position:relative">
    <!-- <details open>
      <summary>
        <vpd-icon name="layers" />已加组件
      </summary>
      <tree
        ref="widgetTree"
        :nodes="layers"
        :setting="setting"
        style="margin-top:15px;" />
    </details> -->
    <div>
      <p class="sider-header">组件树</p>
      <div>
        <tree
          ref="widgetTree"
          :nodes="layers"
          :setting="setting"
          :active-element = "activeElement"
          style="margin-top:15px;" />
      </div>
    </div>

    <XPEHandler
      :expand="isExpand"
      :callback="toggleHandler"
      class="handler"
      mode="vertical"
      position="right"
    />
  </div>
</template>

<script>
import widget from '../plugins/widget';
import { move } from '../mixins';
import { cumulativeOffset, checkInView } from '../utils/offset';
import XPEHandler from './Handler.vue';
import vpd from '../mixins/vpd';
import tree from 'vue-giant-tree';

export default {
  components: { tree, XPEHandler},
  mixins: [move, vpd],
  props: ['zoom'],
  data () {
    return {
      isExpand: true, // 默认是展开的
      setting: {
        edit: {
          enable: true,
          drag: {
            isCopy: false, // 所有操作都是move
            isMove: true,
            prev: true,
            next: true,
            inner: true
          }
        },
        data: {
          key: {
            name: 'name'
          },
          simpleData: {
            enable: true,
            idKey: 'uuid',
            pIdKey: 'belong',
            rootPId: null
          }
        },
        check: {
          enable: false,
          chkStyle: 'checkbox',
          chkboxType: { Y: 's', N: 's' }
        },
        callback: {
          onClick: this.activeLayer,
          onDrop: this.zTreeOnDrop
        },
        view: {
          showIcon: false,
          dblClickExpand: true
        }
      }
    };
  },
  computed: {
    widgets () {
      return widget.getWidgets();
    },
    computedStyle: function () {
      let _t = this;
      return {
        'margin-right': _t.isExpand ? 0 : 200
      };
    },
    layers () {
      // let treeObj = this.$refs.widgetTree.ztreeObj
      // let treeNodes = this.$refs.widgetTree.ztreeObj.getNodes()
      // for (let i = 0; i < treeNodes.length; i++) {
      //   // 设置节点展开
      //   treeObj.expandNode(treeNodes[i], true, false, false)
      // }
      return this.$vpd.state.widgets;
    },
    activeElement () {
      let activeElement = this.$vpd.state.activeElement
      if (this.$refs.widgetTree) {
        let widgetTreeObj = this.$refs.widgetTree.ztreeObj;
        if (widgetTreeObj) {
          let widgetTreeNode = widgetTreeObj.getNodeByParam('uuid', activeElement.uuid, null);
          if (widgetTreeNode != null) {
            widgetTreeObj.selectNode(widgetTreeNode);
          }
        }
      }
      return this.$vpd.state.activeElement;
    }
  },
  methods: {
    // 切换handler显示/隐藏
    toggleHandler: function (val) {
      let _t = this;
      _t.isExpand = val !== undefined ? val : !_t.isExpand;
      console.log(_t.isExpand, 888888)
      this.$vpd.commit('handleresize')
      _t.$nextTick(function () {
        let elWidth = _t.isExpand ? _t.$el.offsetWidth : 0;

        // 广播事件
        // utils.bus.$emit("XPE/expand/toggle/single", {
        //   position: "right",
        //   val: {
        //     right: elWidth
        //   }
        // });
      });
    },
    handleDragStart (item, e) {
      e.dataTransfer.setData('node', JSON.stringify(item));
    },

    // 为确保添加的元件出现在可视区内，用画布向上滚动距离作为元件初始 top 值
    updateSrollTop () {
      var top =
        (document.getElementById('viewport').scrollTop / this.zoom) * 100;
      this.$vpd.commit('updateSrollTop', top);
    },

    activeLayer (e, treeId, item) {
      this.$vpd.commit('select', {
        uuid: item.uuid
      });
      let viewport = document.querySelector('#viewport');
      let target = viewport.querySelector(`[data-uuid='${item.uuid}']`);
      if (target && !checkInView(target)) {
        viewport.scrollTop =
          ((cumulativeOffset(target).top - 50) * this.zoom) / 100;
      }
    },

    getWidgetTitle (type) {
      return this.widgets[type].title || '';
    },
    zTreeOnDrop (event, treeId, treeNodes, targetNode, moveType) {
      this.$vpd.commit('updateWidgets', treeNodes);
      let treeObj = this.$refs.widgetTree.ztreeObj;
      treeObj.expandAll();
    }
  }
};
</script>

<style lang="scss">
@import "../_variables.scss";
.menu-bar {
  margin-left: -200px;
  ul {
    list-style: none;
    margin: 0;
  }
  details {
    padding: 10px;
  }
  summary {
    padding: 5px 0;
    border-bottom: 1px solid #f5f5f5;
    .svg-icon {
      margin-right: 5px;
    }
  }
  &.block_expand {
    margin-left: 0;
  }
   &:hover {
    .handler {
      margin-right: -10px;
    }
  }
}
.sider-header {
    padding: 10px;
    font-size: 14px;
    border-bottom: 0.05rem solid #dadee4;
}
.widget-list {
  padding: 0;
}
.menu-item {
  text-align: center;
  cursor: pointer;
  padding: 15px 0 8px;
  transition: all 0.2s;
  position: relative;
  &:hover {
    transform: scale(1.2);
  }
  .svg-icon {
    font-size: 24px;
  }
  .menu-caption {
    display: block;
    font-size: 12px;
    width: 100%;
  }
}
.layer-list {
  padding: 10px;
  li {
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    line-height: 24px;
    padding-left: 5px;
    &:hover {
      background: #f5f5f5;
    }
    &::before {
      content: "› ";
    }
    &.layer-active {
      color: $light-color;
      background: $primary-color;
    }
  }
}
</style>
