<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
import {liveStore} from "@/stores/live/index.js";
import {authStore} from "~/stores/auth/index.js";
const {auctionData} = liveStore()
const {userInfo}= authStore()
const list = ref([
  {
    a: '领先',
    b: '现场竞价',
    c: '10:12:12',
    d: 'RMB5,500',
    e: '我'
  }
]);

let intervalId = null;

const addItem = () => {
  list.value.push({
    a: '领先',
    b: '现场竞价',
    c: '10:12:12',
    d: 'RMB5,500',
    e: ''
  });
  nextTick(() => {
    scrollToBottom();
  });
};

const scrollToBottom = () => {
  const container = document.getElementById('list-container');
  if (container) {
    setTimeout(() => {
      container.scrollTop = container.scrollHeight;
    }, 100);
  }
};

onMounted(() => {
  // 每秒添加一条数据
/*  intervalId = setInterval(() => {
    addItem();
  }, 1000);*/
});

onUnmounted(() => {
  // 清理定时器
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</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="auctionData.wsType==='stopArtwork'">
          <div class="text-#939393 text-14px">即将开始下一个拍品</div>
      </template>
      <template v-else-if="auctionData.auctionPriceList?.buys?.length>0">
        <div v-for="(item, index) in auctionData.auctionPriceList?.buys" :key="index" class="flex flex-shrink-0 h-25px">
          <div class="flex-grow-1 text-start" :style="`color: ${item.statusCode==='head'?'#D03050':'#939393'}`" >{{ item.statusCode==='head'?'领先':'出局' }}</div>
          <div class="flex-grow-1 text-center">{{ item.auctionType==='local'?'现场竞价':'网络竞价' }}</div>
          <div class="flex-grow-1 text-center">{{ item.createdAt }}</div>
          <div class="flex-grow-1 text-center">{{ item.baseMoney }}</div>
          <div class="flex-grow-1 text-center text-#2B53AC">{{ item.userId===userInfo.ID?'我':'' }}</div>
        </div>
      </template>
      <template v-if="auctionData.wsType==='newArtwork'">
        <div class="text-#939393 text-14px">开始拍卖</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>