<template>
  <!-- 浮框按钮 -->
  <div class="float-handle" :style="`bottom:${rect.y}px;right:${rect.x}px;`">
    <img
      style="width: 1.8rem"
      :src="getAssets('base/05.png')"
      @touchstart="onTouchstart"
      @touchmove.prevent="onTouchmove"
      @click="onShowOther"
    />
    <div class="button-handle" ref="buttonHandleRef">
      <div
        class="button"
        :style="{
          width: data.showOther ? '1.25rem' : 0,
          height: data.showOther ? '1.25rem' : 0,
        }"
        :class="`select-${index + 1}`"
        v-for="(item, index) in list"
        :key="index"
        @click="onClick(item)"
      >
        <van-image
          v-if="item.show"
          :style="{
            width: data.showOther ? '1.25rem' : 0,
            height: data.showOther ? '1.25rem' : 0,
          }"
          :src="getAssets(`base/${item.icon}.png`)"
        />
      </div>
    </div>
  </div>

  <div class="pc-handle">
    <div
      class="item"
      v-for="(item, index) in list"
      :key="index"
      @click="onClick(item)"
    >
      <img :src="getAssets(`base/${item.icon}.png`)" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { getAssets } from "@/utils";
import { toast } from "@/utils/toast";
import { useWindowSize } from "@vant/use";
import { useBaseStore } from "@/stores/modules/base";
import { useUserStore } from "@/stores/modules/user";

const userStore = useUserStore();
const { width, height } = useWindowSize();
const baseStore = useBaseStore();

const emit = defineEmits(["on-click"]);
const rect = ref({ x: 4, y: 350 });
const buttonHandleRef = ref();
const data = reactive({
  showOther: false,
});
let startPoint = { x: 0, y: 0 };
let startRect = { x: 0, y: 0 };
const onTouchstart = (e: TouchEvent) => {
  const { clientX, clientY } = e.changedTouches[0];
  startPoint = { x: clientX, y: clientY }; // 开始点
  startRect = { ...rect.value }; // 开始元素位置
};
const onTouchmove = (e: TouchEvent) => {
  const { clientX, clientY } = e.changedTouches[0];
  const diffX = clientX - startPoint.x; // 手指横向移动距离
  const diffY = clientY - startPoint.y; // 手指纵向移动距离
  let distX = startRect.x - diffX; // 元素移动的距离
  let distY = startRect.y - diffY; // 元素移动的距离
  // console.log(distY);
  if (distX < 5) {
    distX = 5;
  }
  if (distX > width.value - 37.5 * 1.2) {
    distX = width.value - 37.5 * 2;
  }

  if (distY < 70) {
    distY = 70;
  }
  if (distY > height.value - 37.5 * 2) {
    distY = height.value - 37.5 * 2;
  }

  rect.value.x = distX;
  rect.value.y = distY;
};

function onShowOther() {
  buttonHandleRef.value.style.opacity = data.showOther ? 0 : 1;
  buttonHandleRef.value.style.transform = data.showOther
    ? "scale(0.8)"
    : "scale(1.05)";

  data.showOther = !data.showOther;
}
function onClick(item: any) {
  if (item.type) {
    emit("on-click", item.type);
  } else {
    toast("Ainda não aberto!");
  }
}
const handleList = computed(() => {
  return [
    {
      icon: "redicon",
      type: "redicon",
      class: 1,
      show: baseStore.globalConfig.switchConfig
        ? baseStore.globalConfig.switchConfig.one_of_three_state &&
          baseStore.globalConfig.switchConfig.one_of_three_state == 2
          ? true
          : false
        : false,
    },
    {
      icon: "01",
      type: "loteria",
      class: 2,
      show: baseStore.globalConfig.switchConfig
        ? baseStore.globalConfig.switchConfig.pdd_state &&
          baseStore.globalConfig.switchConfig.pdd_state == 2
          ? true
          : false
        : false,
    },
    {
      icon: "02",
      type: "gameTask",
      class: 3,
      show: baseStore.globalConfig.switchConfig
        ? baseStore.globalConfig.switchConfig.activity_state &&
          baseStore.globalConfig.switchConfig.activity_state == 2
          ? true
          : false
        : false,
    },
    {
      icon: "03",
      type: "signIn",
      class: 4,
      show: baseStore.globalConfig.switchConfig
        ? baseStore.globalConfig.switchConfig.checkin_state &&
          baseStore.globalConfig.switchConfig.checkin_state == 2 &&
          userStore.userInfo.isShowCheckin
          ? true
          : false
        : false,
    },
  ];
});
const list = computed(() => {
  return handleList.value.filter((item:any) => item.show)
})
</script>

<style lang="scss" scoped>
.float-handle {
  position: fixed;
  z-index: 99;
  right: 3%;
  .button-handle {
    position: absolute;
    top: 0rem;
    transition: all 200ms linear;
    .button {
      position: absolute;
    }
  }

  .select-1 {
    left: 0.3rem;
    top: -1.2rem;
  }
  .select-2 {
    top: -0.6rem;
    left: -1rem;
  }
  .select-3 {
    top: 1rem;
    left: -1rem;
  }
  .select-4 {
    top: 1.8rem;
    left: 0.3rem;
  }
}

.pc-handle {
  position: fixed;
  right: 0.5rem;
  bottom: 4rem;
  z-index: 3;
  @include pc {
    display: none;
  }
  @include mobile {
    display: none;
  }
  .item {
    width: 1.25rem;
    height: 1.25rem;
    @extend .pointer;
  }
}
</style>
