<template>
  <Draggable
    v-show="showOnlineTime"
    :initial-value="{ x: x, y: y }"
    storage-key="vueuse-draggable"
    storage-type="session"
    class="fixed z-2"
  >
    <div
      class="group flex items-center gap-2.5 py-2.5 pr-4 pl-3 bg-#fff rounded-xl shadow-[inset_0_2px_6px_rgba(0,0,0,0.08)] cursor-pointer transition-all duration-250 relative shadow-[inset_0_2px_8px_rgba(0,0,0,0.12)]"
    >
      <!-- 在线指示灯 -->
      <div
        class="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0 animate-pulse shadow-[0_0_6px_rgba(34,197,94,0.4)]"
      ></div>

      <!-- 时长内容 -->
      <div class="flex flex-col leading-tight">
        <span class="text-base text-gray-400 tracking-wider font-medium">今日在线时长</span>
        <span class="text-base font-bold text-blue-600 tabular-nums tracking-wider">
          {{ formatSeconds }}
        </span>
      </div>

      <!-- 关闭按钮 -->
      <div
        class="absolute -top-1.5 -right-1.5 w-4 h-4 rounded-full bg-white text-gray-400 shadow-sm flex items-center justify-center opacity-0 scale-60 transition-all duration-200 cursor-pointer group-hover:opacity-100 group-hover:scale-100 hover:!bg-red-500 hover:!text-white"
        title="关闭"
        @click.stop="showOnlineTime = false"
      >
        <svg viewBox="0 0 12 12" class="w-2.5 h-2.5">
          <path
            d="M1.5.4L6 4.9 10.5.4l1.1 1.1L7.1 6l4.5 4.5-1.1 1.1L6 7.1 1.5 11.6.4 10.5 4.9 6 .4 1.5z"
            fill="currentColor"
          />
        </svg>
      </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'
import { useOnlineTimeStore } from '@/stores'
import { storeToRefs } from 'pinia'

dayjs.extend(utc)

const onlineTimeStore = useOnlineTimeStore()
const { showOnlineTime } = storeToRefs(onlineTimeStore)

const { height } = useWindowSize()
const CONTAINER_HEIGHT = 170,
  GAP = 30

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

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>
