<script setup lang="ts">
import { onMounted, ref } from 'vue';
import SmallTitle from '../smallTitle/smallTitle.vue';
import './AssessmentScoringRanking.less'
import { handleGetExamineResultList } from '../../service';


// 考核数据
let rankList: any = ref<any>([{}, {}, {}, {}, {}])

onMounted(async () => {
    await handleGetData()
})


// 拿到数据的方法
const handleGetData = async () => {
    const req: any = {
        DataType: 1,
        StartMonth: "202501",
        EndMonth: "202501",
        provinceCode: "340000",
    }

    const data = await handleGetExamineResultList(req)
    console.log('fjdisfjoasidfj', data);
    let list: any = data.slice(0, 5)
    rankList.value = list
}

</script>

<template>
    <div class="AssessmentScoringRankingBox">
        <SmallTitle title="考核打分排行榜" />


        <div class="AssessmentScoringRankingListBox">
            <div class="AssessmentScoringRankingItem" v-for="(item, index) in rankList" :key="index">
                <div class="AssessmentScoringRankingItemTop">
                    <div
                        :class="index + 1 > 3 ? 'AssessmentScoringRankingItemIndex AssessmentScoringRankingItemIndexAfter' : 'AssessmentScoringRankingItemIndex '">
                        {{ index + 1 }}</div>
                    <div class="AssessmentScoringRankingItemName">{{ item.SERVERPART_NAME }}</div>
                </div>

                <div class="AssessmentScoringRankingItemBottom">
                    <div class="AssessmentScoringRankingItemBottomItem" v-for="(subItem, subIndex) in item.list"
                        :key="subIndex">
                        <div class="AssessmentScoringRankingItemBottomItemPosition">{{ subItem.REGION_NAME }}</div>
                        <div class="AssessmentScoringRankingItemBottomItemRight">
                            <div class="AssessmentScoringRankingItemBottomItemMark">{{ subItem.EXAMINE_SCORE }}分</div>
                            <div class="AssessmentScoringRankingItemBottomItemProgress">
                                <div class="AssessmentScoringRankingItemBottomItemHaveProgress"
                                    :style="{ width: `${subItem.EXAMINE_SCORE}%` }"></div>
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div>
    </div>
</template>
