<template>
  <scroll-seamless :list="list" title="巡检人员表现排名">
    <template #thead>
      <span class="item ranking">排名</span>
      <span class="item">巡检员</span>
      <span class="item">巡检次数</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">{{ row.user_name }}</span>
      <span class="item">{{ row.total_count }}</span>
      <span class="item num">{{ row.fail_count }}</span>
      <div class="item">
        <span :class="{ done: row.result === '优秀', wait: row.result === '不及格' }">
          {{ row.result }}
        </span>
      </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('performance_ranking_of_inspection_personnel', {}).then(res => {
      list.value = res.data;
    });
  });
</script>

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

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

      &.first {
        background: #ff3232;
      }

      &.second {
        background: #ff9800;
      }

      &.third {
        background: #ffd200;
      }
    }

    .done {
      padding: 4px 8px;
      background: rgba(29, 71, 70, .5);
      color: #12A979;
      border-radius: 20px;
    }

    .wait {
      padding: 4px 8px;
      background: rgba(76, 72, 51, .5);
      color: #E7B226;
      border-radius: 20px;
    }
  }
</style>