<!-- 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">
                    통계 테스트 페이지
                </h1>
                <p class="mt-2 text-sm text-gray-700">
                    통계 개발과 기능 테스트를 위해 만들어진 임시 페이지입니다.
                </p>
            </div>
            <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"></div>
        </div>

        <nav class="mt-5 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="doAction(item.actionTag)"
            >
                <span class="truncate">
                    {{ item.name }}
                </span>
            </a>
        </nav>
    </div>
</template>

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

const navigation = [
    { name: 'hello?', actionTag: 'hello' },
    { name: '2022년 통계 가공', actionTag: '2022' },
    { name: '2022년 9월 통계 가공', actionTag: '202209' },
    { name: '2022년 9월 27일 통계 가공', actionTag: '20220927' },
];

async function doAction(tag) {
    let responseJson = null;
    switch (tag) {
        case '2022':
            responseJson = await _crossCtl.doComm('local/lab', 'makestat', {
                termTag: 'year',
                dateTag: '2022',
            });
            console.log('responseJson=', responseJson);
            break;
        case '202209':
            responseJson = await _crossCtl.doComm('local/lab', 'makestat', {
                termTag: 'month',
                dateTag: '202209',
            });
            console.log('responseJson=', responseJson);
            break;
        case '20220927':
            responseJson = await _crossCtl.doComm('local/lab', 'makestat', {
                termTag: 'day',
                dateTag: '20220927',
            });
            console.log('responseJson=', responseJson);
            break;

        case 'hello':
            responseJson = await _crossCtl.doComm('local/lab', 'hello', {});
            console.log('responseJson=', responseJson);
            break;
    }
}
</script>
