<template>
  <scroll-seamless class="dashboard-bg" :list="list" title="连续出勤天数">
    <template #default="{ row, index }">
      <span class="ranking">
        <i :class="{ first: index === 0, second: index === 1, third: index === 2}" class="index">{{ index + 1 }}</i>
      </span>
      <div style="width: 100%">
        <div class="top">
          {{ row.user_name }}
          <span class="day">{{ row.attendance_days }}天</span>
        </div>
        <el-progress
          :percentage="row.attendance_days / 30 * 100"
          :show-text="false"
          :stroke-width="10"
          :text-inside="true"
          color="#00B42A"
        />
      </div>
    </template>
  </scroll-seamless>
</template>

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

  let list = ref([]);

  onMounted(() => {
    executeSqlByKeyAndParam('continuous_attendance_days', {}).then(res => {
      list.value = res.data;
    });
  });
</script>

<style lang="less" scoped>

  .ranking {
    width: 40px;

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


  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    color: #fbffff;

    .day {
      color: #00B42A;
    }
  }
</style>