<!--
 * @Author: 纪泽龙 jizelong@qq.com
 * @Date: 2022-06-30 15:27:06
 * @LastEditors: 纪泽龙 jizelong@qq.com
 * @LastEditTime: 2022-09-11 14:20:18
 * @FilePath: /ps-fire-protection-web/src/components/Xfq/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div
    v-show="routerShow"
    ref="drag"
    :class="{ animate: !moveF }"
    @mousedown="mousedown"
    class="alarm-box"
  >
    <transition
      :enter-active-class="`animate__animated animate__bounceIn`"
      :leave-active-class="`animate__animated animate__bounceOut`"
    >
      <div class="alarm-icon-no" @mouseup="mouseup" v-show="show">
        <div class="fui" :class="{ active1 : alarmList.length >0}"></div>
        <template v-if="alarmList.length == 0">
          <div class="fu" data-v-6d35c1ee=""></div>
          <div class="fu" data-v-6d35c1ee=""></div>
          <div class="fu" data-v-6d35c1ee=""></div>
        </template>
        <template v-else>
          <div class="fu active" data-v-6d35c1ee=""></div>
          <div class="fu active" data-v-6d35c1ee=""></div>
          <div class="fu active" data-v-6d35c1ee=""></div>
        </template>

      </div>
    </transition>
    <transition
      :enter-active-class="`animate__animated ${boxEnter} ${enterOrigin}`"
      :leave-active-class="`animate__animated ${boxLeave} ${leaveOrigin}`"
    >
      <Box
        ref="xfbox"
        :routerShow="routerShow"
        :alarmList="alarmList"
        v-show="boxShow"
        :left="boxLeft"
        :top="boxTop"
      />
    </transition>
  </div>
</template>

<script>
  import Box from "./Box";
  import { getCacheAlarmInfo } from "@/api/gasdata/alarm";
  export default {
    name: "XF",
    components: {
      Box
    },
    props: {
      // 根据页面不同显示与消失
      routerShow: {
        type: Boolean,
      },
    },
    data() {
      return {
        disX: 0,
        disY: 0,
        //用来判定点击
        oldX: 0,
        oldY: 0,
        moveF: false,
        show: true,
        myDrag: null,
        // 盒子参数
        alarmList: [],
        boxLeft: "20px",
        boxTop: "20px",
        boxWidth: 600,
        boxHeight: 300,

        boxEnter: "animate__rotateInDownLeft",
        boxLeave: "animate__rotateOutUpLeft",

        enterOrigin: "",
        leaveOrigin: "",

        timer: null,
      };
    },
    computed: {
      boxShow() {
        return !this.show;
      },
    },
    watch: {
      routerShow: {
        handler(val) {
          if (val) {
            this.getList();
          } else {
            if (this.timer) {
              this.timerClose();
            }
          }
        },
        deep: true,
      },
    },
    mounted() {
      window.addEventListener("mousemove", this.mousemove);
      this.myDrag = this.$refs.drag;
      window.addEventListener("mouseup", () => {
          this.moveF = false;
      });
      this.myDrag.style.left = localStorage.getItem("left") || window.innerWidth;
      this.myDrag.style.top = localStorage.getItem("top") || "100px";
    },
    methods: {
      getList() {
        getCacheAlarmInfo().then(res =>{
          if(res.code == 200){
            this.alarmList = res.data;
            this.alarmTimer();
          }
        })
      },
      // 定时
      alarmTimer() {
        this.timerClose();
        this.timer = setInterval(() => {
          this.getList();
        }, 5000);
      },
      // 关闭定时器
      timerClose() {
        clearInterval(this.timer);
      },
      changeShow() {
        this.show = true;
        console.log("changeShow");
      },
      mousedown(e) {
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        const {
          x: domX,
          y: domY,
          width,
          height,
        } = this.myDrag.getBoundingClientRect();
        this.oldX = domX;
        this.oldY = domY;
        this.disX = mouseX - domX;
        this.disY = mouseY - domY;
        this.moveF = true;
      },
      mousemove(e) {
        if (!this.moveF) return;
        const { x, y, width, height } = this.myDrag.getBoundingClientRect();
        const mouseX = e.clientX;
        const mouseY = e.clientY;
        const domX = mouseX - this.disX;
        const domY = mouseY - this.disY;
        // 边界限制
        if (!this.back(domX, domY)) return;
        this.myDrag.style.top = domY + "px";
        this.myDrag.style.left = domX + "px";
      },
      mouseup() {
        this.moveF = false;
        const {
          x: domX,
          y: domY,
          width,
          height,
        } = this.myDrag.getBoundingClientRect();
        if (this.oldX === domX && this.oldY === domY) {
          console.log("点击");

          this.$nextTick(() => {
            // box的位置变化与  drag的位置变化 想对应
            const { x, y } = this.myDrag.getBoundingClientRect();
          // const { width, height } =
          //   this.$refs.xfbox.$el.getBoundingClientRect();
          const width = this.boxWidth;
          const height = this.boxHeight;

          // left的变化
          if (Math.abs(x - window.innerWidth) < window.innerWidth / 2) {
            this.boxLeft = -width + 20 + "px";
            this.boxEnter = "animate__rotateInDownRight";
            this.boxLeave = "animate__rotateOutUpRight";
          } else {
            this.boxLeft = 20 + "px";
            this.boxEnter = "animate__rotateInDownLeft";
            this.boxLeave = "animate__rotateOutUpLeft";
          }
          //  top
          if (Math.abs(y - window.innerHeight) < window.innerHeight / 2) {
            this.boxTop = -height + Math.ceil(height / 4) + 20 + "px";
          } else {
            this.boxTop = 20 - Math.ceil(height / 4) + "px";
          }
          this.show = !this.show;
        });
          return;
        }
        this.positionXf(domX, domY);
      },
      positionXf(domX, domY) {
        // -10是因为span的定位
        // console.log(domX - 10, domY - 10);
        const { x, y, width, height } = this.myDrag.getBoundingClientRect();
        // console.log("width",width);
        const H = window.innerHeight;
        const W = window.innerWidth;
        if (domX - 10 < 0) {
          this.myDrag.style.left = -width / 2 + "px";
        } else if (domX - 10 + width + 20 > W) {
          this.myDrag.style.left = W - 20 + "px";
        } else if (domY - 10 < 0) {
          this.myDrag.style.top = -height / 2 + "px";
        } else if (domY - 10 + height + 20 > H) {
          this.myDrag.style.top = H - 20 + "px";
        }
        console.log(this.myDrag.style.top, this.myDrag.style.left);
        localStorage.setItem("left", this.myDrag.style.left);
        localStorage.setItem("top", this.myDrag.style.top);
      },
      // 边界限制
      back(domX, domY) {
        const H = window.innerHeight;
        const W = window.innerWidth;
        if (domX <= 0) {
          this.myDrag.style.left = 0 + "px";
          return;
        } else if (domX > W - 40) {
          this.myDrag.style.left = W - 40 + "px";
          return;
        } else if (domY <= 0) {
          this.myDrag.style.top = 0 + "px";
          return;
        } else if (domY > H - 40) {
          this.myDrag.style.top = H - 40 + "px";
          return;
        }
        return true;
      },
    },
  };
</script>
<style lang="scss" scoped>
  .alarm-box {
    // cursor: grab;
    width: 40px;
    height: 40px;
    position: fixed;
    // top: 100px;
    // right: 0;
    z-index: 1002;

    .alarm-icon-no {
      cursor: grab;
      width: 35px;
      height: 35px;
      border-radius: 100%;
      text-align: center;
      line-height: 35px;
      padding: 5px 0 0 5px;
      position: relative;
      // animation: suofang-data-v-6d35c1ee 0.5s 1;
      .fui{
        width: 25px;
        height: 25px;
        background: url("../../assets/images/bj-icon-l.png") no-repeat;
        background-size: 100% 100%;
        &.active1{
          width: 25px;
          height: 25px;
          background: url("../../assets/images/bj-icon.png") no-repeat;
          background-size: 100% 100%;
        }
      }

      .fu {
        z-index: 10;
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 100%;
        animation: flicker 3s linear infinite;
        &.active{
          background: rgba(255, 222, 222, 0);
          animation: flicker2 3s linear infinite;
        }
      }
      .fu:nth-child(2) {
        border: 1px solid rgb(32 167 183 / 30%);
        transform: scale(1.5);
        &.active{
          border: 1px solid rgb(255 0 0 / 30%);

        }
      }
      .fu:last-child {
        background: rgb(0 228 255 / 20%);
        transform: scale(1.8);
        &.active{
          background: rgb(243 0 0 / 20%);

        }
      }
      @keyframes wave {
        50%,
        75% {
          transform: scale(1.5);
        }
      }
      @keyframes flicker {
        0% {
          box-shadow: 0 0 1rem 0.5 rgb(7, 199, 222, 0.1);
        }
        70% {
          box-shadow: 0rem 0 2rem 0.5rem rgba(7, 199, 222, 0.4);
        }
        100% {
          box-shadow: 0rem 0 3rem 0.5rem rgba(7, 199, 222, 0);
        }
      }

      @keyframes flicker2 {

        0% {
          box-shadow: 0 0 1rem 0.5 rgba(222, 7, 7, 0.1);
        }
        70% {
          box-shadow: 0rem 0 2rem 0.5rem rgba(222, 7, 7, 0.4);
        }
        100% {
          box-shadow: 0rem 0 3rem 0.5rem rgba(222, 7, 7, 0);
        }
      }
    }
  }
  .animate {
    transition: all 0.5s ease 0s;
  }


  .animate__animated {
    &.animate__bounceOut {
      --animate-duration: 0.5s;
    }
    &.animate__bounceIn {
      --animate-duration: 1s;
    }
  }
</style>
