import{getBoundary,getLineScaleInfo,caclShapePercentage} from "../../../utils/untils";
import ContextMenu from "./ShapeContextMenu.vue";
export default {
  props:{
    isActive:false,//是否被选中
    isLayerEdit:true,//是否是图层编辑模式
  },
  components:{ContextMenu},
  watch:{
    isActive(newVal){
      if(newVal){
        console.log('id',this.elementInfo.id)
      }
      if(!newVal){
        this.hideContextMenu()
      }
    }
  },
  data(){
    return {
      movePoint:{ //移动时,记录鼠标的位置
        startX:null,
        startY:null,
        moveX:null,
        moveY:null,
      },
      scalePoint:{//缩放时,记录鼠标的位置
        startX:null,
        startY:null,
        moveX:null,
        moveY:null,
      },
      isMouseDown:false,//鼠标是否按下
      eventType:'move',//当前进行的事件:move:移动元素,resize:缩放元素
      contextmenus:[
        {id:1,text:'删除元素',eventName:'deleteShape'},
        {id:2,text:'复制元素',eventName:'copyShape'}
      ],//右键菜单的菜单项
      isContextMenusShow:false,//右键菜单是否显示
    }
  },
  computed:{},
  methods:{
    //开始移动
    handleMoveStart(event){
      if(!this.isActive) return
      //保存移动前的坐标
      this.isMouseDown = true
      this.eventType = 'move'
      this.movePoint.startX = event.clientX
      this.movePoint.startY = event.clientY
      document.onmousemove=(e)=>{
      //如果显示了右键菜单,隐藏掉
        if(this.isContextMenusShow){
          this.hideContextMenu()
        }
        this.handleMove(e)
      }
      document.onmouseup = ()=>{
        this.isMouseDown = false
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    //移动中
    handleMove(e){
      if(!this.isMouseDown) return 
      const {startX,startY} = this.movePoint
      this.movePoint.moveX = e.clientX-startX
      this.movePoint.moveY = e.clientY-startY
      //设置移动的边界点:不能超出ppt-item
      let moveInfo = {}
      moveInfo.left = Math.min(Math.max(this.elementInfo.left+this.movePoint.moveX,0),$(".layers").width()-this.elementInfo.width)
      moveInfo.top = Math.min(Math.max(this.elementInfo.top+this.movePoint.moveY,0),$(".layers").height()-this.elementInfo.height)
      this.changeStyle(moveInfo,{})
      //改变完后,更新movePoint的位置
      this.movePoint.startX = e.clientX
      this.movePoint.startY = e.clientY
    },
    //开始缩放
    handleScaleStart(event,direction){
      this.isMouseDown = true
      this.eventType = 'resize'
      this.scalePoint.startX = event.clientX
      this.scalePoint.startY = event.clientY
      document.onmousemove=(e)=>{
        //如果显示了右键菜单,隐藏掉
        if(this.isContextMenusShow){
          this.hideContextMenu()
        }
        this.handleScale(e,direction)
      }
      document.onmouseup = ()=>{
        this.isMouseDown = false
        document.onmousemove = null
        document.onmouseup = null
      }
    },
    //缩放中
    handleScale(e,direction){
      if(!this.isMouseDown) return 
      const {left,top,width,height} = this.elementInfo
      let scaleInfo = {left:left,top:top,width:width,height:height}
      //根据direction和moveX,moveY算出元素应该缩放+移动的参数
      const {startX,startY} = this.scalePoint
      this.scalePoint.moveX = e.clientX-startX
      this.scalePoint.moveY = e.clientY-startY
      //计算拖拽后位置和宽高
      //常规的八个点
      //左上角:拖拽会改变left,top,width,height
      if(direction==='LEFT_TOP'){
        scaleInfo.left = Math.max(left + this.scalePoint.moveX,0)
        scaleInfo.top = Math.max(top + this.scalePoint.moveY,0)
        if(scaleInfo.left===0){
         scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,width) 
        }else{
          scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,$('.layers').width())
        }
        if(scaleInfo.top===0){
          scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,height)
        }else{
          scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,$('.layers').height())
        }
      }
      //左中:拖拽会改变left,width
      else if (direction==="LEFT"){
        scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,$('.layers').width())
        scaleInfo.left = Math.max(left + this.scalePoint.moveX,0)
      }
      //左下:拖拽会改变left,width,height
      else if(direction==="LEFT_BOTTOM"){
        scaleInfo.width = getBoundary(width - this.scalePoint.moveX,25,$('.layers').width())
        scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,$('.layers').height())
        scaleInfo.left = Math.max(left + this.scalePoint.moveX,0)
      }
      //右上:拖拽会改变top,width,height
      else if(direction==="RIGHT_TOP"){
        scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,$('.layers').width()-left)
        scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,$('.layers').height()-top)
        scaleInfo.top = Math.max(top + this.scalePoint.moveY,0)
      }
      //右中:拖拽会改变width
      else if(direction==="RIGHT"){
        scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,$('.layers').width()-left)
      }
      //右下:拖拽会改变width,height
      else if(direction==="RIGHT_BOTTOM"){
        scaleInfo.width = getBoundary(width + this.scalePoint.moveX,25,$('.layers').width()-left)
        scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,$('.layers').height()-top)
      }
      //中上:拖拽会改变top,height
      else if(direction==="TOP"){
        scaleInfo.height = getBoundary(height - this.scalePoint.moveY,25,$('.layers').height())
        scaleInfo.top = Math.max(top + this.scalePoint.moveY,0)
      }
      //中下:拖拽会改变height
      else if(direction==="BOTTOM"){
        scaleInfo.height = getBoundary(height + this.scalePoint.moveY,25,$('.layers').height())
      }
      //直线/直线的两个点
      else if(direction==='START'||direction==='END'){
        scaleInfo = getLineScaleInfo(this.scalePoint,this.elementInfo,direction)
        const boundaryCheck = (scaleInfo.top+scaleInfo.height>=$('.layers').height()
                              ||scaleInfo.left+scaleInfo.width>=$('.layers').width())
        if(boundaryCheck){
          scaleInfo.start = getBoundary(scaleInfo.start,25,this.elementInfo.start)
          scaleInfo.end = getBoundary(scaleInfo.end,25,this.elementInfo.end)
        }
      }
      this.changeStyle({},scaleInfo)
      this.scalePoint.startX = e.clientX
      this.scalePoint.startY = e.clientY
    },
    changeStyle(moveInfo,scaleInfo){
      //const {moveX,moveY} = this.movePoint
      if(this.eventType==='resize'){
        const {left,top,width,height} = scaleInfo
        this.elementInfo.left = left
        this.elementInfo.top = top
        this.elementInfo.width = width
        this.elementInfo.height = height
      }else if(this.eventType==='move'){
        const {left,top} = moveInfo
        this.elementInfo.left = left
        this.elementInfo.top = top
      }
      //更新realWidth,realHeight
      this.elementInfo.realWidth = this.elementInfo.width
      this.elementInfo.realHeight = this.elementInfo.height
      //更新percentage单位
      const width = $('.total-wrap').width(),height = $('.total-wrap').height()
      const percentageShape = caclShapePercentage({layerWidth:width,layerHeight:height},this.elementInfo)
      this.elementInfo.percentageLeft = percentageShape.percentageLeft
      this.elementInfo.percentageTop = percentageShape.percentageTop
      this.elementInfo.percentageWidth = percentageShape.percentageWidth
      this.elementInfo.percentageHeight = percentageShape.percentageHeight
    },
    //显示右键菜单
    showContentMenu(e){
      e.preventDefault();
      if(!this.isActive) {
          this.$emit('chooseThis')
      }
      $(`#menu-${this.elementInfo.id}`).css({ "left": document.body.scrollLeft + e.clientX, "top": 
       document.body.scrollTop + e.clientY}).show();
       this.isContextMenusShow = true
    },
    //隐藏右键菜单
    hideContextMenu(){
      $(`#menu-${this.elementInfo.id}`).hide();
      this.isContextMenuShow = false
    },
    //删除当前元素
    handleDeleteLayer(){
      this.$emit('deleteLayer',this.elementInfo)
    },
    //复制当前元素
    handleCopyShape(){
        this.$emit('copyShape',this.elementInfo)
        this.hideContextMenu()
    }
  }
}