<script setup lang="ts">
import { onMounted, ref } from 'vue';
import NewBigTitleBox from '../newBigTitleBox/newBigTitleBox.vue';
import './OverviewOfServiceArea.less'
import { handleGetCurBusyRank, handleGetServerpartList, handleGetServerpartServiceSummary } from '../../service';
import SmallTitle from '../smallTitle/smallTitle.vue';


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

// 服务区的详情数据
const serviceInfo = ref<any>()
// 繁忙度的信息
const businessInfo = ref<any>()

// 获取服务区数据
const handleGetData = async () => {
    const req: any = {
        ProvinceCode: "530000",
    }

    const data = await handleGetServerpartServiceSummary(req)

    console.log('fhdushgsu9dgvuisdvgsudvhnjldsfas', data);

    // 因为之前不是这个接口 已经写了一份 为了不做过多的修改 按照老的 赋值走
    // 服务区总对数
    let serviceAllTotal: number = data.ServerpartCount
    // 司机之家对数
    let HASPILOTLOUNGETotal: number = data.DriverRoomCount
    // 加油站对数
    let REFUELINGGUNTotal: number = data.GasStationCount
    // 充电桩个数
    let ChargingStationTotal: number = data.ChargeStationCount
    // 停车位个数
    let ParkingSpaceTotal: number = data.ParkingLotCount
    // 卫生间个数
    let toiletTotal: number = data.ToiletCount
    // 母婴室个数
    let NursingRoomTotal: number = data.NursingRoomCount
    // 尿素
    let URECOUNTTotal: number = data.UreaCount
    // 加水站数量
    let WaterStationCount: number = data.WaterStationCount
    // 观景台数量
    let ViewingDeckCount: number = data.ViewingDeckCount
    // 停车区数量
    let ParkingServiceCount: number = data.ParkingServiceCount
    // 加水
    let WaterCount: number = data.WaterCount
    // 休息区数量
    let RestAreaCount: number = data.RestAreaCount
    // 总数
    let ServerpartTotalCount: number = data.ServerpartTotalCount


    // if (data && data.length > 0) {
    //     data.forEach((item: any) => {
    //         serviceAllTotal += 1

    //         if (item.RegionInfo && item.RegionInfo.length > 0) {
    //             item.RegionInfo.forEach((subItem: any) => {
    //                 if (subItem.HASPILOTLOUNGE > 0) {
    //                     HASPILOTLOUNGETotal += 1
    //                 }

    //                 if (subItem.STATEGRIDCHARGE > 0 || subItem.LIAUTOCHARGE > 0 || subItem.GACENERGYCHARGE > 0 || subItem.OTHERCHARGE > 0) {
    //                     ChargingStationTotal += (subItem.STATEGRIDCHARGE || 0)
    //                     ChargingStationTotal += (subItem.LIAUTOCHARGE || 0)
    //                     ChargingStationTotal += (subItem.GACENERGYCHARGE || 0)
    //                     ChargingStationTotal += (subItem.OTHERCHARGE || 0)
    //                 }


    //                 if (subItem.REFUELINGGUN98 > 0 || subItem.REFUELINGGUN92 > 0 || subItem.REFUELINGGUN95 > 0 || subItem.REFUELINGGUN0 > 0) {
    //                     REFUELINGGUNTotal += (subItem.REFUELINGGUN98 || 0)
    //                     REFUELINGGUNTotal += (subItem.REFUELINGGUN92 || 0)
    //                     REFUELINGGUNTotal += (subItem.REFUELINGGUN95 || 0)
    //                     REFUELINGGUNTotal += (subItem.REFUELINGGUN0 || 0)
    //                 }

    //                 if (subItem.SMALLPARKING > 0 || subItem.PACKING > 0 || subItem.TRUCKPACKING > 0 || subItem.LONGPACKING > 0 || subItem.DANPACKING > 0 || subItem.LIVESTOCKPACKING > 0) {
    //                     ParkingSpaceTotal += (subItem.SMALLPARKING || 0)
    //                     ParkingSpaceTotal += (subItem.PACKING || 0)
    //                     ParkingSpaceTotal += (subItem.TRUCKPACKING || 0)
    //                     ParkingSpaceTotal += (subItem.LONGPACKING || 0)
    //                     ParkingSpaceTotal += (subItem.DANPACKING || 0)
    //                     ParkingSpaceTotal += (subItem.LIVESTOCKPACKING || 0)
    //                 }

    //                 if (subItem.TOILETCOUNT > 0 || subItem.HASWIFI > 0 || subItem.HASPANTRY > 0) {
    //                     toiletTotal += (subItem.TOILETCOUNT || 0)
    //                     toiletTotal += (subItem.HASWIFI || 0)
    //                     toiletTotal += (subItem.HASPANTRY || 0)
    //                 }
    //                 if (subItem.HASMOTHER) {
    //                     NursingRoomTotal += 1
    //                 }
    //                 if (subItem.UREA_COUNT > 0) {
    //                     URECOUNTTotal += (subItem.UREA_COUNT || 0)
    //                 }
    //             })
    //         }
    //     })
    // }

    let res: any = {
        serviceAllTotal: serviceAllTotal,
        HASPILOTLOUNGETotal: HASPILOTLOUNGETotal,
        REFUELINGGUNTotal: REFUELINGGUNTotal,
        ChargingStationTotal: ChargingStationTotal,
        ParkingSpaceTotal: ParkingSpaceTotal,
        toiletTotal: toiletTotal,
        NursingRoomTotal: NursingRoomTotal,
        URECOUNTTotal: URECOUNTTotal,
        WaterStationCount: WaterStationCount,
        ViewingDeckCount: ViewingDeckCount,
        ParkingServiceCount: ParkingServiceCount,
        WaterCount: WaterCount,
        ServerpartTotalCount: ServerpartTotalCount,
        RestAreaCount: RestAreaCount
    }
    console.log('fdjsifjasjfs', res);

    serviceInfo.value = res


    // 繁忙度
    const businessReq: any = {
        // action_type: "getCurHalfCollect",
        // province_code: 5564
        ProvinceCode: '530000',
        ServerpartId: "",
        DataType: '1'
    }
    // const data = await handleGetCurHalfCollect(req)
    const businessData = await handleGetCurBusyRank(businessReq)
    console.log('服务区繁忙度数据:', businessData);

    let businessRes: any = businessData.OtherData

    // // 繁忙个数
    // let businessTotal: number = 0
    // // 正常个数
    // let noramlTotal: number = 0
    // if (businessData && businessData.length > 0) {
    //     businessData.forEach((item: any) => {
    //         if (item.TicketCount > 30) {
    //             businessTotal += 1
    //         } else {
    //             noramlTotal += 1
    //         }
    //     })
    // }
    businessInfo.value = {
        businessTotal: businessRes.value,
        noramlTotal: businessRes.data,
    }
}


</script>


<template>
    <div class="OverviewOfServiceAreaBox">
        <NewBigTitleBox title="服务区概况" />

        <div class="OverviewOfServiceAreaContent">
            <div class="OverviewOfServiceAreaContentTop">
                <div class="OverviewOfServiceAreaContentTopItem" style="width: 100%;">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">管理站点/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #56BCE6;">{{
                        serviceInfo?.ServerpartTotalCount || "0" }}</div>
                </div>
            </div>

            <div class="OverviewOfServiceAreaContentTop">
                <div class="OverviewOfServiceAreaContentTopItem">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">服务区/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #56BCE6;">{{
                        serviceInfo?.serviceAllTotal || "0" }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentTopItem">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">停车区/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #ef5a0d;">{{
                        serviceInfo?.ParkingServiceCount || "0" }}</div>
                </div>
            </div>


            <div class="OverviewOfServiceAreaContentTop">
                <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">加水站/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #1aba80;">{{
                        serviceInfo?.WaterStationCount || "0" }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">观景台/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #f41a09;">{{
                        serviceInfo?.ViewingDeckCount || "0" }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentTopItem" style="width: calc((100% - 20px) / 3);">
                    <div class="OverviewOfServiceAreaContentTopItemLabel">休息区/座</div>
                    <div class="OverviewOfServiceAreaContentTopItemvalue" style="color: #b5ebf7;">{{
                        serviceInfo?.RestAreaCount || "0" }}</div>
                </div>
            </div>


            <SmallTitle title="设备设施" style="margin-top: 10px;" />   

            <div class="OverviewOfServiceAreaContentBottom" style="margin-top: 10px;">
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">加油站/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.REFUELINGGUNTotal || "0"
                    }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">充电桩/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ChargingStationTotal || "0"
                    }}</div>
                </div>
                <!-- <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">停车位/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.ParkingSpaceTotal || "0"
                    }}</div>
                </div> -->
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">司机之家/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{
                        serviceInfo?.HASPILOTLOUNGETotal || "0" }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">母婴室/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.NursingRoomTotal || "0"
                    }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">尿素/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.URECOUNTTotal || "0"
                    }}</div>
                </div>
                <div class="OverviewOfServiceAreaContentBottomItem">
                    <div class="OverviewOfServiceAreaContentBottomItemLabel">加水/座</div>
                    <div class="OverviewOfServiceAreaContentBottomItemValue">{{ serviceInfo?.WaterCount || "0"
                    }}</div>
                </div>
            </div>
        </div>


        <NewBigTitleBox title="服务承载" style="margin-top: 5px;" />
        <!-- <SmallTitle title="服务承载"/> -->


        <div class="OverviewOfServiceAreaBusyContent">
            <div class="OverviewOfServiceAreaBusyContentItem">
                <div class="OverviewOfServiceAreaBusyContentItemLeft">
                    <img class="OverviewOfServiceAreaBusyContentItemLeftImg"
                        src="../../../../assets/image/busyIcon.png" />
                </div>

                <div class="OverviewOfServiceAreaBusyContentItemRight">
                    <div class="OverviewOfServiceAreaBusyContentItemRightTitle">繁忙</div>
                    <div class="OverviewOfServiceAreaBusyContentItemRightValueBox">
                        <div class="OverviewOfServiceAreaBusyContentItemRightNumber">{{ businessInfo?.businessTotal }}
                        </div>
                        <div class="OverviewOfServiceAreaBusyContentItemRightUnit">座</div>
                    </div>
                </div>
            </div>

            <div class="OverviewOfServiceAreaBusyContentItem">
                <div class="OverviewOfServiceAreaBusyContentItemLeft">
                    <img class="OverviewOfServiceAreaBusyContentItemLeftImg"
                        src="../../../../assets/image/normalIcon.png" />
                </div>

                <div class="OverviewOfServiceAreaBusyContentItemRight">
                    <div class="OverviewOfServiceAreaBusyContentItemRightTitle" style="color: #fff;">空闲</div>
                    <div class="OverviewOfServiceAreaBusyContentItemRightValueBox">
                        <div class="OverviewOfServiceAreaBusyContentItemRightNumber" style="color: #fff;">
                            {{ businessInfo?.noramlTotal }}</div>
                        <div class="OverviewOfServiceAreaBusyContentItemRightUnit">座</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>