import useLayoutStore from '@/layout/useLayoutStore'
import request from '@/utils/request'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import { computed, defineComponent, onMounted, ref, watch, type CSSProperties } from 'vue'
import { FaChevronLeft } from 'oh-vue-icons/icons'
import type { CarouselRef } from 'ant-design-vue/es/carousel'
import { randomNum } from '@/utils/tool'
addIcons(FaChevronLeft)
interface Owner {
  face: string
  mid: number
  name: string
}

interface GameData {
  _id: string
  aid: number
  ctime: number
  duration: number
  owner: Owner
  pic: string
  rid: string
  time: string
  title: string
  type: string
}
export default defineComponent(() => {
  const list = ref<GameData[]>([])
  const currentIndex = ref(-1)

  const current = computed(() => {
    if (currentIndex.value === -1) {
      return null
    } else {
      return list.value[currentIndex.value]
    }
  })
  watch(
    () => useLayoutStore().state.current,
    (val) => {
      const type = val === 0 ? 'game' : val === 1 ? 'study' : 'entertainment'
      request<GameData[]>('GET', `/api/hotVideo?type=${type}`).then((res) => {
        list.value = res
        currentIndex.value = randomNum(0, list.value.length)
      })
    },
    {
      immediate: true
    }
  )
  onMounted(() => {
    setInterval(() => {
      currentIndex.value = currentIndex.value === list.value.length - 1 ? 0 : currentIndex.value + 1
    }, 5000)
  })
  return () => (
    <div class="w-full h-full p-2  bg-[#17212d] ">
      {
        <div
          class={'w-full h-full rounded-xl relative group'}
          style={{
            backgroundImage: `url('https://uetab.com/countdown-img/pic2.jpg')`,
            backgroundSize: 'cover',
            backgroundPosition: 'center',
            backgroundRepeat: 'no-repeat'
          }}
        >
          <div
            class={
              'absolute bottom-0 left-1/2 -translate-x-1/2 pb-2 w-[300px] flex flex-col text-white '
            }
          >
            <span class="text-[14px] text-ellipsis overflow-hidden whitespace-nowrap">
              {current.value?.title}
            </span>
            <span class="text-[12px] opacity-60">{current.value?.owner.name}</span>
          </div>
          <div
            onClick={(e) => {
              e.stopPropagation()

              currentIndex.value =
                currentIndex.value === 0 ? list.value.length - 1 : currentIndex.value - 1
            }}
            class="absolute hidden bottom-[20px] group-hover:flex items-center justify-center  left-[0px] w-[22px] h-[22px] bg-white/30 rounded"
          >
            <OhVueIcon name={FaChevronLeft.name} class={'text-white/80'}></OhVueIcon>
          </div>
          <div
            onClick={(e) => {
              e.stopPropagation()
              currentIndex.value =
                currentIndex.value === list.value.length - 1 ? 0 : currentIndex.value + 1
            }}
            class="absolute hidden bottom-[20px] group-hover:flex items-center justify-center  right-[0px] rotate-180 w-[22px] h-[22px] bg-white/30 rounded"
          >
            <OhVueIcon name={FaChevronLeft.name} class={'text-white/80'}></OhVueIcon>
          </div>
        </div>
      }
    </div>
  )
})