<script setup lang="ts">
import { useDataStore } from "@/stores/index";
const dataStore = useDataStore();
const { totalDto,forecast } = storeToRefs(dataStore)
// 预报到总人数 forecast.total

// 迎新总进度 已预报到总人数/预报到总人数
const progress = computed(() => {
    return ((totalDto.value.reportNumber / totalDto.value.totalNumber) * 100).toFixed(1)
});



</script>

<template>
    <div class="left-top">
        <div class="top-item-img">
            <div class="top-item-icon">
                <img src="@/assets/img/zheke/left_top1.png">
            </div>
            <div class="top-item">
                <div class="top-item-title">已报到人数</div>
                <div class="top-item-content">{{ totalDto.reportNumber ?? '0' }}</div>
            </div>
        </div>
        <div class="top-item-img">
            <div class="top-item-icon">
                <img src="@/assets/img/zheke/left_top2.png">
            </div>
            <div class="top-item">
                <div class="top-item-title title-red">未报到人数</div>
                <div class="top-item-content content-red"> {{ totalDto.notReportNumber ?? '0' }} </div>
            </div>
        </div>
    </div>
    <div class="left-bottom">
        <div class="bottom-item">
            <div class="bottom-item-title">预报到总人数</div>
            <div class="bottom-item-content"> {{ forecast.total ?? '0' }} </div>
        </div>
        <div class="bottom-item">
            <div class="bottom-item-title">录取总人数</div>
            <div class="bottom-item-content"> {{ totalDto.totalNumber ?? '0' }} </div>
        </div>
        <div class="bottom-item">
            <div class="bottom-item-title">迎新总进度</div>
            <div class="bottom-item-content"> {{ isNaN(progress) ? '0' : progress}}% </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-top {
    width: 100%;
    display: flex;
    justify-content: space-around;

    .top-item-img {
        display: flex;
        flex-direction: row;
    }

    .top-item {
        display: flex;
        flex-direction: column;
        padding-top: 10px;

        .top-item-title {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 28px;
            text-shadow: 1px 2px 0px rgba(25, 27, 28, 0.22);
            // background: #3652AB;
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(126, 219, 254, 0.14) 0%, rgba(126, 219, 254, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);

        }

        .top-item-content {
            font-family: YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 36px;
            text-align: center;
            color: #FFFFFF;
            background: linear-gradient(80deg, rgba(112, 162, 253, 0.64) 0%, rgba(182, 198, 229, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%, );
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .title-red {
            background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(76, 127, 220, 0.1) 50%), linear-gradient(90deg, rgba(228, 140, 140, 0.14) 0%, rgba(247, 118, 93, 0.9) 10%, rgba(0, 0, 0, 0.14) 100%);

        }

        .content-red {
            background: linear-gradient(80deg, rgba(255, 131, 106, 0.8) 0%, rgba(230, 152, 152, 0.64) 50%, rgba(255, 255, 255, 0.94) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }


}

.left-bottom {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    padding: 0 20px;

    .bottom-item {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #fbeedb;
        text-shadow: 0px 2px 6px rgba(27, 24, 19, 0.31);
        font-style: italic;

        // background: linear-gradient(0deg, rgba(152,115,58,1) 0%, rgba(205,169,114,1) 41.89453125%, rgba(232,215,190,1) 84.1796875%, rgba(255,236,221,0.27) 100%);
        // -webkit-background-clip: text;
        // -webkit-text-fill-color: transparent;
        .bottom-item-content {
            margin-top: 10px;
            font-size: 26px;
            text-align: center;
        }
    }
}
</style>
