<template>
  <scroll-seamless :list="list" title="异常情况排名">
    <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">{{ row.item_name }}</span>
      <el-progress
        :percentage="row.fail_percentage"
        :show-text="false"
        :stroke-width="10"
        :text-inside="true"
        color="#409eff"
      />

      <span class="item num">异常{{ row.fail_count }}次</span>
      <span class="item pie">异常率{{ row.fail_percentage }}%</span>
    </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';

  const classOptions = {
    limitMoveNum: 7,
  };

  let list = ref([]);

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

<style lang="less" scoped>

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

    &.title {
      width: 80px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 8px;
    }

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

  :deep(.el-progress) {
    flex: 1;
  }

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

  .num {
    width: 50px;
    margin-left: 12px;
    white-space: nowrap;
  }

  .pie {
    width: 80px;
    margin-left: 12px;
    color: #73c0de;
    white-space: nowrap;
  }
</style>