<script setup>
import {publicStore} from "@/stores/public/index.js";
import {useI18n} from 'vue-i18n'
import {outBuyList} from "@/api-public/public/index.js";
import { onUnmounted } from 'vue'

const {auctionData} = publicStore()
function formatThousands(num) {

  return Number(num).toLocaleString();
}
const headList=[
  {
    label:useI18n().t('live_room.head'),
    color:'#D03050',
    value:'head'
  },
  {
    label:useI18n().t('live_room.out'),
    color:'#939393',
    value:'out'
  },
  {
    label:useI18n().t('live_room.success'),
    color:'#34B633',
    value:'success'
  }
]
const buyList=ref([])
const timer = ref(null)

const headItem=(statusCode)=>{
  return headList.find(x=>x.value===statusCode)
}

const fetchBuyList = async () => {
  const res = await outBuyList({uuid: auctionData.value.uuid})
  buyList.value = res.data.buys
}

onMounted(async()=>{
  await fetchBuyList()
  timer.value = setInterval(async () => {
    await fetchBuyList()
  }, 5000)
})

onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value)
    timer.value = null
  }
})
</script>

<template>
  <div
      id="list-container"
      class="w-344px h-86px overflow-y-auto bg-#fff rounded-4px text-14px text-#939393 pt-7px pb-7px px-11px flex flex-col justify-between"
  >
    <transition-group name="list" tag="div">
      
      <template v-if="buyList?.length>0">
        <div v-for="(item, index) in buyList" :key="index" class="flex flex-shrink-0">
          <div class="text-start shrink-0 w-1/6 break-words" :style="`color: ${headItem(item.statusCode).color}`">
            {{ headItem(item.statusCode).label }}
          </div>
          <div class="text-start shrink-0 w-[28%] break-words">
            {{ item.auctionType==='local'? $t('live_room.spot'):$t('live_room.network') }}
          </div>
          <div class="text-start shrink-0 w-[28%] break-words">
            {{ item.createdAt }}
          </div>
          <div class="text-start shrink-0 w-[28%] break-words">
            {{item.baseCurrency}}{{ formatThousands(item.baseMoney) }}
          </div>
        </div>
      </template>
  

    </transition-group>
  </div>
</template>

<style scoped>
.list-enter-active, .list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from, .list-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>