<template>
  <Draggable
    :initial-value="{ x: x, y: y }"
    storage-key="vueuse-draggable"
    storage-type="session"
    class="fixed"
  >
    <div class="cursor-pointer online-time flex flex-col items-center z-1050">
      <!-- 图片容器 -->
      <div
        class="mb-4 w-24 h-24 bg-white rounded-full shadow-xl flex items-center justify-center hover:scale-110 transition-transform cursor-pointer"
      >
        <img src="@/assets/img/culture/ask.png" draggable="false" alt="吉祥物" class="w-20 h-20" />
        <!-- 如果没有图片，用emoji代替 -->
        <!-- <span class="text-6xl">🎯</span> -->
      </div>

      <!-- 时长显示卡片 -->
      <div
        class="w-24 md:w-28 lg:w-32 h-16 md:h-18 lg:h-20 rounded-lg bg-gradient-to-br from-white via-blue-50 to-purple-50 shadow-lg hover:shadow-xl border border-white/50 flex flex-col justify-center items-center transition-all duration-300 ease-out hover:scale-105 hover:-translate-y-1 backdrop-blur-sm relative overflow-hidden group transform-gpu backface-hidden will-change-transform"
      >
        <!-- 其他内容保持不变 -->
        <div
          class="absolute inset-0 bg-gradient-to-r from-blue-400/5 via-purple-400/5 to-pink-400/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500"
        ></div>

        <div
          class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-blue-400 via-purple-400 to-pink-400 opacity-80"
        ></div>
        <div
          class="absolute top-1 left-0 right-0 h-1 bg-gradient-to-r from-blue-300 via-purple-300 to-pink-300 opacity-60"
        ></div>

        <div class="text-center px-3 relative z-10">
          <div class="text-xs md:text-sm text-gray-700 font-medium mb-1 tracking-wide">
            今日在线时长
          </div>
          <div
            class="text-center text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent"
          >
            {{ formatSeconds }}
          </div>
        </div>

        <div class="absolute bottom-2 left-3 right-3 h-1 bg-gray-200 rounded-full overflow-hidden">
          <div
            class="h-full bg-gradient-to-r from-blue-400 to-purple-400 rounded-full animate-pulse"
            :style="{
              width: widthRate + '%',
            }"
          ></div>
        </div>

        <div class="absolute top-3 right-3 w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
        <div
          class="absolute bottom-3 left-3 w-1.5 h-1.5 bg-blue-400 rounded-full animate-pulse"
          style="animation-delay: 0.8s"
        ></div>

        <div
          class="absolute left-0 top-4 bottom-4 w-0.5 bg-gradient-to-b from-transparent via-purple-300 to-transparent opacity-50"
        ></div>
        <div
          class="absolute right-0 top-4 bottom-4 w-0.5 bg-gradient-to-b from-transparent via-blue-300 to-transparent opacity-50"
        ></div>
      </div>
    </div>
  </Draggable>
</template>
<script setup lang="ts">
import { UseDraggable as Draggable } from '@vueuse/components'
import { useWindowSize } from '@vueuse/core'
import { getTodayOnlineSeconds, heartbeat } from '@/api'
import dayjs from 'dayjs'
import utc from 'dayjs/plugin/utc'
dayjs.extend(utc)

const { height } = useWindowSize()
const CONTAINER_HEIGHT = 170,
  GAP = 30
// CONTAINER_WIDTH = 130
const maxSeconds = 60 * 30 // 半小时

const x = GAP
const y = height.value - CONTAINER_HEIGHT - GAP
const currentSeconds = ref(0)

// 进度条的比例
const widthRate = computed(() => {
  if (currentSeconds.value >= maxSeconds) {
    return 100
  } else {
    return (currentSeconds.value / maxSeconds) * 100
  }
})

// 在线时长格式化 将秒级 格式化为 00:00
// 如果大于一个小时的话，则显示小时:分钟:秒
const formatSeconds = computed(() => {
  if (currentSeconds.value >= 60 * 60) {
    return dayjs.utc(currentSeconds.value * 1000).format('hh:mm:ss')
  } else {
    return dayjs.utc(currentSeconds.value * 1000).format('mm:ss')
  }
})

onMounted(async () => {
  const { data } = await getTodayOnlineSeconds()
  heartbeat()
  currentSeconds.value = data
})

const timer1 = setInterval(() => {
  currentSeconds.value++
}, 1000)
const timer2 = setInterval(async () => {
  heartbeat()
}, 1000 * 30)
onUnmounted(() => {
  clearInterval(timer1)
  clearInterval(timer2)
})
</script>
