<template>
  <div>
    <div class="tip">
      <img src="../assets/img/light/tips.png" alt="" />
    </div>
    <div class="img">
      <div
        id="screan"
        ref="dv"
        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
      >
        <img src="../assets/img/light/screan.png" alt="" />
      </div>
      <div
        id="tou"
        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
      >
        <img src="../assets/img/light/tou.png" alt="" />
      </div>
      <div
        id="ai"
        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
      >
        <img src="../assets/img/light/ai.png" alt="" />
      </div>
      <div
        id="police"
        v-drag="{ go, getK, setk, getC, setC, getA, setA,setPan,getPan }"
      >
        <img src="../assets/img/light/light.png" alt="" />
      </div>
    </div>
    <div class="right"><img src="../assets/img/right.png" alt="" /></div>
    <div class="button">进入CocoBlockly编程平台</div>
    <video
      id="musicC"
      :src="require('../assets/music/click.mp3')"
      v-show="false"
    ></video>
  </div>
</template>

<script>
export default {
  data() {
    return {
      that: this,
      kkk: 0,
      ccc: 0,
      aaa: 0,
    };
  },
  directives: {
    drag: {
      // 指令的定义
      inserted: function (el, binding) {
        // el.drag();
        console.log(el);
        //获取元素
        // var dv = document.getElementById("dv");
        let x = 0;
        let y = 0;
        let l = 0;
        let t = 0;
        let Count = 0;
        let isDown = false;
        var dv = document.getElementById("screan");
        var dv1 = document.getElementById("tou");
        var dv2 = document.getElementById("ai");
        var dv3 = document.getElementById("police");
        var musicC = document.getElementById("musicC");

         //鼠标按下事件
        el.onmousedown = function (e) {
          //获取x坐标和y坐标
          e.preventDefault();
          x = e.clientX;
          y = e.clientY;

          //获取左部和顶部的偏移量
          l = el.offsetLeft;
          t = el.offsetTop;
          //开关打开
          isDown = true;
          //设置样式
          el.style.cursor = "move";
          subiao(el);
        };
        function subiao(cdiv) {
          document.onmousemove = function (e) {
            if (isDown == false) {
              return;
            }
            //获取x和y
            var nx = e.clientX;
            var ny = e.clientY;
            //计算移动后的左偏移量和顶部的偏移量
            var nl = nx - (x - l);
            var nt = ny - (y - t);

            cdiv.style.left = nl + "px";
            cdiv.style.top = nt + "px";

            if (el.id == "screan") {
              binding.value.setPan("screan");
              moveP(nl, nt, 1);
            }

            if (el.id == "tou") {
              binding.value.setPan("tou");
              moveP(nl, nt, 2);
            }

            if (el.id == "ai") {
              binding.value.setPan("ai");
              moveP(nl, nt, 4);
            }

            if (el.id == "police") {
              binding.value.setPan("police");
              moveP(nl, nt, 3);
            }
          };
        }
        //鼠标抬起事件
        el.onmouseup = function (e) {
          //开关关闭
          isDown = false;
          el.style.cursor = "default";
          document.onmousemove = null;
          var nx = e.clientX;
          var ny = e.clientY;
          var nl = nx - (x - l);
          var nt = ny - (y - t);
          if (binding.value.getPan() == "screan") {
            st(nl, nt, 1);
          }

          if (binding.value.getPan() == "tou") {
            st(nl, nt, 2);
          }

          if (binding.value.getPan() == "ai") {
            st(nl, nt, 4);
          }

          if (binding.value.getPan() == "police") {
            st(nl, nt, 3);
          }
          pan();
        };
        function pan() {
          var _panL = dv.offsetLeft;
          var _panT = dv.offsetTop;

          var touL = dv1.offsetLeft;
          var touT = dv1.offsetTop;

          var aiL = dv2.offsetLeft;
          var aiT = dv2.offsetTop;

          var policeL = dv3.offsetLeft;
          var policeT = dv3.offsetTop;

          var stL = policeL - touL;
          var saL = _panL - aiL;
          var spL = _panL - policeL;

          var stP = policeT - touT;
          var saP = _panT - aiT;
          var spP = _panT - policeT;

          var btn = document.getElementsByClassName("button")[0];
          var right = document.getElementsByClassName("right")[0];

          if (
            -115 < stL &&
            stL < -110 &&
            -140 < stP &&
            stP < -120 &&
            -5 <= saL &&
            saL < 8 &&
            -5 <= saP &&
            saP < 8 &&
            47 < spL &&
            spL < 70 &&
            -80 < spP &&
            spP < -62
          ) {
            btn.className = "button dark";
            btn.onclick = function () {
              binding.value.go();
            };
            right.style.display = "block";
            right.style.left = policeL + 240 + "px";
            right.style.top = policeT + "px";
          } else {
            btn.className = "button";
            btn.onclick = null;
            right.style.display = "none";
          }
        }
        function st(nl, nt, type) {
          var _panL = dv.offsetLeft;
          var _panT = dv.offsetTop;
          var touL = dv1.offsetLeft;
          var touT = dv1.offsetTop;

          var policeL = dv3.offsetLeft;
          var policeT = dv3.offsetTop;

          var aiL = dv2.offsetLeft;
          var aiT = dv2.offsetTop;

          var stL = _panL - touL;
          var stP = _panT - touT;

          var spL = _panL - policeL;
          var spP = _panT - policeT;

          var saL = _panL - aiL;
          var saP = _panT - aiT;

          var saL2 = aiL - policeL;
          var saP2 = aiT - policeT;

          var saL3 = policeL - touL;
          var saP3 = policeT - touT;

          if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40 && type == 4) {
            dv2.style.left = policeL + 63 + "px";
            dv2.style.top = policeT - 79 + "px";
            if (binding.value.getC() == 2) {
              binding.value.setA(2);
            } else {
              binding.value.setA(1);
            }
            playMusic();
          } else if (type == 4) {
            binding.value.setA(0);
          }

          if (
            -70 < stL &&
            stL < -15 &&
            45 < stP &&
            stP < 100 &&
            25 < spL &&
            spL < 85 &&
            -95 < spP &&
            spP < -40 &&
            type == 1
          ) {
            dv.style.left = policeL + 63 + "px";
            dv.style.top = policeT - 79 + "px";

            // dv1.style.left = policeL + 112 + "px";
            // dv1.style.top = policeT + 134 + "px";
            if (binding.value.getA() == 1) {
              binding.value.setC(3);
            } else {
              binding.value.setC(2);
              binding.value.setA(0);
            }
            playMusic();
          } else if (
            25 < spL &&
            spL < 85 &&
            -95 < spP &&
            spP < -40 &&
            type == 1
          ) {
            dv.style.left = policeL + 63 + "px";
            dv.style.top = policeT - 79 + "px";

            if (binding.value.getA() == 1) {
              binding.value.setC(3);
            } else {
              binding.value.setC(1);
              binding.value.setA(0);
            }
            playMusic();
          } else if (type == 1) {
            if (25 < saL2 && saL2 < 85 && -95 < saP2 && saP2 < -40) {
              binding.value.setA(1);
            }
            binding.value.setC(0);
          }

          if (-120 < saL3 && saL3 < -95 && -160 < saP3 && saP3 < -115 && type == 2) {
            dv1.style.left = policeL + 112 + "px";
            dv1.style.top = policeT + 134 + "px";

            if (binding.value.getA() == 1) {
              binding.value.setC(3);
            }
            if (binding.value.getC() == 1) {
              binding.value.setC(2);
            }
            binding.value.setk(1);
            playMusic();
          } else if (type == 2) {
            if (25 < spL && spL < 85 && -95 < spP && spP < -40) {
              if (binding.value.getA() == 1) {
                binding.value.setC(3);
              } else {
                binding.value.setC(1);
              }
            } else {
              binding.value.setC(0);
            }
            binding.value.setk(0);
          }
        }
        function playMusic() {
          musicC.play();
        }

        function moveP(nl, nt, type) {
          if (binding.value.getK() == 1 && type == 3) {
            dv1.style.left = nl + 112 + "px";
            dv1.style.top = nt + 134 + "px";
          }

          if (binding.value.getC() == 1 && type == 3) {
            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";
          }

          if (
            binding.value.getC() == 2 &&
            type == 3 &&
            binding.value.getA() != 2
          ) {
            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";

          } else if (
            binding.value.getA() == 1 &&
            type == 3 &&
            binding.value.getC() != 3
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";
          } else if (
            type == 3 &&
            binding.value.getC() == 3 &&
            binding.value.getK() == 1
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";

            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";

          } else if (
            type == 3 &&
            binding.value.getC() == 3 &&
            binding.value.getK() == 0
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";

            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";
          } else if (
            binding.value.getA() == 2 &&
            type == 3 &&
            binding.value.getC() == 2 &&
            binding.value.getK() == 1
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";

            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";

          } else if (
            binding.value.getA() == 2 &&
            type == 3 &&
            binding.value.getC() == 2 &&
            binding.value.getK() == 0
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";

            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";
          } else if (
            binding.value.getA() == 2 &&
            type == 3 &&
            binding.value.getC() == 1 &&
            binding.value.getK() == 0
          ) {
            dv2.style.left = nl + 63 + "px";
            dv2.style.top = nt - 79 + "px";

            dv.style.left = nl + 63 + "px";
            dv.style.top = nt - 79 + "px";
          }
        }
      },
    },
  },
  methods: {
    go() {
      this.$router.push("/blockly");
    },
    setk(value) {
      this.kkk = value;
    },
    getK() {
      return this.kkk;
    },
    setC(value) {
      this.ccc = value;
    },
    getC() {
      return this.ccc;
    },
    setA(value) {
      this.aaa = value;
    },
    getA() {
      return this.aaa;
    },
    setPan(value){
      this.panThing = value;
    },
    getPan(){
      return this.panThing;
    }
  },
};
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

.tip {
  margin: 25px 0 30px 20px;
  width: 419px;
}

.tip > img,
#screan > img,
#tou > img,
#ai > img,
#police > img,
.right > img {
  width: 100%;
  height: 100%;
  user-select: none;
}

.img {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: auto;
  width: 70%;
  /* position: relative; */
}

#screan {
  width: 110px;
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

#ai {
  width: 110px;
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translateY(-50%);
  z-index: 3;
}

#tou {
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%);
  z-index: 4;
}

#police {
  width: 240px;
  position: absolute;
  left: 70%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.button {
  color: #fff;
  background: #8ca1de;
  width: 550px;
  height: 55px;
  font-size: 20px;
  text-align: center;
  line-height: 55px;
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  user-select: none;
}

.right {
  width: 40px;
  position: absolute;
  left: 55%;
  top: 70%;
  display: none;
}

.dark {
  background: #5b79d0;
  cursor: pointer;
}
</style>
