<template>
    <ul class="kanban-ul flex">
        <li>
            <CountUp
                :endVal="rate.resourceAccessRate"
                :duration="duration"
            >
                <template #suffix>
                    <span>%</span>
                </template>
            </CountUp>
            <span>资源接入率</span>
        </li>
        <li>
            <CountUp
                :endVal="rate.resourceHealthRate"
                :duration="duration"
            >
                <template #suffix>
                    <span>%</span>
                </template>
            </CountUp>
            <span>资源健康率</span>
        </li>
        <li>
            <CountUp
                :endVal="rate.resourceRedundancyRate"
                :duration="duration"
            >
                <template #suffix>
                    <span>%</span>
                </template>
            </CountUp>
            <span>资源冗余率</span>
        </li>
    </ul>
</template>

<script setup>
import { ref, inject } from 'vue';
import CountUp from './common/count-up';

const currentOrg = inject('currentOrg');
const duration = 2;
const rate = ref({
    resourceAccessRate: 0,
    resourceHealthRate: 0,
    resourceRedundancyRate: 0,
});

const getAccessStatusData = () => {
    console.log('执行请求AccessStatus');
    return new Promise((resolve) => {
        setTimeout(() => {
            if (currentOrg.value.id === 'all') {
                resolve({
                    resourceAccessRate: 80,
                    resourceHealthRate: 70,
                    resourceRedundancyRate: 90,
                });
            } else {
                resolve({
                    resourceAccessRate: 100,
                    resourceHealthRate: 90,
                    resourceRedundancyRate: 95,
                });
            }
        }, 1000);
    });
};

const initFN = () => {
    getAccessStatusData().then((res) => {
        for (const key in rate.value) {
            rate.value[key] = res[key];
        }
    });
};

defineExpose({
    name: 'AccessStatus',
    init: initFN,
});
</script>

<style lang="scss" scoped>
.kanban-ul {
    height: 100%;

    li {
        flex: 1;
        width: 142px;
        height: 100%;
        background: url(../img/di.png) no-repeat;
        background-position: center bottom 50px;
        background-size: 115%;
        text-align: center;
        color: rgb(174, 224, 240);

        .countup-wrap {
            padding: 25px 20px 0;
            font-size: 42px;
        }

        & > span {
            font-size: 18px;
            font-weight: bold;
        }
    }
}
</style>
