
<template>
  <div class="edit-control-view" @mousedown="moveEdit($event,`mousedown`)"  ref="zeroPlayground"  @click="onClickTouchLayer">
    <!-- <div class="edit-box-con-body" :style="boxstyleEdit">
     
    </div> -->

    <div class="edit-con-body" :style="styleEdit">
      <div class="edit-con-move"  @mousedown="editStateCon(`move`)"></div>
      <div class="edit-con-com edit-left-con"  @mousedown="editStateCon(`left`)"></div>
      <div class="edit-con-com edit-right-con"  @mousedown="editStateCon(`right`)"></div>
      <div class="edit-con-com edit-top-con"  @mousedown="editStateCon(`top`)"></div>
      <div class="edit-con-com edit-bottom-con"  @mousedown="editStateCon(`bottom`)"></div>

      <div class="edit-con-com edit-topleft-con"  @mousedown="editStateCon(`topleft`)"></div>
      <div class="edit-con-com edit-topright-con"  @mousedown="editStateCon(`topright`)"></div>
      <div class="edit-con-com edit-bottomleft-con"  @mousedown="editStateCon(`bottomleft`)"></div>
      <div class="edit-con-com edit-bottomright-con" @mousedown="editStateCon(`bottomright`)"></div>

      <div
        class="edit-con-com edit-center-con"
        :style="styleEditAnchor"
        @mousedown="editStateCon(`center`)"
      ></div>
    </div>

    
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import events from "@/global-events.js";

export default {
  props: {
    views: {
      type: Array,
      default: []
    },
    activeComponent: {}
  },
  data () {
    return {
       styleCatch:{},
       boxStyleCatch:{},
       canMove: false,
       canFouce: true,
        editEvent: "",
        changeWidth: 0,
        changeWidthStart: 0,
        changeHeight: 0,
        changeHeightStart: 0,
        changeMoveX: 0,
        changeMoveY: 0,
        changeEndX: 0,
        changeEndY: 0,
        catchWidth: 0,
        catchHeight: 0,
        catchX:0,
        catchY:0,
        zoom:2
    }
	},
 
  components: {},
  methods: {
    onClickTouchLayer(e) {
      if(!this.canFouce){
        return false;
      }
      events.$emit("onClickTouchLayer",{
        x:e.pageX-this.$refs.zeroPlayground.getBoundingClientRect().left/2,
        y:e.pageY-this.$refs.zeroPlayground.getBoundingClientRect().top/2
      });
    },
    moveEdit(e, type) {
      if (!this) {
        return;
      }
      if (this.editEvent != "") {
        if (type == "mousedown") {
          this.canMove = true;
          this.canFouce=false
          this.changeWidthStart = e.x;
          this.changeHeightStart = e.y;
          this.catchWidthCon();
        }
        if (type == "mousemove") {
          if (!this.canMove) {
            return;
          }
          this.changeMoveX = e.x - this.changeWidthStart;
          this.changeMoveY = e.y - this.changeHeightStart;
          this.modifyCopyPropertiesCon();
        }

        if (type == "mouseup") {
          this.canMove = false;
         // setTimeout(()=>{
            this.canFouce=true
         // },500)
          this.changeEndX = e.x;
          this.changeEndY = e.y;
          this.modifyPropertiesCon();
          this.editEvent = "";
          this.changeWidth=0;
          this.changeWidthStart=0;
          this.changeHeight=0;
          this.changeHeightStart=0;
          this.changeMoveX=0;
          this.changeMoveY=0;
          this.changeEndX=0;
          this.changeEndY=0;
          this.catchWidth=0;
          this.catchHeight=0;
          this.catchY=0;
          this.catchY=0;
        }
      }
    },
    catchWidthCon() {
        this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
        this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
        
      if (this.editEvent == "bottomright") {
       
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth),
          height: parseInt(this.catchHeight),
        });
      }else if (this.editEvent == "topright") {
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
      }else if (this.editEvent == "top") {
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
      }else if (this.editEvent == "right") {
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
        this.$store.dispatch("modifyProperties", {
            width: parseInt(this.catchWidth),
        });
      } else if (this.editEvent == "left") {
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
      } else if (this.editEvent == "bottom") {
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
        this.$store.dispatch("modifyProperties", {
          height: parseInt(this.catchHeight),
        });
      } else if (this.editEvent == "topleft") {
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
      } else if (this.editEvent == "bottomleft") {
        this.catchWidth =  this.styleCatch.width? this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0);
        this.catchHeight =  this.styleCatch.height? this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0);
      } else if (this.editEvent == "center") {
        this.catchWidth =  this.styleCatch.anchorX? this.styleCatch.anchorX:0;
        this.catchHeight =  this.styleCatch.anchorY? this.styleCatch.anchorY:0;
      } else if (this.editEvent == "move") {
       // this.catchX =  this.styleCatch.x? this.styleCatch.x:0;
       // this.catchY =  this.styleCatch.y? this.styleCatch.y:0;
      }
    },
    modifyCopyPropertiesCon() {
      if (this.editEvent == "bottomright") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth + this.changeMoveX * this.zoom,
        //   height: this.catchHeight + this.changeMoveY * this.zoom
        // });
       
        this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
        this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
        this.styleCatch.y=this.catchY
        this.styleCatch.x=this.catchX

         console.log(this.styleCatch.width)
      } else if (this.editEvent == "top") {
        
        // this.$store.dispatch("modifyCopyProperties", {
        //   height: this.catchHeight - this.changeMoveY * this.zoom,
        //   y:this.catchY+this.changeMoveY * this.zoom
        // });
        this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom;
        this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
      } else if (this.editEvent == "right") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth + this.changeMoveX * this.zoom,
        // });
         this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom;
      } else if (this.editEvent == "left") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth - this.changeMoveX * this.zoom,
        //   x:this.catchX+this.changeMoveX * this.zoom
        // });
        this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
        this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
      } else if (this.editEvent == "bottom") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   height: this.catchHeight + this.changeMoveY * this.zoom,
        // });

        this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
      } else if (this.editEvent == "topright") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth + this.changeMoveX * this.zoom,
        //   height: this.catchHeight - this.changeMoveY * this.zoom,
        //   y:this.catchY+this.changeMoveY * this.zoom
        // });
        this.styleCatch.width=this.catchWidth + this.changeMoveX * this.zoom
        this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
        this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom

      } else if (this.editEvent == "topleft") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth - this.changeMoveX * this.zoom,
        //   height: this.catchHeight - this.changeMoveY * this.zoom,
        //   y:this.catchY+this.changeMoveY * this.zoom,
        //   x:this.catchX+this.changeMoveX * this.zoom
        // });
        this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
        this.styleCatch.height=this.catchHeight - this.changeMoveY * this.zoom
        this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
        this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom

      } else if (this.editEvent == "bottomleft") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   width: this.catchWidth - this.changeMoveX * this.zoom,
        //   height: this.catchHeight + this.changeMoveY * this.zoom,
        //   x:this.catchX+this.changeMoveX * this.zoom
        // });
          this.styleCatch.width=this.catchWidth - this.changeMoveX * this.zoom
          this.styleCatch.height=this.catchHeight + this.changeMoveY * this.zoom
          this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
      } else if (this.editEvent == "center") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   anchorX: this.catchWidth + this.changeMoveX * this.zoom,
        //   anchorY: this.catchHeight + this.changeMoveY * this.zoom
        // });
        this.styleCatch.anchorX=this.catchWidth + this.changeMoveX * this.zoom
        this.styleCatch.anchorY=this.catchHeight + this.changeMoveY * this.zoom
      } else if (this.editEvent == "move") {
        // this.$store.dispatch("modifyCopyProperties", {
        //   y:this.catchY+this.changeMoveY * this.zoom,
        //   x:this.catchX+this.changeMoveX * this.zoom
        // });
          this.styleCatch.y=this.catchY+this.changeMoveY * this.zoom
          this.styleCatch.x=this.catchX+this.changeMoveX * this.zoom
      }
    },
    modifyPropertiesCon() {
    //  events.$emit('canvasKeyVupdate', {properties:this.activeComponent.properties});
      if (this.editEvent == "bottomright") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
          y:parseInt(this.catchY),
          x:parseInt(this.catchX)
        });
      }else if (this.editEvent == "top") {
        this.$store.dispatch("modifyProperties", {
          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
          y:parseInt(this.catchY+this.changeMoveY * this.zoom)
        });
      } else if (this.editEvent == "right") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
        });
      } else if (this.editEvent == "left") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
        });
      } else if (this.editEvent == "bottom") {
        this.$store.dispatch("modifyProperties", {
          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
        });
      } else if (this.editEvent == "topright") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
          y:parseInt(this.catchY+this.changeMoveY * this.zoom)
        });
      }else if (this.editEvent == "topleft") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
          height: parseInt(this.catchHeight - this.changeMoveY * this.zoom),
          y:parseInt(this.catchY+this.changeMoveY * this.zoom),
          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
        });
      } else if (this.editEvent == "bottomleft") {
        this.$store.dispatch("modifyProperties", {
          width: parseInt(this.catchWidth - this.changeMoveX * this.zoom),
          height: parseInt(this.catchHeight + this.changeMoveY * this.zoom),
          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
        });
      } else if (this.editEvent == "center") {
        this.$store.dispatch("modifyProperties", {
          anchorX: parseInt(this.catchWidth + this.changeMoveX * this.zoom),
          anchorY: parseInt(this.catchHeight + this.changeMoveY * this.zoom)
        });
      } else if (this.editEvent == "move") {
        this.$store.dispatch("modifyProperties", {
          y:parseInt(this.catchY+this.changeMoveY * this.zoom),
          x:parseInt(this.catchX+this.changeMoveX * this.zoom)
        });
      }
    },
    editStateCon(state) {
      this.editEvent = state;
    }
  },
  created() {
    events.$on("setMoveEdit", data => {
      this.moveEdit(data.e, data.type);
    });
    events.$on("setPlaygroundZoom", data => {
        this.zoom=1/data.zoom;
    });
    document.body.addEventListener("mouseup",(e)=>{
      this.moveEdit(e,`mouseup`)
    })
    document.body.addEventListener("mousemove",(e)=>{
      this.moveEdit(e,`mousemove`)
    })

    this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
  },
  computed: {
    position() {
      let result = {};
      result.x =  this.styleCatch.x;
      result.y =  this.styleCatch.y;
      return result;
    },
    styleEdit() {
      if (!this.activeComponent) {
        return {};
      }
      let result={
        width: `${ this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0)}px`,
        height: `${ this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0)}px`,
        marginTop: `${ this.styleCatch.y?this.styleCatch.y:0}px`,
        marginLeft: `${ this.styleCatch.x?this.styleCatch.x:0}px`,
        transform: `rotate(${ this.styleCatch.rotation? this.styleCatch.rotation:0}deg) 
        scaleX(${ this.styleCatch.scaleX? this.styleCatch.scaleX:1})
        scaleY(${ this.styleCatch.scaleY? this.styleCatch.scaleY:1})`,
        webkitTransformOriginY: `${ this.styleCatch.anchorY?this.styleCatch.anchorY:0}px`,
        webkitTransformOriginX: `${ this.styleCatch.anchorX?this.styleCatch.anchorX:0}px`,
      }
      
      return result
    },
    styleEditAnchor() {
      if (!this.activeComponent) {
        return {};
      }
      let result = {
        top: 0,
        left: 0
      };
      if ( this.styleCatch.anchorX) {
        result.left = `${( this.styleCatch.anchorX /
           (this.styleCatch.width?this.styleCatch.width:(this.styleCatch.imageWidth?this.styleCatch.imageWidth:0))) *
          100}%`;
      } else {
         this.styleCatch.anchorX = 0;
      }

      if ( this.styleCatch.anchorY) {
        result.top = `${( this.styleCatch.anchorY /
           (this.styleCatch.height?this.styleCatch.height:(this.styleCatch.imageHeight?this.styleCatch.imageHeight:0))) *
          100}%`;
      } else {
         this.styleCatch.anchorY = 0;
      }
      return result;
    }
  },
  watch: {
    views: function(newVal) {
      console.log(newVal);
    },
    // activeComponent: function(newVal) {
    //   console.log(newVal.name);
    //   console.log(newVal);
    
    //   setInterval(()=>{
    //     console.log(this.activeComponent.properties.width)
    //   },1000)
    // },
    "activeComponent.properties":{
        handler (newVal) {
	          console.error("样式改变")
            this.styleCatch=JSON.parse(JSON.stringify(this.activeComponent.properties));
	      },
	      deep: true
    }
  }
};
</script>

<style lang="scss">
.edit-control-view {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  user-select: none;
}
.edit-box-con-body{
   box-sizing: border-box;
  cursor: move;
  border: 3px solid #ccc;
  position: absolute;
}
.edit-con-body {
  box-sizing: border-box;
  cursor: move;
  border: 1px solid #ccc;
  position: absolute;
  .edit-con-move{
     position: absolute;
     top: 0%;
     left: 0;
     width: 100%;
     height: 100%;
    // background: blue;
  }
  .edit-con-com {
    box-sizing: border-box;
    border: 1px solid #444;
    position: absolute;
    width: 14px;
    height: 14px;
    margin: -7px -7px;
  }
  .edit-left-con {
    left: 0;
    top: 50%;
    cursor: w-resize;
  }
  .edit-right-con {
    right: 0;
    top: 50%;
    cursor: e-resize;
  }
  .edit-bottom-con {
    left: 50%;
    bottom: 0%;
    cursor: s-resize;
  }
  .edit-top-con {
    left: 50%;
    top: 0%;
    cursor: n-resize;
  }
  .edit-topleft-con {
    left: 0;
    top: 0;
    cursor: nw-resize;
  }
  .edit-topright-con {
    right: 0;
    top: 0;
    cursor: ne-resize;
  }
  .edit-bottomleft-con {
    left: 0%;
    bottom: 0%;
    cursor: sw-resize;
  }
  .edit-bottomright-con {
    right: 0%;
    bottom: 0%;
    cursor: se-resize;
  }
  .edit-center-con {
    cursor: crosshair;
    border-radius: 7px;
    background: #999;
    border: 1px solid #444;
  }
}
</style>