import { defineComponent, ref, watch, type VNodeRef } from 'vue'
import useGameNews from './useGameNews'
import { RiTimeLine } from 'oh-vue-icons/icons'
import { addIcons, OhVueIcon } from 'oh-vue-icons'
import dayjs from 'dayjs'
addIcons(RiTimeLine)
export default defineComponent(() => {
  const store = useGameNews()
  const containerRef = ref<VNodeRef | null>(null as VNodeRef | null)

  const handleScroll = () => {
    const container = containerRef.value
    console.log(container)

    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
      console.log('到底了')

      store.getNews()
    }
  }
  return () => (
    <div
      class="w-full h-full  flex flex-col p-5 bg-[#17212d]"
      style={{
        background: 'rgba(23,33,45,.6)'
      }}
    >
      <div class={'flex w-full justify-center pb-5'}>
        <img class={'h-[20px]'} src="/icons/游戏资讯@2x.png"></img>
      </div>
      <div class={'h-0 w-full flex-1'}>
        <div class={'w-full h-full overflow-y-scroll'} onWheel={handleScroll} ref={containerRef}>
          <div class={'grid grid-cols-2 gap-4 '}>
            {store.list.map((item, index) => {
              return (
                <div
                  class={
                    'flex cursor-pointer  items-center  h-[110px] rounded-lg relative overflow-hidden'
                  }
                  onClick={()=> {
                    window.open(item.share_url)
                  }}
                  key={index}
                >
                  <img class={'h-full w-[40%] rounded-xl object-cover'} src={item.cover}></img>

                  <div
                    class={
                      ' absolute right-0 top-0 w-[70%] h-full  rounded-xl flex flex-col justify-between py-4 text-white  pl-2 overflow-hidden'
                    }
                    style={{
                      backdropFilter: 'blur(16px)',
                      backgroundColor: '#17212d',
                      background: 'rgba(0, 0, 0, .2)'
                    }}
                  >
                    <span class={'text-nowrap text-ellipsis overflow-hidden text-[14px]'}>
                      {item.title}
                    </span>
                    <span
                      class={' text-ellipsis overflow-hidden text-[12px] opacity-60 line-clamp-2'}
                    >
                      {item.content}
                    </span>
                    <div class={'text-[12px] items-center flex opacity-40 gap-x-1'}>
                      <OhVueIcon
                        name={RiTimeLine.name}
                        class={'text-white'}
                        scale={0.7}
                      ></OhVueIcon>
                      <span>{dayjs(item.create_time * 1000).format('YYYY-MM-DD')}</span>
                    </div>
                  </div>
                </div>
              )
            })}
          </div>
          {store.loading && (
            <div class={'w-full font-bold flex justify-center text-white py-2'}>加载中...</div>
          )}
          {store.noMoreData && (
            <div class={'w-full font-bold flex justify-center text-white py-2'}>无更多数据</div>
          )}
        </div>
      </div>
    </div>
  )
})