<template>
  <vue-draggable-resizable
    :minw="1"
    :minh="1"
    :z="2"
    :style="styleObject"
    :class="[active ? 'choosed-cmp' : 'unchoosed-cmp', isTyping && 'isTyping']"
    v-bind="position"
    @dragging="handleDragging"
    @resizing="handleResize"
    @deactivated="handleDeactivated"
    >
    <div
      class="sword-compomnent-content-wrapper"
      :contenteditable="false"
      @dblclick="handleEnableInput"
      @input="handleInput"
      @keyup.delete.prevent="changeEditRange"
      >
      <custom-node :properties="componentData.properties"></custom-node>
      <!-- <component :is="composedComponents[componentData.type].component.default" :is-typing="false" :properties="componentData.properties" /> -->
    </div>
  </vue-draggable-resizable>

</template>

<script>
import { mapState, mapGetters } from 'vuex';
import { styles } from '../../../utils/common';
import properties from '../../../utils/properties';
import customNode from '../../../components/customElement/node/index.vue';

export default {
  props: {
    from: {
      type: String
    },
    componentData: {
      type: Object,
      require: true
    }
  },
  data() {
    return {};
  },
  components: {
    'custom-node': customNode
  },
  methods: {
    handleEnableInput() {
      console.log('handleEnableInput', this.componentData);

      // 处于编辑状态的组件不可进行 删除、移动、缩放操作
      // this.$store.dispatch('changeEditaleStatus', this.canTyping);
    },
    handleDeactivated() {
      // this.$store.dispatch('changeEditaleStatus', false);
    },
    changeEditRange(e) {
      // this.isTyping && setEditRange(e.target);
    },
    handleInput(e) {
      const textContent = e.target.innerHTML
        .replace(/<br>/g, '')
        .replace(/<\/.+?>/g, '')
        .replace(/<.+?>/g, '<br>')
        .replace(/^<br>/, '');

      // this.$store.dispatch('modifyComponent', {
      //   key: ['props', 'text'],
      //   value: textContent || ' ',
      //   id: this.cmpId
      // });
    },
    handleResize(x, y, w, h) {
      if (!this.active) {
        return false;
      }
      let _prop = this.activeComponentId.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
        });
        console.log('handleResize', x, y, w, h);
      }
      
    },

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

      if (_prop.x !== x || _prop.y !== y) {
        this.$store.dispatch('modifyProperties', {
          x: x,
          y: y
        });
        console.log('handleDragging', x, y);
      }

    }
  },
  computed: {
    ...mapState(['project']),
    ...mapGetters(['activeComponentId', 'componentList']),
    active() {
      return this.activeComponentId === (this.componentData || {}).uuid;
    },
    isTyping() {
      return this.componentData.editable;
    },
    canTyping() {
      // 只有文字才可以编辑
      return this.componentData.group === 'text';
    },
    styleObject() {
      return styles.getComponentStyle(this.componentData, this.project, this.componentList);
    },
    position() {
      let _props = this.componentData.properties || {};
      const _node = properties.node;
      // console.log('********', _props);
      let result = {
        x: _props.x || _node.x.default,
        y: _props.y || _node.y.default,
        w: _props.width || _node.width.default,
        h: _props.height || _node.height.default
      };
      console.log('####position', result);

      return result;
    }
  },
  watch: {
    componentData: {
      deep: true,
      handler: function(v) {
        console.log('wrapper componentData change', v);
      }
    }
  }
};
</script>

<style>
.vdr {
  box-sizing: content-box;
  /* border: 1px solid transparent; */
}
.vdr.active {
  border-color: transparent;
}
.vdr.active.unchoosed-cmp {
  border: none;
}
.vdr.choosed-cmp {
  border: 1px solid rgba(157, 172, 255, 0.9);
  cursor: move;
}
.vdr.isTyping {
  cursor: text;
}
.vdr.choosed-cmp > .handle {
  display: block !important;
}
.vdr.unchoosed-cmp > .handle {
  display: none !important;
}

.otherstatus.active {
  border-color: transparent;
}

.sword-compomnent-content-wrapper {
  height: 100%;
  border: none;
}
</style>
