<template>
    <div class="top-left-cmp">
        <div class="dc-left">
            <dv-border-box-5>
                <div class="main-value"><span>{{ props.topLeftData[2]?.overview }}</span>
                    {{ props.topLeftData[2]?.unit }}</div>
                <div class="compare-value">收入占比&nbsp;&nbsp;
                    <span>
                        {{ Number.isNaN((props.topLeftData[2]?.overview / props.topLeftData[0]?.overview * 100)) ? 0 :
                                (props.topLeftData[2]?.overview / props.topLeftData[0]?.overview * 100).toFixed(2)
                        }} %
                    </span>
                </div>
            </dv-border-box-5>
            <div class="dc-text">
                {{ props.topLeftData[3]?.reportName }}
                <dv-decoration-3 style="width:200px;height:20px;" />
            </div>
        </div>
        <div class="dc-right">
            <div class="dc-text">
                {{ props.topLeftData[2]?.reportName }}
                <dv-decoration-3 style="width:200px;height:20px;" />
            </div>
            <dv-border-box-5 :reverse="true">
                <div class="main-value"><span>{{ props.topLeftData[3]?.overview }}</span>
                    {{ props.topLeftData[3]?.unit }}</div>
                <div class="compare-value">收入占比&nbsp;&nbsp;
                    <span>
                        {{ Number.isNaN((props.topLeftData[3]?.overview / (props.topLeftData[1]?.overview * 10000) *
        100)) ? 0 : (props.topLeftData[3]?.overview / (props.topLeftData[1]?.overview * 10000) *
            100).toFixed(2)
                        }}
                        %
                    </span>
                </div>
            </dv-border-box-5>
        </div>
    </div>
</template>
  
<script setup name='TopLeftCmp' lang="ts">

const props = defineProps({
    topLeftData: {
        type: Object,
        default: {}
    }
})

</script>
  
<style lang="scss">
.top-left-cmp {
    display: flex;

    .dc-left,
    .dc-right {
        width: 50%;
    }

    .dv-border-box-5 {
        height: 60%;
    }

    .dc-text {
        display: flex;
        flex-direction: column;
        height: 40%;
        font-size: 20px;
        padding: 20px;
        box-sizing: border-box;
    }

    .dc-left .dc-text {
        align-items: flex-end;
        justify-content: center;
    }

    .dc-right .dc-text {
        justify-content: flex-start;
        padding-top: 20px;
    }

    .dc-left .dv-border-box-5 {
        padding: 30px;
        box-sizing: border-box;
    }

    .dc-right .dv-border-box-5 {
        padding: 40px;
        padding-left: 75px;
        box-sizing: border-box;
    }

    .main-value {
        font-weight: bold;
        font-size: 24px;
        padding-top: 30px;

        span {
            font-size: 24px;
            color: #00c0ff;
            margin-right: 15px;
        }
    }

    .compare-value {
        height: 35px;
        line-height: 35px;
        font-size: 18px;

        span {
            margin-right: 15px;
            color: #00c0ff;
        }
    }
}
</style>