<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2025-12-16 11:10:26
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2026-04-14 17:20:18
 * @FilePath: /test-ranqi/src/views/Rotate.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="container">
    <div
      @mouseenter="imgScale = 1.2"
      @mouseleave="imgScale = 1"
      @click="centerClick"
      class="imgcenter-shadow"
    ></div>
    <img
      class="imgcenter"
      :src="center"
      :style="{ transform: `scale(${imgScale})` }"
      alt=""
    />
    <div class="out-box" ref="outBox">
      <div
        v-for="item in imgArr"
        :key="item.src"
        @mouseenter="mouseenter"
        @mouseleave="mouseleave"
        class="a"
        :style="{
          background: `url(${item.img}) no-repeat`,
          backgroundSsize: '100% 100%;',
        }"
        @click="imgClick(item.src)"
      ></div>
      <!-- <div class="a"></div> -->
      <!-- 地图 -->
      <div class="b" ref="b"></div>
      <!-- 两个圆圈 -->
      <div class="c" ref="c"></div>
      <div class="d" ref="d"></div>
      <div class="e" ref="e"></div>
    </div>
  </div>
</template>

<script>
// url(${item.src}) no-repeat
import center from "@/assets/bigwindowImg/rotate/center.png";
import ajxc from "@/assets/bigwindowImg/rotate/ajxc.png";
import yhgl from "@/assets/bigwindowImg/rotate/yhgl.png";
import kqdw from "@/assets/bigwindowImg/rotate/kqdw.png";
import tjfx from "@/assets/bigwindowImg/rotate/tjfx.png";
import aqgl from "@/assets/bigwindowImg/rotate/aqgl.png";
import sbsmzq from "@/assets/bigwindowImg/rotate/sbsmzq.png";
import yjgl from "@/assets/bigwindowImg/rotate/yjgl.png";
import yxjc from "@/assets/bigwindowImg/rotate/yxjc.png";

export default {
  name: "",
  data() {
    return {
      timer: null,
      rotateNum: 0,
      rotateNumb: 0,
      imgScale: 1,
      clickTimer: null,
      imgArr: [
        { img: ajxc, src: "/checktask/jmchacktask" },
        { img: yhgl, src: "/danger/danger" },
        { img: kqdw, src: "/gasinfo/in" },
        { img: tjfx, src: "/inspectStatistics/residentstatistics" },
        { img: aqgl, src: "/safe/meeting" },
        { img: sbsmzq, src: "/cycle/cycle" },
        { img: yjgl, src: "/urgent/contacts" },
        { img: yxjc, src: "/reportinfo/gasdata" },
      ],
      center,
    };
  },
  mounted() {
    clearInterval(this.timer);
    this.rotate();
  },
  beforeDestroy() {
    console.log("离开");
    clearInterval(this.timer);
  },
  methods: {
    rotate() {
      this.timer = setInterval(() => {
        this.rotateNum += 0.1;
        const { outBox, b, c, d, e } = this.$refs;
        // 防止组件销毁后 refs 变为 null 导致报错
        if (!outBox || !b || !c || !d || !e) return;

        outBox.style.transform = `rotateY(${this.rotateNum}deg)`;
        b.style.transform = ` rotateY(-${this.rotateNum}deg)  translateZ(10px) `;
        c.style.transform = `rotateX(90deg)  translateZ(230px) rotateZ(${this.rotateNum}deg)`;
        d.style.transform = `rotateX(90deg)  translateZ(230px) rotateZ(${this.rotateNum}deg)`;
        e.style.transform = `rotateX(90deg)  translateZ(130px) rotateZ(${this.rotateNum}deg)`;
        const degNum = 360 / this.imgArr.length;
        const a = this.$el.querySelectorAll(".a");
        a.forEach((item, index) => {
          item.style.transform = ` rotateY(${
            degNum * index
          }deg) translateZ(300px) rotateY(-${
            degNum * index + this.rotateNum
          }deg)`;
        });
      }, 10);
    },

    centerClick() {
      this.$emit("centerClick");
      this.mouseenter()
    },
    imgClick(src) {
      this.$emit("imgClick", src);
      this.mouseenter()

    },
    mouseenter() {
      clearInterval(this.timer);
    },
    mouseleave() {
      this.rotate();
    },
  },
};
</script>
<style lang="scss" scoped>
// body {
//   // background: url("~@/assets/bigwindowImg/rotate/bg.png") no-repeat;
//   width: 100%;
//   height: 100%;
// }
.container {
  perspective: 1400px;
  transform-style: preserve-3d;

  transform: rotateX(-15deg);
  .qinxie {
  }
}
.imgcenter {
  position: absolute;
  width: 300px;
  height: 300px;
  left: 50%;
  margin-left: -150px;
  top: -220px;
  transform-style: preserve-3d;
  pointer-events: none;
  transition: all 0.1s linear;
}
.imgcenter-shadow {
  position: absolute;

  width: 180px;
  height: 200px;
  background: red;
  left: 50%;
  margin-left: -100px;
  top: -180px;
  z-index: 999;
  opacity: 0;
  cursor: pointer;
}
.out-box {
  position: relative;
  // width: 100px;
  // height: 100px;
  margin: 300px auto;
  // background: red;
  transform-style: preserve-3d;

  // animation: rotateDog .5s linear infinite;
  &:hover {
    // animation-play-state: paused;
  }
  & .a {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: 1px;
    height: 70px;
    width: 50px;
    z-index: 99900;
    background: url("~@/assets/bigwindowImg/rotate/ajxc.png") no-repeat;
    background-size: 100% 100% !important;
    cursor: pointer;
    // transition: all 0.1s linear;

    // background: blue;
    &:hover {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -28px;
      margin-left: -38px;
      height: 100px;
      width: 76px;
    }

    div {
      text-align: center;
    }
  }
  .b {
    position: absolute;
    left: 50%;
    margin-left: -100px;
    top: -100px;
    transform-style: preserve-3d;

    // background: blue;
    height: 200px;
    width: 200px;
    transform: translateZ(200px) rotateX(-10deg);
    z-index: -1;
    pointer-events: none;
  }

  .c {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    // border: 1px solid red;
    // border-top-color: black;
    background: url("~@/assets/bigwindowImg/rotate/bottomC.png") center
      no-repeat;
    background-size: 100% 100%;
    transform: rotateX(90deg) translateZ(250px);
  }
  .d {
    position: absolute;
    left: 50%;
    top: 3px;
    margin-left: -300px;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    border: 1px solid rgba(89, 178, 245, 0.6);
    box-shadow: 0px 3px 1px 2px rgba(89, 178, 245, 0.6); /* 添加阴影效果 */
    // border-top-color: black;
    // background: url("~@/assets/bigwindowImg/rotate/bottomD.png") center no-repeat;
    transform: rotateX(90deg) translateZ(250px);
  }
  .e {
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -200px;
    width: 400px;
    height: 400px;
    // border-radius: 50%;
    // border: 1px solid red;
    // border-top-color: black;
    background: url("~@/assets/bigwindowImg/rotate/circleBg.png") center
      no-repeat;
    background-size: 100% 100%;
    transform: rotateX(90deg) translateZ(250px);
  }
  .a:nth-child(1) {
    transform: translateZ(300px);
  }

  .a:nth-child(2) {
    transform: rotateY(60deg) translateZ(300px);
  }

  .a:nth-child(3) {
    transform: rotateY(120deg) translateZ(300px);
  }

  .a:nth-child(4) {
    transform: rotateY(180deg) translateZ(300px);
  }

  .a:nth-child(5) {
    transform: rotateY(240deg) translateZ(300px);
  }

  .a:nth-child(6) {
    transform: rotateY(300deg) translateZ(300px);
  }
}
@keyframes rotateDog {
  0% {
    transform: rotateY(0);
  }

  100% {
    transform: rotateY(360deg);
  }
}
</style>
