
<template>
  <div class="zero-draw-panel-container" >
    <div class="zero-components-container" >
      <!-- <div
        :key="item.uuid"
        v-for="item in componentList"
        >
        <wrap :component-data="item"/>
      </div> -->
      <views-tree :views="views"></views-tree>
      <!-- <template v-if="!!this.activeComponentId">
        <vue-draggable-resizable
          :prevent-deactivation="true"
          class-name="db-draggable"
          :min-width="1"
          :min-height="1"
          :z="2"
          :active="true"
          :style="styleObject"
          v-bind="position"
          @dragging="handleDragging"
          @dragstop="handleDragStop"
          @resizing="handleResize"
          @resizestop="handleResizeStop"
          @deactivated="handleDeactivated"
          >
        </vue-draggable-resizable>
      </template> -->
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
// import wrap from './wrap';
import viewsTree from './viewsTree';
// import { styles } from '../../../utils/common';
// import properties from '../../../utils/properties';
// import VueDraggableResizable from 'vue-draggable-resizable';

export default {
  components: { viewsTree },
  methods: {
    // handleDeactivated() {
    //   // this.$store.dispatch('changeEditaleStatus', false);
    // },
    // handleResize(x, y, w, h) {
    //   if (!this.active || !this.activeComponentId) {
    //     return false;
    //   }
    //   let _prop = this.activeComponentCopy.properties;

    //   if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
    //     this.$store.dispatch('modifyCopyProperties', {
    //       x: x,
    //       y: y,
    //       width: w,
    //       height: h
    //     });
    //     // console.log('handleResize', x, y, w, h);
    //   }
    // },

    // handleDragging(x, y) {
    //   if (!this.active || !this.activeComponentId) {
    //     return false;
    //   }
    //   let _prop = this.activeComponentCopy.properties;

    //   if (_prop.x !== x || _prop.y !== y) {
    //     this.$store.dispatch('modifyCopyProperties', {
    //       x: x,
    //       y: y
    //     });
    //     // console.log('handleDragging', x, y);
    //   }
    // },
    // handleResizeStop(x, y, w, h) {
    //   if (!this.active || !this.activeComponentId) {
    //     return false;
    //   }
    //   let _prop = this.activeComponent.properties;

    //   if (_prop.x !== x || _prop.y !== y || _prop.width !== w || _prop.height !== h) {
    //     this.$store.dispatch('modifyProperties', {
    //       x: x,
    //       y: y,
    //       width: w,
    //       height: h
    //     });
    //   }
    // },
    // handleDragStop(x, y) {
    //   if (!this.active || !this.activeComponentId) {
    //     return false;
    //   }
    //   let _prop = this.activeComponent.properties;

    //   if (_prop.x !== x || _prop.y !== y) {
    //     this.$store.dispatch('modifyProperties', {
    //       x: x,
    //       y: y
    //     });
    //   }
    // }
  },
  computed: {
    // ...mapState(['project']),
    ...mapGetters(['views']),
    // active() {
    //   return !!this.activeComponentId;
    //   // return this.activeComponentId === (this.activeComponent || {}).uuid;
    // },
    // styleObject() {
    //   return styles.getComponentStyle(this.activeComponentCopy, this.project, this.componentList, true);
    // },
    // position() {
    //   let _props = this.activeComponentCopy.properties || {};
    //   const _node = properties.node;
    //   // console.log('********', _props);
    //   let result = {
    //     x: _props.x || _node.x.value,
    //     y: _props.y || _node.y.value,
    //     w: _props.width || _node.width.value,
    //     h: _props.height || _node.height.value
    //   };
    //   // console.log('####position', result);

    //   return result;
    // }
  }
};
</script>

<style lang="scss">
.db-draggable {
  position: absolute;
  box-sizing: border-box;
  &.active {
    border: 1px dashed black;
  }
}
.handle {
  box-sizing: border-box;
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
  font-size: 1px;
  background: #eee;
  border: 1px solid #333;
}
.handle-tl {
  top: -10px;
  left: -10px;
  cursor: nw-resize;
}
.handle-tm {
  top: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: n-resize;
}
.handle-tr {
  top: -10px;
  right: -10px;
  cursor: ne-resize;
}
.handle-ml {
  top: 50%;
  margin-top: -5px;
  left: -10px;
  cursor: w-resize;
}
.handle-mr {
  top: 50%;
  margin-top: -5px;
  right: -10px;
  cursor: e-resize;
}
.handle-bl {
  bottom: -10px;
  left: -10px;
  cursor: sw-resize;
}
.handle-bm {
  bottom: -10px;
  left: 50%;
  margin-left: -5px;
  cursor: s-resize;
}
.handle-br {
  bottom: -10px;
  right: -10px;
  cursor: se-resize;
}
</style>
