<!--
 * @Author: nickyzhang
 * @Date: 2019-12-23 21:48:48
 * @LastEditTime : 2020-01-01 10:22:06
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /draggable/src/components/Draggable.vue
 -->
<template>
  <div
    ref="floatDrag"
    class="float-position"
    :style="{left: left + 'px', top: top + 'px', zIndex: zIndex}"
    @touchmove.prevent
    @mousemove.prevent
    @mousedown="mouseDown"
    @mouseup="mouseUp"
  >
    <div class="nav-index-button" :style="{ bottom: `${bottom}rpx`, right: `${right}rpx`, height: '50px' }" @tap.stop="scanAdd">
      <div class="nav-index-button__content">
        <div class="nav-index-button__content--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-cool-bg-color-7">
          <slot></slot>
        </div>
      </div>

      <div class="nav-index-button__meteor">
        <div class="nav-index-button__meteor__wrapper">
          <div v-for="(item, index) in 6" :key="index" class="nav-index-button__meteor__item"
                :style="{ transform: `rotateX(${-60 + 30 * index}deg) rotateZ(${-60 + 30 * index}deg)` }">
            <div class="nav-index-button__meteor__item--pic"></div>
          </div>
        </div>
      </div>
    </div>

    <a-alert
      :class="{breathe: showAlarm()}"
      type="warning" icon=""
      style="max-width:70%;position:fixed;right:52px;"
      show-icon :message="newWarnContent" >
    </a-alert>
  </div>
</template>

<script>
import moment from 'moment'
import { filterBjnr } from '@/utils/util'

const leftFix = 28
export default {
  name: "draggable",
  props: {
    distanceRight: {
      type: Number,
      default: 0
    },
    distanceBottom: {
      type: Number,
      default: 100
    },
    isScrollHidden: {
      type: Boolean,
      default: false
    },
    isCanDraggable: {
      type: Boolean,
      default: true
    },
    zIndex: {
      type: Number,
      default: 50
    },
    yjAlarmNew: {
      type: Object,
      default: () => {}
    },
    newWarnContent: {
      type: String,
      default: '---'
    }
  },
  data() {
    return {
      clientWidth: null,
      clientHeight: null,
      left: leftFix,
      top: 0,
      timer: null,
      currentTop: 0,
      isMoving: false,
      mouseXY: { x: 0, y: 0, }
    };
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
  },
  mounted() {
    this.isCanDraggable &&
      this.$nextTick(() => {
        this.floatDrag = this.$refs.floatDrag;
        // 获取元素位置属性
        this.floatDragDom = this.floatDrag.getBoundingClientRect();
        // 设置初始位置
        this.left =
          this.clientWidth - this.floatDragDom.width - this.distanceRight - leftFix;
        this.top =
          this.clientHeight - this.floatDragDom.height - this.distanceBottom - 90;
        this.initDraggable();
      });
    this.isScrollHidden && window.addEventListener("scroll", this.handleScroll);
    window.addEventListener("resize", this.handleResize);
  },
  methods: {
    /**
     * 设置滚动监听
     * 设置滚动时隐藏悬浮按钮，停止时显示
     */
    handleScroll() {
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.handleScrollEnd();
      }, 200);
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (this.left > this.clientWidth / 2) {
        // 判断元素位置再左侧还是右侧
        this.left = this.clientWidth + this.floatDragDom.width;
      } else {
        this.left = -this.floatDragDom.width;
      }
    },
    /**
     * 滚动结束
     */
    handleScrollEnd() {
      let scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop === this.currentTop) {
        console.log(this.left);
        if (this.left > this.clientWidth / 2) {
          // 判断元素位置再左侧还是右侧
          this.left = this.clientWidth - this.floatDragDom.width;
        } else {
          this.left = 0;
        }
        clearTimeout(this.timer);
      }
    },
    /**
     * 窗口resize监听
     */
    handleResize() {
      this.clientWidth = document.documentElement.clientWidth;
      this.clientHeight = document.documentElement.clientHeight;
      this.checkDraggablePosition();
    },
    /**
     * 初始化draggable
     */
    initDraggable() {
      this.floatDrag.addEventListener("touchstart", this.toucheStart);
      this.floatDrag.addEventListener("touchmove", e => this.touchMove(e));
      this.floatDrag.addEventListener("touchend", this.touchEnd);
    },
    mouseDown(e) {
      const event = e || window.event;
      const that = this;
      let floatDragWidth = this.floatDragDom.width / 2;
      let floatDragHeight = this.floatDragDom.height / 2;
      if (event.preventDefault) {
        event.preventDefault();
      }
      this.canClick = false;
      this.floatDrag.style.transition = "none";
      document.onmousemove = function(e) {
        var event = e || window.event;
        that.left = event.clientX - floatDragWidth;
        that.top = event.clientY - floatDragHeight;
      };
      this.mouseXY = { x: e.pageX, y: e.pageY}
    },
    mouseUp(e) {
      document.onmousemove = null;
      this.checkDraggablePosition();
      this.floatDrag.style.transition = "all 0.3s";
      if(e.pageX === this.mouseXY.x && e.pageY === this.mouseXY.y){
        this.$emit('click')
      }
      this.mouseXY = {x:e.pageX, y: e.pageY}
    },
    toucheStart() {
      this.canClick = false;
      this.floatDrag.style.transition = "none";
    },
    touchMove(e) {
      this.canClick = true;
      if (e.targetTouches.length === 1) {
        // 单指拖动
        let touch = event.targetTouches[0];
        this.left = touch.clientX - this.floatDragDom.width / 2;
        this.top = touch.clientY - this.floatDragDom.height / 2;
      }
    },
    touchEnd() {
      if (!this.canClick) return; // 解决点击事件和touch事件冲突的问题
      this.floatDrag.style.transition = "all 0.3s";
      this.checkDraggablePosition();
    },
    /**
     * 判断元素显示位置
     * 在窗口改变和move end时调用
     */
    checkDraggablePosition() {
      // if (this.left + this.floatDragDom.width / 2 >= this.clientWidth / 2) {
        // 判断位置是往左往右滑动
        this.left = this.clientWidth - this.floatDragDom.width - leftFix;
      // } else {
      //   this.left = 0;
      // }
      if (this.top < 0) {
        // 判断是否超出屏幕上沿
        this.top = 0;
      }
      if (this.top + this.floatDragDom.height >= this.clientHeight) {
        // 判断是否超出屏幕下沿
        this.top = this.clientHeight - this.floatDragDom.height;
      }
    },
    showAlarm(){
      return this.yjAlarmNew && moment().diff(moment(this.yjAlarmNew.WARN_TIME), 'minutes') <= 1440
    },
    filterBjnr
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.handleScroll);
    window.removeEventListener("resize", this.handleResize);
  },
  computed:{
  }
};
</script>

<style lang="less" scoped>
@size: 50px;

.float-position {
  position: fixed;
}

.nav-index-button {
  position: fixed;
  animation: suspension 3s ease-in-out infinite;
  z-index: 999999;

  &__content {
    position: absolute;
    width: @size;
    height: @size;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &--icon {
      width: @size;
      height: @size;
      font-size: 15px;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;
      transform: scale(0.85);

      &::after {
        content: ' ';
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(/icon_bg6.png);
      }
    }
  }

  &__meteor {
    position: absolute;
    top: 50%;
    left: 50%;
    width: @size;
    height: @size;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateY(75deg) rotateZ(10deg);

    &__wrapper {
      width: @size;
      height: @size;
      transform-style: preserve-3d;
      animation: spin 20s linear infinite;
    }

    &__item {
      position: absolute;
      width: @size;
      height: @size;
      border-radius: 1000rpx;
      left: 0;
      top: 0;

      &--pic {
        display: block;
        width: 100%;
        height: 100%;
        background: url(/arc3.png) no-repeat center center;
        background-size: 100% 100%;
        animation: arc 4s linear infinite;
      }
    }
  }
  .tn-cool-bg-color-7 {
    background-image: repeating-linear-gradient(45deg, #ff6200, #ec813e);
    color: #FFFFFF;
  }
  @keyframes suspension {
    0%,
    100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-0.8rem);
    }
  }

  @keyframes spin {
    0% {
      transform: rotateX(0deg);
    }

    100% {
      transform: rotateX(-360deg);
    }
  }

  @keyframes arc {
      to {
        transform: rotate(360deg);
      }
  }
}


.breathe {
	box-shadow:0 1px 2px rgba(0,0,0,.3);
	overflow:hidden;
  animation: breathe 1.5s ease-in-out infinite alternate;
}
@keyframes breathe {
	0% {
    opacity:.65;
    box-shadow:0 1px 2px rgba(255,255,255,0.1);
  }
  100% {
    opacity:1;
    border:1px solid rgb(184, 212, 57);
    box-shadow:0 1px 30px rgb(199, 62, 69);
  }
}
</style>
