import { defineComponent } from 'vue'
import useHotspotStore, { PlatformList } from './useHotspotStore'
import clsx from 'clsx'
import { BiCaretRightFill } from 'oh-vue-icons/icons'
import jump from '@/utils/jump'
import { addIcons, OhVueIcon } from 'oh-vue-icons'

addIcons(BiCaretRightFill)
export default defineComponent(() => {
  const store = useHotspotStore()
  return () => (
    <div class="w-full h-full bg-[#e4eaff] flex flex-col">
      <div class={'w-full  rounded-xl flex  px-2  justify-between  items-center '}>
        <div>
          {[...PlatformList.entries()]
            .filter((_, idx) => idx === 0)
            .map(([key, value]) => (
              <div
                key={key}
                onClick={(e) => {
                  store.type = key
                  e.stopPropagation()
                }}
                class={clsx(
                  ' py-2 cursor-pointer   bg rounded-xl flex gap-x-1 relative',
                  store.type === key ? 'text-[#4162ce] font-bold' : ''
                )}
              >
                <span class={'z-10'}>{value}</span>
                {store.type === key && (
                  <img
                    src="/tab/icons/hotspot/hot_tab_bg.png"
                    class={'w-[26px] h-[11px] object-cover absolute -right-3 bottom-2'}
                    alt="bg"
                  />
                )}
              </div>
            ))}
        </div>
        <div>
          <OhVueIcon name={BiCaretRightFill.name} fill="#9B9B9B"></OhVueIcon>
        </div>
      </div>
      <div class={'w-full h-0 flex-1 '}>
        <div class="px-3  w-full bg-white rounded-xl h-full flex flex-col   justify-between">
          {store.hotMap
            .get(store.type)
            ?.filter((_, idx) => idx < 5)
            .map((item, index) => (
              <div
                key={index}
                class={'flex items-center gap-x-4 justify-between cursor-pointer group'}
                onClick={() => {
                  jump(item.url)
                }}
              >
                <div class={'flex items-center w-[85px] gap-x-2  '}>
                  <span
                    class={clsx('text-[#666]  flex justify-center items-center rounded', {
                      'text-[#ff3300]  ': index === 0,
                      'text-[#ff7e00] ': index === 1,
                      'text-[#ffc600] ': index === 2
                    })}
                  >
                    {index + 1}.
                  </span>
                  <span
                    class={
                      'text-[#666]  items-center whitespace-nowrap overflow-hidden text-ellipsis group-hover:text-[#477aff] text-[14px] leading-[14px]'
                    }
                  >
                    {item.title}
                  </span>
                </div>
                <span class="text-[#999] text-[12px]">{item.hotScore}</span>
              </div>
            ))}
        </div>
      </div>
    </div>
  )
})