<!-- 可拖拽的小球 封装 -->
<template>
  <div>
    <div ref="levitatedSphere"
      class="wrap"
      :style="{
        width: itemWidth + 'px',
        height: itemHeight + 'px',
        left: left + 'px',
        top: top + 'px',
      }"
      @click="handleClick">
      <svg-icon icon-class="tool"></svg-icon>
    </div>

    <!-- 工具抽屉 -->
    <el-drawer title="工具箱"
      :visible.sync="drawer"
      size="20%"
      @click.native="drawer = false">
      <slot></slot>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'LevitatedSphere',
  props: {
    itemWidth: {
      // 悬浮按钮宽度
      type: Number,
      default: 46,
    },
    itemHeight: {
      // 悬浮按钮高度
      type: Number,
      default: 46,
    },
    gapWidth: {
      // 距离屏幕左右两边距离
      type: Number,
      default: 10,
    },
    coefficientHeight: {
      // 从上到下距离比例
      type: Number,
      default: 0.85,
    }
  },
  data() {
    return {
      top: 0,
      left: 0,
      clientWidth: 0,
      clientHeight: 0,
      drawer: false,
      downPoint: {},
      upPoint: {}
    };
  },
  created() {
    this.clientWidth = document.documentElement.clientWidth;
    this.clientHeight = document.documentElement.clientHeight;
    this.left = this.clientWidth - this.itemWidth - this.gapWidth;
    this.top = this.clientHeight * this.coefficientHeight;
  },
  mounted() {
    window.addEventListener('resize', () => {
      this.clientWidth = document.documentElement.clientWidth;
      this.clientHeight = document.documentElement.clientHeight;
      this.left = this.clientWidth - this.itemWidth - this.gapWidth;
      this.top = this.clientHeight * this.coefficientHeight;
    })
    this.$nextTick(() => {
      const sphereBtn = this.$refs.levitatedSphere;
      let isDown = false
      sphereBtn.addEventListener('mousedown', (e) => {
        e.preventDefault();
        sphereBtn.style.transition = 'none';
        this.downPoint = {
          x: e.clientX,
          y: e.clientY
        };
        isDown = true
      });
      // 在拖拽过程中，组件应该跟随手指的移动而移动
      window.addEventListener('mousemove', (e) => {
        e.preventDefault();
        if (isDown) {
          let touch = e;
          // 限制 left 和 top 的值，使其不会超出可视区域
          this.left = Math.max(this.gapWidth, Math.min(touch.clientX - 20, this.clientWidth - this.itemWidth - this.gapWidth));
          this.top = Math.max(0, Math.min(touch.clientY - 25, this.clientHeight - this.itemHeight));
        }
      });
      // 拖拽结束后，重新调整组件的位置并重新设置过渡动画
      window.addEventListener('mouseup', (e) => {
        sphereBtn.style.transition = 'all 0.5s';
        if (this.left > document.documentElement.clientWidth / 2) {
          this.left = document.documentElement.clientWidth - this.itemWidth - this.gapWidth;
        } else {
          this.left = this.gapWidth;
        }
        isDown = false
        this.upPoint = {
          x: e.clientX,
          y: e.clientY
        };
      });
    });
  },
  methods: {
    handleClick() {
      if (this.downPoint.x === this.upPoint.x && this.downPoint.y === this.upPoint.y) {
        this.drawer = !this.drawer
      }
    }
  }
}
</script>

<style lang="scss"
  scoped>
  .wrap {
    position: fixed;
    z-index: 9999;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.5s;
    font-size: 20px;

  }

  ::v-deep(.el-drawer__body) {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 让元素两端对齐 */
    justify-content: space-between;
    align-items: start;
    grid-gap: 5px;
    /* 可以根据实际情况设置容器宽度等其他样式 */
    width: 100%;

    .el-button {
      width: 100%;
      margin: 0;
    }
  }
</style>
