<!--
 * @Author: Kane
 * @Date: 2023-03-08 14:18:39
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/components/HonorListComponent.vue
 * @Description: 光荣榜组件
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="honorlist-wrapper">
        <span class="title">“90俱乐部”{{ $props.month }}月入围坐席</span>
        <div class="reward-wrapper">
            <div class="leading-reward-wrapper">
                <div class="banner-wrapper">
                    <img
                        src="@/assets/img/ranking/medal.png"
                        alt="领跑奖"
                    >
                    <span>领跑奖</span>
                </div>
                <div class="gainer-wrapper">
                    <span
                        v-for="gainer in ui.leadingReward"
                        :key="gainer"
                    >{{ gainer }}</span>
                </div>
            </div>
            <div class="advance-reward-wrapper">
                <div class="banner-wrapper">
                    <img
                        src="@/assets/img/ranking/copper_medal.png"
                        alt="飞跃奖"
                    >
                    <span>飞跃奖</span>
                </div>
                <div class="gainer-wrapper">
                    <span
                        v-for="gainer in ui.advanceReward"
                        :key="gainer"
                    >{{ gainer }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { reactive } from "vue";
export default {
    name: "HonorListComponent",
    props: {
        month: {
            type: String,
            require: true,
            default: () => "本",
        },
        leadingReward: {
            type: Array,
            require: true,
            default: () => ["",],
        },
        advanceReward: {
            type: Array,
            require: true,
            default: () => ["",],
        },
    },
    setup( props )
    {
        const ui = reactive({
            leadingReward: props.leadingReward as string[],
            advanceReward: props.advanceReward as string[],
        });

        console.log( props );
        return { ui, };
    },
};
</script>

<style scoped lang="scss">
.honorlist-wrapper {
    height: 240px;
    width: 360px;
    border-radius: 5px;

    background-color: $color-honorlist-bg;
    backdrop-filter: blur(10px);

    padding: 10px;

    >*+* {
        margin-top: 10px;
    }

    .title {
        display: block;
        text-align: center;

        font: {
            family: "FZ-ZHUOHEI";
            size: 1.4rem;
        }

        color: goldenrod;
    }

    .reward-wrapper {
        width: 100%;

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

        >*+* {
            margin-left: 10px;
        }

        .leading-reward-wrapper {
            width: 165px;
            height: 100%;

        }

        .advance-reward-wrapper {
            width: 165px;
            height: 100%;
        }

        span {
            display: block;

            margin-top: 5px;

            text-align: center;
                color: #fff;

                font: {
                    size: 2rem;
                    family: "FZ-ZHUOHEI";
                    weight: 100;
                }
        }

        .banner-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
            }

            span {
                display: inline-block;
                text-align: center;
                color: #fff;

                font: {
                    size: 1.5rem;
                    family: "FZ-ZHUOHEI";
                    weight: 100;
                }
            }
        }
    }
}
</style>
