import { computed, defineComponent, onMounted, ref } from 'vue'
import useDiscountStore from './useDiscountStore'

export default defineComponent(() => {
  const store = useDiscountStore()
  const idx = ref(0)
  const selectItem = computed(() => {
    return store.list[idx.value]
  })
  onMounted(() => {
    setInterval(() => {
      idx.value = idx.value + 1
      if (idx.value > store.list.length - 1) {
        idx.value = 0
      }
    }, 5000)
  })
  return () => (
    <div class="w-full h-full bg-[#ecfbff] flex flex-col" style={{
      background: `url('${selectItem.value?.commdity[0]?.img}')`
    }}>
      <div class={"absolute left-0 top-0 flex text-[14px] h-[26px] bg-[#78635D] rounded-lg items-center  text-white"}>
        <div class="bg-[#ef5a41] flex items-center  h-full text-white rounded px-2 font-bold ">
          -13%
        </div>
        <span class={" rounded-lg px-2"}>剩余1天</span>
      </div>
      <div
        class={
          'absolute right-0 h-full w-1/2 rounded-lg bg-[#0003]  backdrop-blur-md'
        }
      >
        <div class="flex flex-col w-full h-full justify-center gap-y-2 py-2 px-3">
          <span class="text-white text-[14px]">{selectItem.value.name}</span>
          <div>
            <span
              class={
                'border-[1px] border-[#f6d1b8] border-solid text-[#f6d1b8] p-1 text-[12px] rounded'
              }
            >
              {selectItem.value.typename}
            </span>
          </div>
          <div class={"flex flex-col"}>
            <span class="text-[#fffbc2] text-[18px] font-bold ">
              ￥{selectItem.value.commdity[0]?.price}
            </span>
            <span class="text-[12px] text-[#bdbdbd] line-through decoration-current">
              ￥{selectItem.value.commdity[0]?.oldprice}
            </span>
          </div>


        </div>
      </div>
    </div>
  )
})