<!-- ConcealScroll.vue -->
<template>
  <scroll-seamless :list="list" title="隐匿夹带情况">
    <template #thead>
      <span class="item ranking">排名</span>
      <span class="item start">隐匿类别</span>
      <span class="item start">隐匿物品</span>
      <span class="item">隐匿数量</span>
      <span class="item">隐匿部位</span>
    </template>
    <template #default="{ row, index }">
      <span class="item ranking">
        <i :class="{ first: index === 0, second: index === 1, third: index === 2 }" class="index">
          {{ index + 1 }}
        </i>
      </span>
      <span class="item start">{{ row.categoryNameTwo }}</span>
      <span class="item start">{{ row.itemName }}</span>
      <span class="item num">{{ row.quantity }}</span>
      <span class="item">{{ row.checkPositionNameOne }}</span>
    </template>
  </scroll-seamless>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getConceal } from '@/api/largeScreen/largeScreen.js';
import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';
const list = ref([]);
const pollingInterval = ref(null);
onMounted(() => {
  pollingInterval.value = setInterval(fetchData(), 5000);
});
function fetchData() {
  getConceal().then((res) => {
    list.value = res.data;
  })
    .catch(error => {
      console.error(error);
      clearInterval(pollingInterval.value);
    });
  return fetchData
}


</script>

<style scoped>
/* 表头样式保持原样 */
::v-deep(.thead) {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  color: #fbffff;
  font-size: 12px;
  font-weight: bold;
}

::v-deep(.thead .item) {
  width: 20%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

::v-deep(.thead .item.ranking) {
  width: 10%;

}

::v-deep(.thead .item.start) {
  text-align: left;
  justify-content: start;
}

/* 滚动容器 */
.scroll-box {
  height: calc(100% - 40px);
  /* 去掉表头高度 */
  overflow: hidden;
  position: relative;
}

.scroll-list {
  display: flex;
  flex-direction: column;
  animation-name: scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes scroll {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-50%);
  }
}

/* 行样式 */
.list-item {
  display: flex;
  align-items: center;
  height: 24px;
  flex-shrink: 0;
  color: #fbffff;
  font-size: 12px;
  padding: 0 16px;
}

.list-item .item {
  width: 20%;
  text-align: center;
  white-space: nowrap;
}

.list-item .item.start {
  text-align: left;
}

.list-item .item.ranking {
  width: 10%;
}

.index {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  background: #5470c6;
  border-radius: 4px;
  font-style: normal;
}

.index.first {
  background: #ff3232;
}

.index.second {
  background: #ff9800;
}

.index.third {
  background: #ffd200;
}

.num {
  color: #91cc75;
}
</style>