<script setup lang="ts">
import { handleGetFiveNumber } from '../../../../options/serveice';
import { handleGetRealData } from '../../service';
import CenterTitle from '../CenterTitle/CenterTitle.vue';
import './CoreBusinessData.less'
import { onMounted, onBeforeUnmount, ref, reactive, watch } from 'vue';


// 总营收
let revenueAmonut = ref<any>({
    value: 0,
    unit: "元"
})
// 油品消耗
let oilConsumption = ref<any>({
    value: 0,
    unit: ""
})
// 加水量
let waterAddition = ref<any>({
    value: 0,
    unit: ""
})
// 尿素
let urea = ref<any>({
    value: 0,
    unit: ""
})
// 充电次数
let chargingCycles = ref<any>({
    value: 0,
    unit: ""
})


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

// 拿到传入的数据
const props = defineProps<{
    noTitle?: boolean;
    currentService?: any;
}>();

// 监听传入的选中服务区
watch(
    () => props.currentService,
    (newVal, oldVal) => {
        handleGetMapRealData()
    },
    { deep: true }
);

// 拿到实时数据
const handleGetMapRealData = async () => {
    const req: any = {
        serverPartId: props.currentService?.SERVERPART_ID || ""
    }
    const data = await handleGetRealData(req)
    // 【1000：门店营收   2000：油品   3000：加水   4000：尿素   5000：新能源   6000：断面流量   6001：入区车流  6002：入区客流】

    console.log('实时数据', data);



    if (data && data.length > 0) {
        data.forEach((item: any) => {
            // 门店营收
            if (item.dataType === 1000) {
                let obj: any = {
                    value: handleGetPonitFixed(item.totalAmount),
                    unit: item.totalAmountUnit
                }
                // let obj: any = {
                //     value: item.totalAmount.toString().length > 8 ? Number((item.totalAmount / 10000).toFixed(2)).toLocaleString() : Number(item.totalAmount).toLocaleString(),
                //     unit: item.totalAmount.toString().length > 8 ? '万元' : '元'
                // }
                revenueAmonut.value = obj
            } else if (item.dataType === 2000) {
                // 油品消耗
                let obj: any = {
                    value: handleGetPonitFixed(item.totalCount),
                    unit: item.totalCountUnit
                }
                // let obj: any = {
                //     value: item.totalCount.toString().length > 8 ? Number((item.totalCount / 10000).toFixed(2)).toLocaleString() : Number(item.totalCount).toLocaleString(),
                //     unit: item.totalCount.toString().length > 8 ? '万升' : '升'
                // }
                oilConsumption.value = obj
            } else if (item.dataType === 3000) {
                // 加水量
                let obj: any = {
                    value: handleGetPonitFixed(item.totalCount),
                    unit: item.totalCountUnit
                }
                // let obj: any = {
                //     value: item.totalCount.toString().length > 8 ? Number((item.totalCount / 10000).toFixed(2)).toLocaleString() : Number(item.totalCount).toLocaleString(),
                //     unit: item.totalCount.toString().length > 8 ? '万升' : '升'
                // }
                waterAddition.value = obj
            } else if (item.dataType === 4000) {
                // 尿素
                let obj: any = {
                    value: handleGetPonitFixed(item.totalCount),
                    unit: item.totalCountUnit
                }
                // let obj: any = {
                //     value: item.totalCount.toString().length > 8 ? Number((item.totalCount / 10000).toFixed(2)).toLocaleString() : Number(item.totalCount).toLocaleString(),
                //     unit: item.totalCount.toString().length > 8 ? '万升' : '升'
                // }
                urea.value = obj
            } else if (item.dataType === 5000) {
                // 充电次数
                let obj: any = {
                    value: handleGetPonitFixed(item.totalTicket),
                    unit: item.totalTicketUnit
                }
                // let obj: any = {
                //     value: item.totalTicket.toString().length > 8 ? Number((item.totalTicket / 10000).toFixed(2)).toLocaleString() : Number(item.totalCount).toLocaleString(),
                //     unit: item.totalTicket.toString().length > 8 ? '万单' : '单'
                // }
                chargingCycles.value = obj
            }
        })
    }
}


// 拿到小数点后两位
const handleGetPonitFixed = (str: string) => {
    const num = parseFloat(str); // 先转为number类型
    return isNaN(num) ? "0.00" : num.toFixed(2);
}


</script>




<template>
    <div class="CoreBusinessDataBox">

        <div class="newCoreBusinessBox">
            <div class="newCoreBusinessItem">
                <div class="newCoreBusinessItemLabel">今日营收</div>
                <div class="newCoreBusinessItemValueBox">
                    <div class="newCoreBusinessItemValue">{{ revenueAmonut.value }}</div>
                    <div class="newCoreBusinessItemUnit">{{ revenueAmonut.unit }}</div>

                </div>
                <!-- <div class="newCoreBusinessItemCompare">
                    <div class="newCoreBusinessItemText"></div>
                    <img class="newCoreBusinessItemAddIcon" />
                    <div class="newCoreBusinessItemAddValue"></div>
                </div> -->
            </div>

            <div class="newCoreBusinessItem">
                <div class="newCoreBusinessItemLabel">今日油品</div>
                <div class="newCoreBusinessItemValueBox">
                    <div class="newCoreBusinessItemValue">{{ oilConsumption.value }}</div>
                    <div class="newCoreBusinessItemUnit">{{ oilConsumption.unit }}</div>
                </div>
                <!-- <div class="newCoreBusinessItemCompare">
                    <div class="newCoreBusinessItemText"></div>
                    <img class="newCoreBusinessItemAddIcon" />
                    <div class="newCoreBusinessItemAddValue"></div>
                </div> -->
            </div>

            <div class="newCoreBusinessItem">
                <div class="newCoreBusinessItemLabel">今日加水</div>
                <div class="newCoreBusinessItemValueBox">
                    <div class="newCoreBusinessItemValue">{{ waterAddition.value }}</div>
                    <div class="newCoreBusinessItemUnit">{{ waterAddition.unit }}</div>
                </div>
                <!-- <div class="newCoreBusinessItemCompare">
                    <div class="newCoreBusinessItemText"></div>
                    <img class="newCoreBusinessItemAddIcon" />
                    <div class="newCoreBusinessItemAddValue"></div>
                </div> -->
            </div>

            <div class="newCoreBusinessItem">
                <div class="newCoreBusinessItemLabel">今日尿素</div>
                <div class="newCoreBusinessItemValueBox">
                    <div class="newCoreBusinessItemValue">{{ urea.value }}</div>
                    <div class="newCoreBusinessItemUnit">{{ urea.unit }}</div>
                </div>
                <!-- <div class="newCoreBusinessItemCompare">
                    <div class="newCoreBusinessItemText"></div>
                    <img class="newCoreBusinessItemAddIcon" />
                    <div class="newCoreBusinessItemAddValue"></div>
                </div> -->
            </div>

            <div class="newCoreBusinessItem">
                <div class="newCoreBusinessItemLabel">今日充电</div>
                <div class="newCoreBusinessItemValueBox">
                    <div class="newCoreBusinessItemValue">{{ chargingCycles.value }}</div>
                    <div class="newCoreBusinessItemUnit">{{ chargingCycles.unit }}</div>
                </div>
                <!-- <div class="newCoreBusinessItemCompare">
                    <div class="newCoreBusinessItemText"></div>
                    <img class="newCoreBusinessItemAddIcon" />
                    <div class="newCoreBusinessItemAddValue"></div>
                </div> -->
            </div>
        </div>












        <!-- <CenterTitle :pageTitle="'核心经营数据'" v-if="!props.noTitle" /> -->
        <div class="busninessBox" v-if="false">
            <!-- 营收 -->
            <div class="busninessItem">
                <div class="busninessItemLeft">
                    <img class="busninessItemImg" src="../../../../assets/image/bussinessIcon.png" />
                </div>
                <div class="busninessItemRight">
                    <div class="busninessItemRightTop">
                        <div class="busninessItemLabel">营收</div>

                        <div class="busninessItemAddBox">
                            <!-- ../../../../assets/image/addIcon.png -->
                            <!-- ../../../../assets/image/reduce.png -->
                            <img class="busninessItemAddIcon" src="" />
                            <!-- #00FF00   #FF0000 -->
                            <div class="busninessItemAddText"></div>
                        </div>
                    </div>

                    <div class="busninessItemRightBottom">
                        <div class="busninessItemValue">{{ revenueAmonut.value }}</div>
                        <div class="busninessItemUnit">{{ revenueAmonut.unit }}</div>
                    </div>
                </div>
            </div>

            <!-- 油品消耗 -->
            <div class="busninessItem">
                <div class="busninessItemLeft">
                    <img class="busninessItemImg" src="../../../../assets/image/oilIcon.png" />
                </div>
                <div class="busninessItemRight">
                    <div class="busninessItemRightTop">
                        <div class="busninessItemLabel">油品消耗</div>

                        <div class="busninessItemAddBox">
                            <!-- ../../../../assets/image/addIcon.png -->
                            <!-- ../../../../assets/image/reduce.png -->
                            <img class="busninessItemAddIcon" src="" />
                            <!-- #00FF00   #FF0000 -->
                            <div class="busninessItemAddText"></div>
                        </div>
                    </div>

                    <div class="busninessItemRightBottom">

                        <div class="busninessItemValue">{{ oilConsumption.value }}</div>
                        <div class="busninessItemUnit">{{ oilConsumption.unit }}</div>
                    </div>
                </div>
            </div>

            <!-- 加水量 -->
            <div class="busninessItem">
                <div class="busninessItemLeft">
                    <img class="busninessItemImg" src="../../../../assets/image/addWater.png" />
                </div>
                <div class="busninessItemRight">
                    <div class="busninessItemRightTop">
                        <div class="busninessItemLabel">加水量</div>

                        <div class="busninessItemAddBox">
                            <!-- ../../../../assets/image/addIcon.png -->
                            <!-- ../../../../assets/image/reduce.png -->
                            <img class="busninessItemAddIcon" src="" />
                            <!-- #00FF00   #FF0000 -->
                            <div class="busninessItemAddText"></div>
                        </div>
                    </div>

                    <div class="busninessItemRightBottom">
                        <div class="busninessItemValue">{{ waterAddition.value || 0 }}</div>
                        <div class="busninessItemUnit">{{ waterAddition.unit }}</div>
                    </div>
                </div>
            </div>

            <!-- 尿素 -->
            <div class="busninessItem">
                <div class="busninessItemLeft">
                    <img class="busninessItemImg" src="../../../../assets/image/addWater.png" />
                </div>
                <div class="busninessItemRight">
                    <div class="busninessItemRightTop">
                        <div class="busninessItemLabel">尿素</div>

                        <div class="busninessItemAddBox">
                            <!-- ../../../../assets/image/addIcon.png -->
                            <!-- ../../../../assets/image/reduce.png -->
                            <img class="busninessItemAddIcon" src="" />
                            <!-- #00FF00   #FF0000 -->
                            <div class="busninessItemAddText"></div>
                        </div>
                    </div>

                    <div class="busninessItemRightBottom">
                        <div class="busninessItemValue">{{ urea.value || 0 }}</div>
                        <div class="busninessItemUnit">{{ urea.unit }} </div>
                    </div>
                </div>
            </div>

            <!-- 充电次数 -->
            <div class="busninessItem">
                <div class="busninessItemLeft">
                    <img class="busninessItemImg" src="../../../../assets/image/chargeIcon.png" />
                </div>
                <div class="busninessItemRight">
                    <div class="busninessItemRightTop">
                        <div class="busninessItemLabel">充电次数</div>

                        <div class="busninessItemAddBox">
                            <!-- ../../../../assets/image/addIcon.png -->
                            <!-- ../../../../assets/image/reduce.png -->
                            <img class="busninessItemAddIcon" src="" />
                            <!-- #00FF00   #FF0000 -->
                            <div class="busninessItemAddText"></div>
                        </div>
                    </div>

                    <div class="busninessItemRightBottom">
                        <div class="busninessItemValue">{{ chargingCycles.value || 0 }}</div>
                        <div class="busninessItemUnit">{{ chargingCycles.unit }}</div>
                    </div>
                </div>
            </div>

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