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


// 繁忙排行
const busyRankList = ref<any>([])
// 交易排行
const transactionList = ref<any>([])


onMounted(async () => {
    // 获取服务区繁忙度的数据
    await handleGetServiceBusyData()
})


// 获取服务区繁忙度的数据
const handleGetServiceBusyData = async () => {
    // 繁忙度
    const req: any = {
        // action_type: "getCurHalfCollect",
        // province_code: 5564
        ProvinceCode: '530000',
        ServerpartId: "",
        DataType: '1'
    }
    // const data = await handleGetCurHalfCollect(req)
    const data = await handleGetCurBusyRank(req)
    console.log('服务区繁忙度数据:', data);
    let list: any = data.List
    // 营收排行
    const revenueReq: any = {
        ProvinceCode: '530000',
        ServerpartId: "",
        DataType: '2'
    }
    const revenueData = await handleGetCurBusyRank(revenueReq)
    // busyRankList.value = data.CollectionObject.slice(0, 5)
    busyRankList.value = list.slice(0, 5)
    transactionList.value = revenueData.slice(0, 5)
}

</script>


<template>
    <div class="BusyTradingRankingBox">

        <div class="BusyTradingRankingContentItem">
            <SmallTitle :title="'服务区繁忙排行'" />

            <div class="BusyTradingRankingDataList">
                <div class="BusyTradingRankingItem" v-for="(item, index) in busyRankList" :key="index" :style="{
                    background: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)'
                }">
                    <div class="BusyTradingRankingItemLeft">
                        <div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{
                            index + 1
                            }}</div>
                        <div class="BusyTradingRankingLabel">{{ item.ServerpartName }}</div>
                    </div>

                    <div class="BusyTradingRankingItemRight" :style="{
                        color: item.TicketCount > 30 ? '#FF0000' : item.TicketCount > 15 ? '#0fdb5c' : '#0094ff'
                    }">
                        {{ item.TicketCount > 30 ? '繁忙' : item.TicketCount > 15 ? '良好' : '空闲' }}
                    </div>
                </div>
            </div>

        </div>

        <div class="BusyTradingRankingContentItem" v-if="false">
            <SmallTitle :pageType="'center'" :title="'服务区交易排行'" />

            <div class="BusyTradingRankingDataList">
                <div class="BusyTradingRankingItem" v-for="(item, index) in transactionList" :key="index" :style="{
                    background: index % 2 === 0 ? 'rgba(22, 28, 47, 1)' : 'rgba(0, 0, 0, 0.2)'
                }">
                    <div class="BusyTradingRankingItemLeft" style="width: 70%;">
                        <div class="BusyTradingRankingIndex" :style="{ color: index >= 3 ? '#008CFF' : '#FF9500' }">{{
                            index + 1
                            }}</div>
                        <div class="BusyTradingRankingLabel">{{ item.ServerpartName }}</div>
                    </div>

                    <div class="tradingRankingItemRight" style="width: 30%;">
                        <span class="tradingRankingItemTOTALPRICE">{{ item.TotalAmount }}</span>
                        <span class="tradingRankingItemUnit">元</span>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>