<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="pb-8 px-4 sm:px-6 lg:px-8">
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-xl font-semibold text-gray-900">
                    API 키 사용 통계
                </h1>
                <p class="mt-2 text-sm text-gray-700">
                    내 API 키의 사용량을 확인할 수 있습니다.
                </p>
            </div>
            <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"></div>
        </div>

        <div class="mt-5 bg-gray-100">
            <div class="pt-12 sm:pt-16 lg:pt-20">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="text-center">
                        <h2
                            class="text-3xl font-extrabold text-gray-900 sm:text-4xl lg:text-5xl"
                        >
                            이번달 사용량과 예상 비용
                        </h2>
                        <p class="mt-4 text-xl text-gray-600">
                            이 페이지를 보고 있는 시점까지 가공된 로그를
                            기준으로 사용량을 판정하여 비용을 예상해 보여
                            드립니다.
                        </p>
                    </div>
                </div>
            </div>
            <div class="mt-8 bg-white pb-16 sm:mt-12 sm:pb-20 lg:pb-28">
                <div class="relative">
                    <div class="absolute inset-0 h-1/2 bg-gray-100" />
                    <div
                        class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"
                    >
                        <div
                            class="max-w-lg mx-auto rounded-lg shadow-lg overflow-hidden lg:max-w-none lg:flex"
                        >
                            <div class="flex-1 bg-white px-6 py-8 lg:p-12">
                                <h3
                                    class="text-2xl font-extrabold text-gray-900 sm:text-3xl"
                                >
                                    실시간 사용량
                                </h3>

                                <ul
                                    role="list"
                                    class="mt-8 space-y-5 lg:space-y-0 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:gap-y-5"
                                >
                                    <li class="flex items-start lg:col-span-1">
                                        <div class="flex-shrink-0">
                                            <CheckCircleIcon
                                                class="h-5 w-5 text-green-400"
                                                aria-hidden="true"
                                            />
                                        </div>
                                        <p class="ml-1 text-sm text-gray-700">
                                            총 호출 :
                                            {{
                                                _utils.formatNumberInBytesStyle(
                                                    total,
                                                    2
                                                )
                                            }}
                                        </p>
                                    </li>

                                    <li class="flex items-start lg:col-span-1">
                                        <div class="flex-shrink-0">
                                            <CheckCircleIcon
                                                class="h-5 w-5 text-green-400"
                                                aria-hidden="true"
                                            />
                                        </div>
                                        <p class="ml-3 text-sm text-gray-700">
                                            검출 수 :
                                            {{
                                                _utils.formatNumberInBytesStyle(
                                                    hit,
                                                    2
                                                )
                                            }}
                                        </p>
                                    </li>

                                    <li class="flex items-start lg:col-span-1">
                                        <div class="flex-shrink-0">
                                            <CheckCircleIcon
                                                class="h-5 w-5 text-green-400"
                                                aria-hidden="true"
                                            />
                                        </div>
                                        <p class="ml-1 text-sm text-gray-700">
                                            전송량 :
                                            {{ _utils.formatBytes(size, 2) }}
                                        </p>
                                    </li>

                                    <li class="flex items-start lg:col-span-1">
                                        <div class="flex-shrink-0">
                                            <CheckCircleIcon
                                                class="h-5 w-5 text-green-400"
                                                aria-hidden="true"
                                            />
                                        </div>
                                        <p class="ml-1 text-sm text-gray-700">
                                            검출율 :
                                            {{
                                                (hitRatio * 100).toFixed(2) +
                                                '%'
                                            }}
                                        </p>
                                    </li>
                                </ul>

                                <div class="mt-8">
                                    <ul>
                                        <li
                                            class="flex items-start lg:col-span-1"
                                        >
                                            <div class="flex-shrink-0">
                                                <CheckCircleIcon
                                                    class="h-5 w-5 text-green-400"
                                                    aria-hidden="true"
                                                />
                                            </div>
                                            <p
                                                class="ml-1 text-sm text-gray-700"
                                            >
                                                평균 전송량 :
                                                {{
                                                    _utils.formatBytes(
                                                        avgSize,
                                                        2
                                                    )
                                                }}
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div
                                class="py-8 px-6 text-center bg-gray-50 lg:flex-shrink-0 lg:flex lg:flex-col lg:justify-center lg:p-12"
                            >
                                <p
                                    class="text-lg leading-6 font-medium text-gray-900"
                                >
                                    예상 요금
                                </p>
                                <div
                                    class="mt-4 flex items-center justify-center text-4xl font-extrabold text-gray-900"
                                >
                                    <span>
                                        ₩{{
                                            _utils.formatNumberWithComma(
                                                (total - 10 < 0
                                                    ? 0
                                                    : total - 10) * 1
                                            )
                                        }}
                                    </span>
                                    <span
                                        class="ml-3 text-xl font-medium text-gray-500"
                                    >
                                    </span>
                                </div>
                                <p class="mt-4 text-sm">
                                    <a
                                        href="javascript:void(0)"
                                        class="font-medium text-gray-500 underline"
                                        @click="navigateTo('/doc/bill')"
                                    >
                                        요금 계산 기준 보기
                                    </a>
                                </p>
                                <div class="mt-6"></div>
                                <div class="mt-4 text-sm"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <nav class="space-y-1" aria-label="Sidebar">
            <a
                v-for="item in navigation"
                :key="item.name"
                href="javascript:void(0)"
                :class="[
                    'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
                    'flex items-center px-3 py-2 text-sm font-medium rounded-md',
                ]"
                :aria-current="'page'"
                @click="$router.push(item.href)"
            >
                <span class="truncate">
                    {{ item.name }}
                </span>
            </a>
        </nav>
    </div>
</template>

<script setup lang="ts">
import { CheckCircleIcon } from '@heroicons/vue/24/solid';

definePageMeta({
    middleware: 'check-auth-op',
});

const total = ref(0);
const hit = ref(0);
const size = ref(0);
const hitRatio = ref(0);
const avgSize = ref(0);

const includedFeatures = [
    'Private forum access',
    'Member resources',
    'Entry to annual conference',
    'Official member t-shirt',
];
const navigation = [{ name: '상세 통계 보기', href: '/key/statistics/detail' }];

const responseJson = await _crossCtl.doComm('local/list', 'bill:month', {
    start: 0,
    length: 1,
});

if (responseJson['data'].length == 1) {
    total.value = responseJson['data'][0]['total'];
    hit.value = responseJson['data'][0]['hit'];
    size.value = responseJson['data'][0]['size'];
    hitRatio.value =
        responseJson['data'][0]['hit'] / responseJson['data'][0]['total'];
    avgSize.value =
        responseJson['data'][0]['size'] / responseJson['data'][0]['total'];
}

console.log('huk responseJson = ', responseJson);
</script>
