<template>
  <scroll-seamless :list="list" title="移交公安情况">
    <!-- 右侧 Tab -->
    <template #right-menu>
      <div class="dashboard-right-menu">
        <span :class="{ active: currentType === 'ranking_of_seizures_by_department' }"
          @click="handleClick('ranking_of_seizures_by_department')">今日</span>
        <span :class="{ active: currentType === 'ranking_of_seizures_by_team' }"
          @click="handleClick('ranking_of_seizures_by_team')">本周</span>
        <span :class="{ active: currentType === 'ranking_of_seizures_by_individual' }"
          @click="handleClick('ranking_of_seizures_by_individual')">本月</span>
      </div>
    </template>
    <template #thead>
      <span class="item">违禁品类型</span>
      <span class="item">查获数量</span>
      <span class="item">查获地点</span>
      <span class="item">查获人</span>
    </template>
    <template #default="{ row, index }">
      <span class="item icon">
        <span class="icon">
          <svg-icon :icon-class="row.svg" />
        </span>
        {{ row.categoryNameTwo }}
      </span>
      <span class="item">{{ row.quantity }}</span>
      <span class="item">{{ row.regionalName }}</span>
      <span class="item">{{ row.nackName }}</span>

      <!-- <span class="item detail">详情</span> -->
    </template>
  </scroll-seamless>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getPolice } from '@/api/largeScreen/largeScreen.js';
import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';

function today() {
  return new Date().toISOString().slice(0, 10);
}
function weekRange() {
  const d = new Date();
  const day = d.getDay() || 7; // 周日返回 7
  const start = new Date(d);
  start.setDate(d.getDate() - day + 1);
  const end = new Date(start);
  end.setDate(start.getDate() + 6);
  return {
    startDate: start.toISOString().slice(0, 10),
    endDate: end.toISOString().slice(0, 10)
  };
}
function monthRange() {
  const d = new Date();
  const start = new Date(d.getFullYear(), d.getMonth(), 1);
  const end = new Date(d.getFullYear(), d.getMonth() + 1, 0);
  return {
    startDate: start.toISOString().slice(0, 10),
    endDate: end.toISOString().slice(0, 10)
  };
}

/* -------------- 组件逻辑 -------------- */
const list = ref([]);
const currentType = ref('ranking_of_seizures_by_department');
const svg = ['du', 'huo', 'baozha'];
const pollingInterval = ref(null);
function loadData() {
  let params = {};
  switch (currentType.value) {
    case 'ranking_of_seizures_by_department':
      params = { specifiedDate: today() };
      break;
    case 'ranking_of_seizures_by_team':
      params = weekRange();
      break;
    case 'ranking_of_seizures_by_individual':
      params = monthRange();
      break;
  }
  getPolice(params).then(res => {
    const total = res.data.reduce((pre, cur) => pre + cur.quantity, 0);
    list.value = res.data.map(item => ({
      ...item,
      svg: svg[Math.floor(Math.random() * svg.length)],
      percentage: Math.floor((item.quantity / total) * 100),
    }));
  }).catch(error => {
    console.error(error);
    clearInterval(pollingInterval.value);
  });
  return loadData
}

const handleClick = (type) => {
  currentType.value = type;
  loadData();
};

onMounted(() => {
  pollingInterval.value = setInterval(loadData(), 5000);
}
);
</script>

<style scoped>
/* 字段标题 */
.thead {
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  color: #fbffff;
  font-size: 12px;
  font-weight: bold;
}

.thead .item {
  flex: 1;
  text-align: center;
}

/* 滚动容器 */
.scroll-box {
  width: 100%;
  /* height: calc(100% - 40px); */
  margin: 0 auto;
  overflow: hidden;
  color: #fbffff;
  font-size: 12px;
  padding: 0 16px;
}

.scroll-list {
  height: 100%;
  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: 36px;
  flex-shrink: 0;
}

.list-item .item {
  flex: 1;
  text-align: center;
  white-space: nowrap;
}

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.detail {
  color: #8abaef;
}

.dashboard-right-menu span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  background: #11134b;
  padding: 4px 8px;
  margin: -4px 0;
  border-radius: 4px;
  color: #fbffff;
}

.dashboard-right-menu span.active {
  background: #171b75;
}
</style>