<template>
  <div class='wrap' @mouseover="mouseover" @mouseleave="mouseleave"  @dragstart="dragstart" @mousedown="mousedown" @mouseup="mouseup">
    <template v-if="!element.eleCanvas">
      <img :style="{'z-index':1,width:'100%',height:'100%','border-radius': element.circular+'%'}" :src="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc">

      <img  src="https://dm.static.elab-plus.com/launchTemplate/0a3b783c-c54a-4e13-ba50-8f0ac6bb35f4-%E6%92%AD%E6%94%BE.png"
            v-show="element.videoEditable" style="z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);display: block"/>
    </template>
    <elab-background-canvas v-else-if="element.eleCanvas=='WaterRipple'" :width="element.width" :height="element.height" :cstyle="`position:absolute;z-index: 1;border-radius:${element.circular+'%'}`" :type="element.eleCanvas" :picSrc="element.imgSrc&&element.imgSrc.indexOf('http://dm.static.elab-plus.com')>-1?element.imgSrc.replace('http://dm.static.elab-plus.com','https://dm.static.elab-plus.com'):element.imgSrc"></elab-background-canvas>

    <Operate v-show="showOperate || show|| $store.state.editor.complexEditorElement.indexOf(element)>-1" @mousedown.native.stop="scaleMousedown" @mouseup.native.stop="scaleMouseup" @mousemove.native.stop="scaleMousemove"

    />
  </div>
</template>

<script>
    import Operate from '../Operate'
    import appConst from '../../util/appConst'
    import elabBackgroundCanvas from '../../util/canvas/elabBackgroundCanvas'
    var body = document.body;

    export default{
      props: {
        element: {
          type: Object,
          require: true
        },
        showOperate: {
          type: Boolean
        },
        stopEvent: {
          type: Boolean
        },
        type: ''
      },
      data () {
        return {
          left: 0,
          top: 0,
          width: 0,
          height: 0,
          currentX: 0,
          currentY: 0,
          flag: false,
          scaleFlag: false,
          direction: '',
          http: appConst.BACKEND_DOMAIN,
          show:false
        }
      },
      mounted(){
        window.addEventListener("mouseup",()=>{

          this.$store.state.user.operationFlag=true;
          this.flag = false
          this.scaleFlag = false
        })
      },
      methods: {
        // 处理元素拖动
        move () {
          var body = document.body;
          // var editor = document.querySelector('.editor')
          document.querySelector('body').onmousemove = (event) => {
            var e = event || window.event
            if (this.flag && !this.scaleFlag) {
              let nowX = e.clientX
              let nowY = e.clientY
              let disX = nowX - this.currentX
              let disY = nowY - this.currentY
              if(this.$store.state.editor.complexEditorElement.indexOf(this.element)>-1&&this.$store.state.editor.complexEditorElement.length>1){
                this.$store.state.editor.complexEditorElement.forEach((ele,index)=>{
                  ele['top'] = disY + this.startTopArr[index]
                  ele['left'] = ele.type=='frame'?0:disX + this.startLeftArr[index]
                });
                return;
              }
              this.element.top = parseInt(this.top) + disY
              this.element.left = parseInt(this.left) + disX
            }
          }
        },
        // 处理元素伸缩
        scaleMousemove () {
          document.querySelector('.editor').onmouseup = (event) => {
            this.scaleFlag = false
          }
          document.querySelector('.editor').onmousemove = (event) => {
            var e = event || window.event
            if (this.scaleFlag) {
              let nowX = e.clientX
              let nowY = e.clientY
              let disX = nowX - this.currentX
              let disY = nowY - this.currentY
              let  ratio = this.width / this.height
              switch (this.direction) {
                // 左边
                case 'w':
                  this.element.width = parseInt(this.width) - disX
                  // this.element.height = parseInt(((this.width) - disX)/ratio)
                  this.element.left = parseInt(this.left) + disX
                  break
                // 右边
                case 'e':
                  this.element.width = parseInt(this.width) + disX
                  // this.element.height = parseInt(((this.width) + disX)/ratio)
                  break
                // 上边
                case 'n':
                  this.element.height = parseInt(this.height) - disY
                  // this.element.width = parseInt(((this.height) - disY)*ratio)
                  this.element.top = parseInt(this.top) + disY
                  break
                // 下边
                case 's':
                  this.element.height = parseInt(this.height) + disY
                  // this.element.width = parseInt(((this.height) + disY)*ratio)
                  break
                // 左上
                case 'nw':
                  // this.element.width = parseInt(this.width) - disX
                  this.element.width = parseInt(((this.height) - disY)*ratio)
                  // this.element.left = parseInt(this.left) + disX
                  this.element.left = parseInt(this.left + disY*ratio)
                  this.element.height = parseInt(this.height) - disY
                  this.element.top = parseInt(this.top) + disY
                  break
                // 左下
                case 'sw':
                  // this.element.width = parseInt(this.width) - disX
                  this.element.width = parseInt(( (this.height) + disY)*ratio)
                  // this.element.left = parseInt(this.left) + disX
                  this.element.left = parseInt(this.left - disY*ratio)
                  this.element.height = parseInt(this.height) + disY
                  break
                // 右上
                case 'ne':
                  this.element.height = parseInt(this.height) - disY
                  this.element.top = parseInt(this.top) + disY
                  // this.element.width = parseInt(this.width) + disX
                  this.element.width = parseInt(((this.height) - disY)*ratio)
                  break
                // 右下
                case 'se':
                  this.element.height = parseInt(this.height) + disY
                  // this.element.width = parseInt(this.width) + disX
                  this.element.width = parseInt(((this.height) + disY)*ratio)
                  break
              }
            }
          }
        },
        mousedown (e) {
          this.$store.state.user.operationFlag=false;
          if(this.element.locked){
            return false;
          }
          if(this.stopEvent){
            return false
          }
          this.flag = true
          this.currentX = e.clientX
          this.currentY = e.clientY
          if(this.$store.state.editor.complexEditorElement.indexOf(this.element)>-1&&this.$store.state.editor.complexEditorElement.length>1){
            this.startTopArr=this.$store.state.editor.complexEditorElement.map(v=>v.top)
            this.startLeftArr=this.$store.state.editor.complexEditorElement.map(v=>v.left)
          }
          this.top = this.element.top
          this.left = this.element.left
          this.move()
        },
        mouseup (e) {
          this.$store.state.user.operationFlag=true;
          this.flag = false
          this.scaleFlag = false
        },
        mouseover (e) {
          if(this.$store.state.editor.editorPage.elements.indexOf(this.element)==-1){
            return
          }
          this.show = true
        },
        mouseleave(e){
          this.show = false
        },
        scaleMousedown (e) {
          this.$store.state.user.operationFlag=false;
          this.scaleFlag = true
          this.flag = true
          this.currentX = e.clientX
          this.currentY = e.clientY
          this.top = this.element.top
          this.left = this.element.left
          this.width = this.element.width
          this.height = this.element.height
          this.direction = e.target.getAttribute('data-direction')
          this.scaleMousemove()
        },
        scaleMouseup (e) {
          this.$store.state.user.operationFlag=true;
          this.scaleFlag = false
          this.flag = false
        },
        dragstart (event) {
          event.preventDefault()
        }
      },
      components: {
        Operate,
        elabBackgroundCanvas
      }
    }
</script>

<style lang='less' scoped>
  .wrap {
    position: absolute;
    cursor: move;
  }

  .wrap img {
    position: absolute;
    user-select: none;
    /*-webkit-user-drag: none;*/
  }
</style>
