<template>
  <div>
    <div class="tip">
      <img src="../assets/img/shop/tips.png" alt="" />
    </div>
    <div class="img">
      <div
        id="ai"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/ai.png" alt="" />
      </div>
      <div
        id="light1"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/light1.png" alt="" />
      </div>
      <div
        id="line"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/line.png" alt="" />
      </div>
      <div
        id="light2"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/light2.png" alt="" />
      </div>
      <div
        id="G1"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/G1.png" alt="" />
      </div>
      <div
        id="G5"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/G5.png" alt="" />
      </div>
      <div
        id="G2"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/G2.png" alt="" />
      </div>
      <div
        id="G4"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/G4.png" alt="" />
      </div>
      <div
        id="G3"
        v-drag="{
          go,
          setPan,
          getPan,
          setAi,
          getAi,
          setG5,
          getG5,
          setG4,
          getG4,
          setG2,
          getG2,
          setG3,
          getG3,
          setLight1,
          getLight1,
          setLight2,
          getLight2,
          setLine,
          getLine,
        }"
      >
        <img src="../assets/img/traffic/G3.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,
      panThing: "",
      ai: "",
      G5: "",
      G4: "",
      G2: "",
      G3: "",
      Light1: "",
      Light2: "",
      Line: "",
    };
  },
  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 isDown = false;
        var _ai = document.getElementById("ai");
        var _G1 = document.getElementById("G1");
        var _G5 = document.getElementById("G5");
        var _G4 = document.getElementById("G4");
        var _G2 = document.getElementById("G2");
        var _G3 = document.getElementById("G3");
        var _light1 = document.getElementById("light1");
        var _light2 = document.getElementById("light2");
        var _line = document.getElementById("line");

        //鼠标按下事件
        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 == "ai") {
              binding.value.setPan("ai");
              moveP(nl, nt, "ai");
            }

            if (el.id == "G1") {
              binding.value.setPan("G1");
              moveP(nl, nt, "G1");
            }
            if (el.id == "G5") {
              binding.value.setPan("G5");
              moveP(nl, nt, "G5");
            }
            if (el.id == "G4") {
              binding.value.setPan("G4");
              moveP(nl, nt, "G4");
            }
            if (el.id == "G2") {
              binding.value.setPan("G2");
              moveP(nl, nt, "G2");
            }
            if (el.id == "G3") {
              binding.value.setPan("G3");
              moveP(nl, nt, "G3");
            }
            if (el.id == "light1") {
              binding.value.setPan("light1");
              moveP(nl, nt, "light1");
            }
            if (el.id == "light2") {
              binding.value.setPan("light2");
              moveP(nl, nt, "light2");
            }
            if (el.id == "line") {
              binding.value.setPan("line");
              moveP(nl, nt, "line");
            }
          };
        }
        //鼠标抬起事件
        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() == "ai") {
            st(nl, nt, "ai");
          }

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

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

          if (binding.value.getPan() == "G4") {
            st(nl, nt, "G4");
          }
          if (binding.value.getPan() == "G2") {
            st(nl, nt, "G2");
          }
          if (binding.value.getPan() == "G3") {
            st(nl, nt, "G3");
          }
          if (binding.value.getPan() == "light1") {
            st(nl, nt, "light1");
          }
          if (binding.value.getPan() == "light2") {
            st(nl, nt, "light2");
          }
          if (binding.value.getPan() == "line") {
            st(nl, nt, "line");
          }
          pan();
        };
        function pan() {
          var policeL = _G1.offsetLeft;
          var policeT = _G1.offsetTop;

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

          if (
            binding.value.getAi() === 1 &&
            binding.value.getG5() === 1 &&
            binding.value.getG4() === 1 &&
            binding.value.getG2() === 1 &&
            binding.value.getG3() === 1 &&
            ((binding.value.getLight1() === 1 &&
              binding.value.getLight2() === 1) ||
              (binding.value.getLight1() === 2 &&
                binding.value.getLight2() === 2) ||
              (binding.value.getLight1() === 2 &&
                binding.value.getLight2() === 1) ||
              (binding.value.getLight1() === 1 &&
                binding.value.getLight2() === 1)) &&
            binding.value.getLine() === 1
          ) {
            btn.className = "button dark";
            btn.onclick = function () {
              binding.value.go();
            };
            right.style.display = "block";
            right.style.left = policeL + 300 + "px";
            right.style.top = policeT + 35 + "px";
          } else {
            btn.className = "button";
            btn.onclick = null;
            right.style.display = "none";
          }
        }
        function st(nl, nt, type) {
          var _aiL = _ai.offsetLeft;
          var _aiT = _ai.offsetTop;

          var _G1L = _G1.offsetLeft;
          var _G1T = _G1.offsetTop;

          var _G5L = _G5.offsetLeft;
          var _G5T = _G5.offsetTop;

          var _G4L = _G4.offsetLeft;
          var _G4T = _G4.offsetTop;

          var _G2L = _G2.offsetLeft;
          var _G2T = _G2.offsetTop;

          var _G3L = _G3.offsetLeft;
          var _G3T = _G3.offsetTop;

          var _light1L = _light1.offsetLeft;
          var _light1T = _light1.offsetTop;

          var _light2L = _light2.offsetLeft;
          var _light2T = _light2.offsetTop;

          var _lineL = _line.offsetLeft;
          var _lineT = _line.offsetTop;

          var ag1L = _aiL - _G1L;
          var ag1T = _aiT - _G1T;

          var g5g1L = _G5L - _G1L;
          var g5g1T = _G5T - _G1T;

          var g4g1L = _G4L - _G1L;
          var g4g1T = _G4T - _G1T;

          var g2g1L = _G2L - _G1L;
          var g2g1T = _G2T - _G1T;

          var g3g1L = _G3L - _G1L;
          var g3g1T = _G3T - _G1T;

          var l1g1L = _light1L - _G1L;
          var l1g1T = _light1T - _G1T;

          var l2g1L = _light2L - _G1L;
          var l2g1T = _light2T - _G1T;

          var lg1L = _lineL - _G1L;
          var lg1T = _lineT - _G1T;

          var l1lL = _light1L - _lineL;
          var l1lT = _light1T - _lineT;

          var l2lL = _light2L - _lineL;
          var l2lT = _light2T - _lineT;

          if (
            22 < ag1L &&
            ag1L < 62 &&
            -156 < ag1T &&
            ag1T < -116 &&
            type == "ai"
          ) {
            _ai.style.left = _G1L + 42 + "px";
            _ai.style.top = _G1T - 136 + "px";
            binding.value.setAi(1);
            playMusic();
          } else if (type == "ai") {
            binding.value.setAi(0);
          }

          if (
            -10 < g5g1L &&
            g5g1L < 30 &&
            -165 < g5g1T &&
            g5g1T < -125 &&
            type == "G5"
          ) {
            _G5.style.left = _G1L + 10 + "px";
            _G5.style.top = _G1T - 145 + "px";
            binding.value.setG5(1);
            playMusic();
          } else if (type == "G5") {
            binding.value.setG5(0);
          }

          if (
            -20 < g4g1L &&
            g4g1L < 20 &&
            -58 < g4g1T &&
            g4g1T < -18 &&
            type == "G4"
          ) {
            _G4.style.left = _G1L + "px";
            _G4.style.top = _G1T - 38 + "px";
            binding.value.setG4(1);
            playMusic();
          } else if (type == "G4") {
            binding.value.setG4(0);
          }

          if (
            95 < g2g1L &&
            g2g1L < 135 &&
            84 < g2g1T &&
            g2g1T < 124 &&
            type == "G2"
          ) {
            _G2.style.left = _G1L + 115 + "px";
            _G2.style.top = _G1T + 104 + "px";
            binding.value.setG2(1);
            playMusic();
          } else if (type == "G2") {
            binding.value.setG2(0);
          }

          if (
            24 < g3g1L &&
            g3g1L < 64 &&
            87 < g3g1T &&
            g3g1T < 127 &&
            type == "G3" &&
            binding.value.getG2() == 1
          ) {
            _G3.style.left = _G1L + 44 + "px";
            _G3.style.top = _G1T + 107 + "px";
            binding.value.setG3(1);
            playMusic();
          } else if (type == "G3") {
            binding.value.setG3(0);
          }

          if (
            24 < l1g1L &&
            l1g1L < 64 &&
            -156 < l1g1T &&
            l1g1T < -116 &&
            type == "light1"
          ) {
            _light1.style.left = _G1L + 44 + "px";
            _light1.style.top = _G1T - 136 + "px";
            binding.value.setLight1(1);
            playMusic();
          } else if (
            24 < l1lL &&
            l1lL < 64 &&
            29 < l1lT &&
            l1lT < 69 &&
            type == "light1"
          ) {
            _light1.style.left = _lineL + 44 + "px";
            _light1.style.top = _lineT + 49 + "px";
            binding.value.setLight1(2);
            playMusic();
          } else if (type == "light1") {
            binding.value.setLight1(0);
          }

          if (
            -38 < l2g1L &&
            l2g1L < 8 &&
            -171 < l2g1T &&
            l2g1T < -131 &&
            type == "light2"
          ) {
            _light2.style.left = _G1L - 18 + "px";
            _light2.style.top = _G1T - 151 + "px";
            binding.value.setLight2(1);
            playMusic();
          } else if (
            -38 < l2lL &&
            l2lL < 2 &&
            14 < l2lT &&
            l2lT < 54 &&
            type == "light2"
          ) {
            _light2.style.left = _lineL - 18 + "px";
            _light2.style.top = _lineT + 34 + "px";
            binding.value.setLight2(2);
            playMusic();
          } else if (type == "light2") {
            binding.value.setLight2(0);
          }

          if (
            -20 < lg1L &&
            lg1L < 20 &&
            -205 < lg1T &&
            lg1T < -165 &&
            type == "line" &&
            (binding.value.getLight1() === 1 ||
              binding.value.getLight2() === 1 ||
              binding.value.getLight1() === 2 ||
              binding.value.getLight2() === 2)
          ) {
            _line.style.left = _G1L + "px";
            _line.style.top = _G1T - 185 + "px";
            if (
              binding.value.getLight1() === 2 ||
              binding.value.getLight1() === 1
            ) {
              _light1.style.left = _G1L + 44 + "px";
              _light1.style.top = _G1T - 136 + "px";
            }
            if (
              binding.value.getLight2() === 2 ||
              binding.value.getLight2() === 1
            ) {
              _light2.style.left = _G1L - 18 + "px";
              _light2.style.top = _G1T - 151 + "px";
            }
            binding.value.setLine(1);
            playMusic();
          } else if (type == "line") {
            binding.value.setLine(0);
          }
        }
        function playMusic() {
          musicC.play();
        }

        function moveP(nl, nt, type) {
          if (binding.value.getAi() === 1 && type == "G1") {
            _ai.style.left = nl + 42 + "px";
            _ai.style.top = nt - 136 + "px";
          }

          if (binding.value.getG5() === 1 && type == "G1") {
            _G5.style.left = nl + 10 + "px";
            _G5.style.top = nt - 145 + "px";
          }
          if (binding.value.getG4() === 1 && type == "G1") {
            _G4.style.left = nl + "px";
            _G4.style.top = nt - 38 + "px";
          }

          if (binding.value.getG2() === 1 && type == "G1") {
            _G2.style.left = nl + 115 + "px";
            _G2.style.top = nt + 104 + "px";
          }

          if (binding.value.getG3() === 1 && type == "G1") {
            _G3.style.left = nl + 44 + "px";
            _G3.style.top = nt + 107 + "px";
          }

          if (
            (binding.value.getLight1() === 1 ||
              (binding.value.getLight1() === 2 &&
                binding.value.getLine() === 1)) &&
            type == "G1"
          ) {
            _light1.style.left = nl + 44 + "px";
            _light1.style.top = nt - 136 + "px";
          }

          if (
            (binding.value.getLight2() === 1 ||
              (binding.value.getLight2() === 2 &&
                binding.value.getLine() === 1)) &&
            type == "G1"
          ) {
            _light2.style.left = nl - 18 + "px";
            _light2.style.top = nt - 151 + "px";
          }
          if (binding.value.getLine() === 1 && type == "G1") {
            _line.style.left = nl + "px";
            _line.style.top = nt - 185 + "px";
          }

          if (binding.value.getLight1() === 2 && type == "line") {
            _light1.style.left = nl + 44 + "px";
            _light1.style.top = nt + 49 + "px";
          }

          if (binding.value.getLight2() === 2 && type == "line") {
            _light2.style.left = nl - 18 + "px";
            _light2.style.top = nt + 34 + "px";
          }

          if (
            binding.value.getLight1() === 1 &&
            binding.value.getLine() === 1 &&
            type == "line"
          ) {
            _light1.style.left = nl + 44 + "px";
            _light1.style.top = nt + 49 + "px";
            binding.value.setLight1(2);
          }

          if (
            binding.value.getLight2() === 1 &&
            binding.value.getLine() === 1 &&
            type == "line"
          ) {
            _light2.style.left = nl - 18 + "px";
            _light2.style.top = nt + 34 + "px";
            binding.value.setLight2(2);
          }
        }
      },
    },
  },
  methods: {
    go() {
      this.$router.push("/blockly");
    },
    setPan(value) {
      this.panThing = value;
    },
    getPan() {
      return this.panThing;
    },
    setAi(value) {
      this.ai = value;
    },
    getAi() {
      return this.ai;
    },
    setG5(value) {
      this.G5 = value;
    },
    getG5() {
      return this.G5;
    },
    setG4(value) {
      this.G4 = value;
    },
    getG4() {
      return this.G4;
    },
    setG2(value) {
      this.G2 = value;
    },
    getG2() {
      return this.G2;
    },
    setG3(value) {
      this.G3 = value;
    },
    getG3() {
      return this.G3;
    },
    setLight1(value) {
      this.Light1 = value;
    },
    getLight1() {
      return this.Light1;
    },
    setLight2(value) {
      this.Light2 = value;
    },
    getLight2() {
      return this.Light2;
    },
    setLine(value) {
      this.Line = value;
    },
    getLine() {
      return this.Line;
    },
  },
};
</script>

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

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

.right > img,
#ai > img,
#light1 > img,
#line > img,
#light2 > img,
#G1 > img,
#G5 > img,
#G4 > img,
#G2 > img,
#G3 > img {
  width: 100%;
  height: 100%;
  user-select: none;
}

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

#ai {
  width: 170px;
  position: absolute;
  top: 45%;
  left: 20%;
  transform: translateY(-50%);
  z-index: 5;
}

#light1 {
  width: 165px;
  position: absolute;
  top: 65%;
  left: 20%;
  transform: translateY(-50%);
  z-index: 5;
}
#line {
  width: 200px;
  position: absolute;
  top: 45%;
  left: 19.2%;
  transform: translateY(-50%);
  z-index: 3;
}
#light2 {
  width: 40px;
  position: absolute;
  left: 31%;
  top: 64%;
  transform: translateY(-50%);
  z-index: 6;
}
#G1 {
  width: 235px;
  position: absolute;
  left: 38%;
  top: 56%;
  transform: translateY(-50%);
  z-index: 4;
}
#G5 {
  width: 27px;
  position: absolute;
  left: 56%;
  top: 58%;
  transform: translateY(-50%);
  z-index: 9;
}

#G4 {
  width: 240px;
  position: absolute;
  left: 55%;
  top: 32%;
  transform: translateY(-50%);
  z-index: 9;
}
#G2 {
  width: 25px;
  position: absolute;
  left: 60%;
  top: 57%;
  transform: translateY(-50%);
  z-index: 6;
}
#G3 {
  width: 170px;
  position: absolute;
  left: 65%;
  top: 58%;
  transform: translateY(-50%);
  z-index: 9;
}
.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>
