<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div>
        <div class="bg-gray-50 pt-12 sm:pt-16">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="max-w-4xl mx-auto text-center">
                    <h2
                        class="text-3xl font-extrabold text-gray-900 sm:text-4xl"
                    >
                        어드민 대시보드
                    </h2>
                    <p class="mt-3 text-xl text-gray-500 sm:mt-4">
                        서비스 현황 개괄이 표시될 페이지 입니다.
                    </p>
                </div>
            </div>
            <div class="mt-10 pb-12 bg-white sm:pb-16">
                <div class="relative">
                    <div class="absolute inset-0 h-1/2 bg-gray-50" />
                    <div
                        class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
                    >
                        <div class="max-w-4xl mx-auto">
                            <dl
                                class="rounded-lg bg-white shadow-lg sm:grid sm:grid-cols-3"
                            >
                                <div
                                    class="flex flex-col border-b border-gray-100 p-6 text-center sm:border-0 sm:border-r"
                                >
                                    <dt
                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
                                    >
                                        word watched
                                    </dt>
                                    <dd
                                        class="order-1 text-5xl font-extrabold text-indigo-600"
                                    >
                                        {{ formattedCount }}
                                    </dd>
                                </div>
                                <div
                                    class="flex flex-col border-t border-b border-gray-100 p-6 text-center sm:border-0 sm:border-l sm:border-r"
                                >
                                    <dt
                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
                                    >
                                        hit count
                                    </dt>
                                    <dd
                                        class="order-1 text-5xl font-extrabold text-indigo-600"
                                    >
                                        {{ formattedHitCount }}
                                    </dd>
                                </div>
                                <div
                                    class="flex flex-col border-t border-gray-100 p-6 text-center sm:border-0 sm:border-l"
                                >
                                    <dt
                                        class="order-2 mt-2 text-lg leading-6 font-medium text-gray-500"
                                    >
                                        avg response time
                                    </dt>
                                    <dd
                                        class="order-1 text-5xl font-extrabold text-indigo-600"
                                    >
                                        {{ elapsedAvg.toFixed(2) }}ms
                                    </dd>
                                </div>
                            </dl>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
definePageMeta({
    middleware: 'check-auth-admin',
});

const wordCount = ref(0);
const hitCount = ref(0);
const elapsedAvg = ref(0);

const formattedCount = computed(() => {
    return _utils.formatNumberWithComma(wordCount.value);
});

const formattedHitCount = computed(() => {
    return _utils.formatNumberWithComma(hitCount.value);
});

const responseJson = await _crossCtl.doComm('local/select', 'dashboard', {});

console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
    wordCount.value = responseJson['data']['wordCount'];
    hitCount.value = responseJson['data']['hitCount'];
    elapsedAvg.value = responseJson['data']['elapsedAvg'] * 1000;
}
</script>
