<!--
 * @Author: Kane
 * @Date: 2023-06-06 11:01:01
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/RankingListComponent.vue
 * @Description: 排行榜组件
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="rankinglist-wrapper">
        <div class="rankinglist-title">
            <span>{{ props.title }}</span>
        </div>
        <el-table
            :data="topFive"
            stripe
            style="width:100%;"
            :header-cell-style="{background:'#fecb96'}"
        >
            <el-table-column
                label="名次"
                width="60"
                align="center"
            >
                <template #default="ranking">
                    <span class="rankinglist-index">{{ ranking.row.index }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="名称"
                width="160"
                align="center"
            >
                <template #default="ranking">
                    <span class="rankinglist-index">{{ ranking.row.callerName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                label="指标"
                width="80"
                align="center"
            >
                <template #default="ranking">
                    <span class="rankinglist-index">{{ ranking.row.appraiseValue }}%</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
/* eslint-disable */
import { computed } from "vue";

interface RankingListItem
{
    index: number;
    callerName: string;
    appraiseValue: string;
}

export default {
    name: "RankingListComponent",
    props: {
        title: {
            type: String,
            require: true,
            default: () => "",
        },
        rankingList: {
            type: Array,
            require: true,
            default: () => [],
        },
    },
    /**
     * setup函数
     * @param props 组件的props属性。
     */
    setup(props)
    {
        /**
         * 计算对象，用于获取top5.
         */
        const topFive = computed(() =>
        {
            const rankingList = props.rankingList; // eslint-disable-line

            rankingList.sort((a, b) =>
            {
                // @ts-ignore
                return a.index - b.index;
            });

            return rankingList.slice(0, 5);
        });

        return { props, topFive, };
    },
};
</script>

<style lang="scss" scoped>
.rankinglist-wrapper {
    // border: 1px solid red;
    border-radius: 5px;
    width: 300px;
    height: 270px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 15px;
}

.rankinglist-index {
    display: block;
    text-align: center;
}

:deep(.el-table)
{
    border-radius: 0px 0px 5px 5px;
}

:deep(.el-table__header-wrapper) {
  thead {
    th{
      div{
        // font-family: "FZ-ZHUOHEI";
        font-weight: 500;
        font-size: 15px;
        color: #da3703;
      }
    }
  }
}

.rankinglist-title {
    color: #da3703;
    background-color: #fecc96;

    width: 100%;
    border-radius: 5px 5px 0px 0px;

    height: 1.5rem;

    display: flex;
    justify-content: center;
    align-items: center;

    padding-top: 10px;
    padding-bottom: 0px;

    span {
        font: {
            size: 1rem;
            weight: 700;
        }
    }
}

</style>
