<template>
  <div class='wrap'>
    <div @click="checkPause">
      <audio loop :src="isOverView?'':src" id="audio" autoplay preload="auto">该浏览器不支持audio属性</audio>
      <img width="100%" height="100%" v-if="audioP" src="../../../static/img/open.png" alt="">
      <img width="100%" height="100%" v-else src="../../../static/img/close.png" alt="">
      <img v-if="audioP" width="100%" height="100%"
        src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAACoCAMAAABDlVWGAAABJlBMVEUAAAAAAAD////l5eX///9iYmKDg4Pn5+f///9YWFj////09PT////4+Pjt7e3///////9oaGhBQUH////////////////CwsIaGhr///8xMTEkJCT////7+/vp6en///////////////+srKyoqKienp58fHz////y8vKTk5P///8EBAT////////////////V1dW3t7f////////////////////v7++jo6N9fX3///////+UlJT////s7Oz////Nzc3///////+RkZGPj495eXkTExP////////29vb////k5OTPz882Njb////////////c3Nz///////9ycnJsbGz///9dXV3////////Q0ND///9QUFD///////////////////9FeiN6AAAAYXRSTlNmAP3c+oWT3ueB9vA19ealRId5EQbuurpu83RxD/nh05dfAquooo+M7JtzaSolE+vMspJ3Wj7w6KSQj6ucKeXNxLWnmpmObVYd8t3axXZRSt7TvbKLideCeSzHnn4V3Nh6YarbPAAABlRJREFUeNrU14lWEmEYh/GXcdj3HQTZRCkS913UNE2zbLd9Oc/930Q2LmVpwPAC03MD/M5835n/IC6dkqHnzcVoZvdkLp2HfHruZDcTXWw+DyVdOilAt6uNjI8782Ua1W2XjTShtdDSmzRdlH6zFKq5bKQBTS5H57gqXJrP1tsb7kShkBPJFQoJ90a7np0vhblqLrrc8R7oQ4vVPZOLIp8mp8flzsanJ59FuMjcqxZdHVKFxvYDWK1lPQXpooInu4ZVYD/m6pAWNLn0DSvvekJ6KLHuxerb0qyrQwrQViV/oZzKSc/lpi6sgUrLdSN16MyWARBcOBWbnS4EAYytj67r1KGtqMUseaSvPCWLGr14u+pDZysmwFhc+i4+BmBWZgcATTXTFvO9qOS3qOlmShu68g7A6xa13F6A7yuq0ORnA9jZENU2dgDjc1IPGvMB4QNR7+AJ4IspQVObBjDmF+Wur6qxmdKAbpeBoEcGlCcIlLf7hx7lOzxOlYeaP+oTmmoYQFsGWhswGql+oMUMEInLgItHgEzRPvS43OHYVY+/fGwXGvIBkzKU6oAvZA8aywOPZEg9AvIxO9AXAZg4lKF1OAGBF71DX5jw5EyG2NkTMJ/3Co2ZcM8tQ819D8xYb9CVgA2nijSw0gs0tArBzk59aRBWQ91Dj30QjssIiofBd9wttFiGiTMZSWcTUC52B629Bg5lRB0Cr2tdQRvAfRlZ94FGN9AjA+oywupgHHWGzuRhTEbaGORnOkFTZYj4ZaT5I1BOdYBuAnEZcXFg89/QmAFtGXltMGL/ghZ9I7+g19fUV/wHtAJBvzggfxAqd0NXDPCII/KAsXIXNPXOIQd/efjvUndAmxB2xMH/zB+G5u3Qr2k4EMd0AOmvt0IrsCMOagcqt0FbJkyLg5oGs3ULNApecVReiP4NnTHALY7KDcbHv6BbDno1XTUGW39CWwa8F4flB6P1B3TRgQ/UeqSLN6GzAQd83f1dHAKzN6AfoCQOrARLN6Andr9GpiITT9/KwPLAye/QGATFTusAxsOCDKogxH6D7sOC2GkNq+B9GVALsP8LWgzAqdjJ4LJXCRlIpxAoXkOrtteT6yYmH8gg8kL1GroHU/1CoTSQBZ6CvSto0oRc/1DM7GNRLwdm8hK6DF5RgMI9j6jnheVLaBTWdaAwPy7KrUP0Alqbg4QWlPCU6JaAuZoFDcGaqEHh6RdRLQIhC/oBsppQzAXVN1UWlixoBjyqUIhozr8H3vyE1lYhpwnVnv8CpH9CZyAi2lAIPtK8pDPn0Cp8UoWqz/8zqJ5DGzCpCdWf/0lonEMzMK0J1Z//acicQ30wrgnVn/9x8LkkCWFRherPfxiSEgKvLlR//r0QkmWY14Xqz/88LEsTsqpQ/fm3RlQWoa4L1Z//OixKFNq6UP35vw9RycDGMKAYD3P9vEhlF9y6UP35d8OuvISELlR//hPwUqxh0oTqz781TbIKueFB4em4rb/Mq5IfMpRn0nOPIS+ADBUatvcz/w/0B/X2VgMACMNQ9AMnWOADKwT/QuahyZYcDcte7e146X9W+vFmWmEzOeOJGfjMCmWOEubMYw7no7wizHPHvMuMAMFIOo5IxsiOjJDLSOOM2cDYN44hxliMjGnL2OAOWMCgGgz84uBEDKDFIG8ORLhzLPO2Y5kK6PpMdJiBsR28nQkMOBEMJtTixISY4JUTZWPCgVXevesgCINhGG7dZPLEIg7GRRsMTsaoMTEOnmLUuBgn+e//JuTHGt0aKT3y3QIFpj6vO9ctnbnAmr9PIysefn0E0PfhkjW92HFtnQHULn5AAG9aISZGF3NaQYxVrInRrcVYBW4H5vkPEPIfuIV5UGXhClHT8Qv9oXQ/MckoTfb+wVTGqK8ZUl9+4mmUnpGj03pOmzlH5y/w5w6ZiAil+G9qA0KpkfWMTxKsJ6530wel3try9CwjSscg27BTDcw321gHjzyuEjj9IbwP1hPeDqHo2abP0pn5XMR/NhTB/fyo2gv3q0gh1JSkEHCrUuMSG1VxCdxDOtfR1ZDr4AGUwIUACi5JJZMyx1RHUgY3kIn0LBuFQk2EFlv7J3t0+id7JPi86wlJsfm9FUVbQrZR1LrPmQ0hKZfSXC7Fzr5LeD7uGoYBQBCGV56PS2g5ewGy+NkUNbjr9gAAAABJRU5ErkJggg=="
        alt="">
      <!--<Operate class="operate" v-show="(element === editingElement)|| $store.state.editor.complexEditorElement.indexOf(element)>-1" :element="element" />-->
    </div>
  </div>
</template>


<script>
// import Operate from './../OperateNew'
import appConst from "../../util/appConst";
export default {
  props: {
    src: {
      type: String,
      require: true
    },
    showOperate: {
      type: Boolean
    },
    stopEvent: {
      type: Boolean
    },
    isOverView: {
      default: false,
      type: Boolean
    },
    type: ""
  },
  data() {
    return {
      left: 0,
      top: 0,
      width: 0,
      height: 0,
      currentX: 0,
      currentY: 0,
      flag: false,
      scaleFlag: false,
      direction: "",
      audioP: false,
      http: appConst.BACKEND_DOMAIN
    };
  },
  computed: {
    editingElement() {
      return this.$store.getters["editingElement"];
    }
  },
  methods: {
    checkPause() {
      var audio = document.querySelector("#canvasPage audio");
      if (audio !== null) {
        //检测播放是否已暂停.audio.paused 在播放器播放时返回false.
        if (audio.paused) {
          audio.play(); //audio.play();// 这个就是播放
          this.audioP = false;
        } else {
          audio.pause(); // 这个就是暂停
          this.audioP = true;
        }
      }
    },
    // 处理元素拖动
    move() {
      document.querySelector(".editor").onmousemove = event => {
        var e = event || window.event;
        if (this.flag) {
          let nowX = e.clientX;
          let nowY = e.clientY;
          let disX = nowX - this.currentX;
          let disY = nowY - this.currentY;
          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;
          switch (this.direction) {
            // 左边
            case "w":
              this.element.width = parseInt(this.width) - disX;
              this.element.left = parseInt(this.left) + disX;
              break;
            // 右边
            case "e":
              this.element.width = parseInt(this.width) + disX;
              break;
            // 上边
            case "n":
              this.element.height = parseInt(this.height) - disY;
              this.element.top = parseInt(this.top) + disY;
              break;
            // 下边
            case "s":
              this.element.height = parseInt(this.height) + disY;
              break;
            // 左上
            case "nw":
              this.element.width = parseInt(this.width) - disX;
              this.element.left = parseInt(this.left) + disX;
              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.left = parseInt(this.left) + disX;
              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;
              break;
            // 右下
            case "se":
              this.element.height = parseInt(this.height) + disY;
              this.element.width = parseInt(this.width) + disX;
              break;
          }
        }
      };
    },
    mousedown(downEvent) {
      this.$store.state.user.operationFlag = false;
      if (this.element.locked) {
        return false;
      }
      if (this.stopEvent) {
        return false;
      }
      let ele = this.element;
      let startY = downEvent.clientY;
      let startX = downEvent.clientX;
      let startTop = ele["top"];
      let startLeft = ele["left"];
      if (
        this.$store.state.editor.complexEditorElement.indexOf(ele) > -1 &&
        this.$store.state.editor.complexEditorElement.length > 1
      ) {
        var startTopArr = this.$store.state.editor.complexEditorElement.map(
          v => v.top
        );
        var startLeftArr = this.$store.state.editor.complexEditorElement.map(
          v => v.left
        );
      }
      let move = moveEvent => {
        let currX = moveEvent.clientX;
        let currY = moveEvent.clientY;
        if (
          this.$store.state.editor.complexEditorElement.indexOf(ele) > -1 &&
          this.$store.state.editor.complexEditorElement.length > 1
        ) {
          this.$store.state.editor.complexEditorElement.forEach(
            (ele, index) => {
              ele["top"] = currY - startY + startTopArr[index];
              ele["left"] =
                ele.type == "frame" ? 0 : currX - startX + startLeftArr[index];
            }
          );
          return;
        }
        ele["top"] = currY - startY + startTop;
        ele["left"] = currX - startX + startLeft;
      };
      let up = () => {
        this.$store.state.user.operationFlag = true;
        document.removeEventListener("mousemove", move);
        document.removeEventListener("mouseup", up);
      };
      document.addEventListener("mousemove", move);
      document.addEventListener("mouseup", up);
    },
    // mouseup (e) {
    //   this.$store.state.user.operationFlag=true;
    //   this.flag = false
    //   this.scaleFlag = false
    // },
    scaleMousedown(e) {
      this.$store.state.user.operationFlag = false;
      this.scaleFlag = 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;
    },
    dragstart(event) {
      console.log("dragstart");
      event.preventDefault();
    }
  }
  // components: {
  //   Operate
  // }
};
</script>

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

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