<template>
  <scroll-seamless :list="list" title="查获排名">
    <template #right-menu>
      <div class="dashboard-right-menu">
        <span :class="{ active: currentType === 1 }" @click="handleClick(1)">
          按大队
        </span>
        <span :class="{ active: currentType === 2 }" @click="handleClick(2)">
          按班组
        </span>
        <span :class="{ active: currentType === 3 }" @click="handleClick(3)">
          按个人
        </span>
      </div>
    </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 title" :class="{ 'hide-left': currentType === 2 }" :title="row.name">{{ row.name }}</span>
      <el-progress :percentage="row.percentagePer" :show-text="false" :stroke-width="10" :text-inside="true"
        color="#409eff" />

      <span class="num">{{ row.total }}</span>
      <span class="pie">占比{{ row.scale }}%</span>
    </template>
  </scroll-seamless>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { executeSqlByKeyAndParam } from '@/api/system/sql.js';
import { getRank } from "@/api/largeScreen/largeScreen.js"
import ScrollSeamless from '@/views/dataBigScreen/dashboard/components/ScrollSeamless.vue';

const currentType = ref(1);
let list = ref([]);
const pollingInterval = ref(null);
watchEffect(() => {
  getRank({ 'type': currentType.value }).then(res => {
    const newList = res.data.map(el => {
      return {
        ...el,
        percentagePer: el.scale,
      };
    });
    list.value = newList

  });
});
const handleClick = (type) => {
  currentType.value = type;
  console.log("newList", list.value)

};
onMounted(() => {
  pollingInterval.value = setInterval(fetchData(), 5000);
});
function fetchData() {
  getRank({ 'type': currentType.value }).then(res => {
    const newList = res.data.map(el => {
      return {
        ...el,
        percentagePer: el.scale,
      };
    });
    list.value = newList
  }).catch(error => {
    clearInterval(pollingInterval.value);
  });
  return fetchData
}
</script>

<style lang="less" scoped>
.item {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &.ranking {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-right: 8px;
    flex-shrink: 0;
  }

 &.title {
    display: inline-flex;
    justify-content: flex-start;
    min-width: 80px;
    max-width: 150px;
    overflow: hidden;
    margin-right: 12px;
    white-space: nowrap;
    text-align: left;
    position: relative;
  }

  // 按班组时隐藏左边内容的样式
  &.title.hide-left {
    direction: rtl;
    text-align: left;
  }



  &.title.hide-left span {
    direction: ltr;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }


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

    &.first {
      background: #ff3232;
    }

    &.second {
      background: #ff9800;
    }

    &.third {
      background: #ffd200;
    }
  }
}


.num {
  width: 40px;
  margin-left: 12px;
  flex-shrink: 0;
}

:deep(.el-progress) {
  flex: 1;
  min-width: 60px;
  flex-shrink: 0;
}

:deep(.el-progress-bar__outer) {
  background-color: #164B7F;
}


.pie {
  width: 80px;
  margin-left: 12px;
  color: #73c0de;
  white-space: nowrap;
  flex-shrink: 0;
}


.list-item {
  display: flex;
  align-items: center;
  color: #fbffff;
  padding: 0px 16px;
  font-size: 12px;
  margin-top: 12px;
  /* 可选 */
}


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

.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;
}

/* 滚动容器 */
.scroll-box {
  height: 100%;
  overflow: hidden;
  position: relative;
  margin-top: 12px;
}

.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%);
  }
}
</style>