<template>
    <div class="rank-list">
        <div class="list-thead">
            <div class="ranking-number">{{lan.$t('paiming')}}</div>
            <div class="user-info">{{lan.$t("xingming")}}</div>
            <div class="hits">{{lan.$t("shipindianjiliang")}}</div>
        </div>
        <div class="list-body">
            <div class="rank-item" v-for="(item,index) in newList" :key="index" :class="{'mine-item': item.isme }">
                <div class="other-rank" :class="{'mine-rank': item.isme }">
                    <div class="ranking-number">
                        <span v-if="item.isme" class="mine">{{lan.$t("wo")}}</span>
                        <div v-else>
                            <img src="@/static/images/rank_first.png" class="rank-img" v-if="index === 0" />
                            <img src="@/static/images/rank_second.png" class="rank-img" v-else-if="index === 1" />
                            <img src="@/static/images/rank_third.png" class="rank-img" v-else-if="index === 2" />
                            <span class="other" v-else>{{ item.rank }}</span>
                        </div>
                    </div>
                    <div class="user-info">
                        <a-avatar :size="34" :src="item.img">
                            <template v-slot:icon><UserOutlined /></template>
                        </a-avatar>
                        <span class="name">{{ item.name }}</span>
                    </div>
                    <div class="hits">{{ item.clicks }}</div>
                </div>
                <div class="third-ellipsis" v-if="item.rank == 3">...</div>
                <div class="twenty-ellipsis" v-if="item.rank === deadLine">
                    <div class="third-ellipsis">
                        <div>...</div>
                    </div>
                    <div class="line"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { UserOutlined } from '@ant-design/icons-vue';
import { useI18n } from '@/utils/i18n';

export default defineComponent({
    name: 'RankList',
    components: {
        UserOutlined
    },
    props: {
        list: {
            type: Array
        }
    },
    setup(props) {
        const deadLine = ref(4); // 写死的合格线
        const list = ref(props.list);
        const lan = useI18n()
        let mineRank = 0; // 自己的排名
        list.value!.forEach((element: any) => {
            if(element.isme) {
                mineRank = element.rank;
            }
        });
        // 过滤数据
        const newList = list.value!.filter((item: any) => {
            return item.rank <= 3 || item.rank == deadLine.value || item.rank === mineRank || item.rank === mineRank - 1 || item.rank === mineRank + 1;
        })
        
        return {
            newList,
            deadLine,
            lan
        }
    }
})
</script>
<style lang="scss" scoped>
.rank-list {
    @mixin rank-public {
        display: flex;
        align-items: center;
        .ranking-number {
            width: 135px;
            text-align: left;
        }
        .user-info {
            flex: 1;
        }
        .hits {
            width: 170px;
            text-align: center;
        }
    }
    .list-thead {
        @include rank-public;
        font-size: 11px;
        font-weight: 500;
        color: #656565;
        margin-bottom: 24px;
    }
    .list-body {
        .rank-item {
            position: relative;
            &:not(:last-child) {
                margin-bottom: 26px;
            }
            .other-rank {
                @include rank-public;
            }
            .mine-rank {
                // margin: 28px 0;
                width: calc(100% + 14px);
                display: flex;
                align-items: center;
                height: 56px;
                position: absolute;
                top: 0;
                left: -14px;
                background: #FFFFFF;
                box-shadow: 0px 3px 24px 0px rgba(58, 58, 58, 0.31);
                border-radius: 7px;
                box-sizing: border-box;
                padding-left: 14px;
                .hits {
                    color: #0EBCA4;
                }
            }
            .ranking-number {
                .rank-img {
                    width: 27px;
                    height: 28px;
                }
                .other {
                    display: inline-block;
                    width: 27px;
                    text-align: center;
                }
                .mine {
                    color: #0DBBA3;
                }
            }
            .user-info {
                .name {
                    margin-left: 11px;
                    font-size: 11px;
                    font-weight: bold;
                    color: #000000;
                }
            }
            .hits {
                font-size: 11px;
                font-weight: bold;
                color: #111111;
            }
            .third-ellipsis {
                height: 10px;
                width: 28px;
                text-align: center;
                font-size: 15px;
                font-weight: bold;
                color: #666666;
                user-select: none;
            }
            .twenty-ellipsis {
                height: 20px;
                display: flex;
                align-items: flex-end;
                .third-ellipsis {
                    width: 135px;
                    text-align: left;
                    line-height: 0px;
                    > div {
                        width: 27px;
                        text-align: center;
                    }
                }
                .line {
                    width: 427px;
                    height: 1px;
                    background: #09AE99;
                }
            }
        }
        .mine-item {
            padding-bottom: 54px;
        }
    }
}
</style>