<template>
  <transition name="online-time">
    <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>
  </transition>
</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>
<style lang="scss" scoped>
.online-time-enter-from,
.online-time-leave-to {
  opacity: 0;
  transform: translateY(10px);
}

.online-time-enter-active,
.online-time-leave-active {
  transition: all 0.3s ease;
}
</style>
