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

    if (container.scrollTop + container.clientHeight >= container.scrollHeight - 50) {
      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'}>
        <div class={'relative group'}>
          <input
            class={
              'py-1 px-5 bg-white/20 rounded-2xl w-[440px] text-white border-none outline-none'
            }
            value={searchText.value}
            placeholder="请输入搜索内容"
            onInput={(e: any) => {
              searchText.value = e.target.value
            }}
            onKeydown={(e: any) => {
              if (e.key === 'Enter') {
                store.getNews()
              }
            }}
          ></input>
          <div class={'absolute cursor-pointer hidden group-hover:block right-3 top-1/2 -translate-y-1/2'}>
            <OhVueIcon name={RiCloseCircleLine.name} fill="#ddd"></OhVueIcon>
          </div>
        </div>
      </div>
      <div class={'h-0 w-full flex-1'}>
        <div
          class={'w-full h-full overflow-y-scroll  scrollbar-hide'}
          onWheel={handleScroll}
          ref={containerRef}
        >
          <div class={'grid grid-cols-3 gap-4 '}>
            {store.list.map((item, index) => {
              return (
                <div
                  class={
                    'flex cursor-pointer h-[215px] overflow-hidden bg-[#17212d] items-center flex-col  rounded-lg relative '
                  }
                  onClick={() => { }}
                  key={index}
                >
                  <img class={'h-[142px] w-full object-cover'} src={item.commdity[0]?.img}></img>
                  <div
                    class={
                      'absolute bottom-0 w-full h-[100px] rounded-lg bg-[#0003]  backdrop-blur-md'
                    }
                  >
                    <div class="flex flex-col w-full h-full justify-between py-2 px-3">
                      <span class="text-white text-[14px]">{item.name}</span>
                      <div>
                        <span
                          class={
                            'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
                          }
                        >
                          {item.typename}
                        </span>
                      </div>
                      <div class="bg-white/20 flex rounded items-center">
                        <div class="bg-[#ef5a41] h-full text-white rounded px-2 text-[18px] font-bold ">
                          -13%
                        </div>
                        <span class="text-[#fffbc2] text-[16px] ml-2">
                          ￥{item.commdity[0]?.price}
                        </span>
                        <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
                          ￥{item.commdity[0]?.oldprice}
                        </span>
                        <span class="text-[12px] text-[#ebebeb] line-through decoration-current">
                          剩余{item.commdity[0]?.oldprice}天
                        </span>
                      </div>
                    </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>
  )
})