<template>
  <!-- todo: 红点显示 方法没写 判断没写  网络请求没捋 -->
  <div v-if="CONFIG.imgInfo" class="float" ref="floatBox">
    <!-- 缩略到左右的图片 -->
    <div
      v-show="!showLogoIcon"
      ref="floatIcon"
      @click="showLogo"
      class="float_icon"
      :class="{ float_right: floatRight }"
    >
      <img :src="floatIcon || this.CONFIG.imgInfo.floatImg" alt="" />
    </div>
    <!-- 被拖动的div -->
    <div
      v-show="showLogoIcon"
      @touchstart.prevent="onTouchstart"
      @touchmove.prevent="onTouchmove"
      @touchend="onTouchend"
      @click="openInnerBox"
      ref="logoIcon"
      class="logo_icon"
      :class="{ float_right: floatRight }"
    >
      <img :src="logoIcon || this.CONFIG.imgInfo.logoIcon" alt="" />
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "Float",
  components: {},
  inject: ["getFinance"],
  data() {
    return {
      floatRight: false, // 靠右
      logoIconTimer: null, // 延迟 隐藏logoIcon延时器
      showLogoIcon: false, // 是否显示logoIcon
      touchFlag: false, // 是否处于触摸状态
      limitX: 0, // x轴限制拖拽范围
      limitY: 0, // y轴限制拖拽范围
      touchStartLeft: 0, // 手指按下时的元素里屏幕边缘坐标 x轴
      touchStartTop: 0, // 手指按下时的元素里屏幕边缘坐标 y轴
      touchStartX: 0, // 手指按下时 clientX x轴
      touchStartY: 0, // 手指按下时 clientY y轴
      clientWidth: 0, // 屏幕宽
      clientHeight: 0, // 屏幕高
      floatIcon: "", // 缩略图
      logoIcon: "", // logo图
      moveFlag: false, // 识别是点击还是移动
      hideLogoTimeout: null, // 定时器(点击logo之后两秒隐藏)
    };
  },
  computed: {
    ...mapState(["userInfo", "CONFIG"]),
  },
  watch: {},
  created() {},
  mounted() {
    // 触屏事件初始化信息
    this.initMove();

    // 监听横竖屏切换事件 防止滚动条出现
    window.addEventListener(
      "orientationchange",
      () => {
        if (!(this.$refs && this.$refs.floatBox)) {
          return;
        }
        this.$refs.floatBox.style.top = "40%";
        this.$refs.floatBox.style.left = 0;
        this.floatRight = false;
        this.floatIcon = "";
      },
      false
    );
  },
  methods: {
    /**
     * 触屏事件初始化信息
     */
    initMove() {
      const floatBox = this.$refs.floatBox;
      if (!floatBox) {
        return;
      }
      // 屏幕宽
      this.clientWidth = document.documentElement.clientWidth;
      // 屏幕高
      this.clientHeight = document.documentElement.clientHeight;
      // 限制拖拽范围 x轴
      this.limitX = this.clientWidth - floatBox.offsetWidth;
      // 限制拖拽范围 y轴
      this.limitY = this.clientHeight - floatBox.offsetHeight;
    },
    /**
     * 显示logo
     */
    showLogo() {
      this.showLogoIcon = true;
      this.hideLogoTimeout = setTimeout(() => {
        this.showLogoIcon = false;
      }, 2000);
    },
    /**
     * touchstart -> touchmove -> touchend -> click
     * 触摸开始
     */
    onTouchstart(e) {
      this.moveFlag = false;
      clearTimeout(this.logoIconTimer);
      this.initMove();
      const floatBox = this.$refs.floatBox;
      this.touchStartLeft = e.touches[0].clientX - floatBox.offsetLeft;
      this.touchStartTop = e.touches[0].clientY - floatBox.offsetTop;
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
    },
    /**
     * 触摸移动
     */
    onTouchmove(e) {
      if (!this.showLogoIcon) {
        return;
      }
      clearTimeout(this.hideLogoTimeout);
      const floatBox = this.$refs.floatBox;
      let moveX = e.touches[0].clientX - this.touchStartLeft;
      let moveY = e.touches[0].clientY - this.touchStartTop;

      // moveFlag 用来识别是点击还是移动
      const endX = e.touches[0].clientX - this.touchStartX;
      const endY = e.touches[0].clientY - this.touchStartY;

      this.moveFlag = Math.abs(endX) > 0 || Math.abs(endY) > 0 ? true : false;

      // x轴限制
      if (moveX < 0) {
        moveX = 0;
      }
      if (moveX > this.limitX) {
        moveX = this.limitX;
      }
      // y轴限制
      if (moveY < 0) {
        moveY = 0;
      }
      if (moveY > this.limitY) {
        moveY = this.limitY;
      }

      floatBox.style.left = moveX + "px";
      floatBox.style.top = moveY + "px";
    },
    /**
     * 触摸结束
     */
    onTouchend(e) {
      this.logoIconTimer = setTimeout(() => {
        // 获取左右距离差 吸附
        const floatBox = this.$refs.floatBox;
        const logoIcon = this.$refs.logoIcon;
        const left = floatBox.getClientRects()[0].left;
        const center = this.clientWidth / 2;
        this.floatRight = left >= center;
        const _left = this.clientWidth - logoIcon.offsetWidth;
        const leftPosition = left > center ? _left : 0;
        floatBox.style.left = `${leftPosition}px`;
        // this.floatIcon = left > center ? this.CONFIG.imgInfo.floatRight : "";
        this.showLogoIcon = false;
      }, 2000);

      clearTimeout(this.hideLogoTimeout);
      // 如果是点击 显示InnerBox
      if (!this.moveFlag) {
        this.openInnerBox();
        // 获取鸿币余额
        this.getFinance();
        return;
      }
    },

    // 点击logo 显示登录框
    openInnerBox() {
      this.$emit("openInnerBox");
    },
  },
};
</script>

<style lang="less" scoped>
.float {
  position: absolute;
  top: 40%;
  left: 0;
  z-index: 2;

  .float_icon {
    width: 30px;

    img {
      width: 100%;
    }
  }
  .logo_icon {
    width: 65px;
    img {
      width: 100%;
    }
    &.float_right {
      margin-left: 0;
    }
  }
  .float_right {
    margin-left: 35px;
    transform: rotateY(180deg);
  }
}
</style>
