<template>
    <div>
        <div class="mt-5 sm:px-3 lg:px-5">전체 통계 페이지 대시보드</div>

        <LineChart
            :chart-data="lineChartData"
            :chart-options="lineChartOptions"
        />

        <PieChart :chart-data="pieChartData" :chart-options="pieChartOptions" />

        <div class="mt-5 sm:px-3 lg:px-5">
            <a
                href="javascript:void(0)"
                class="text-base font-medium text-indigo-700 hover:text-indigo-600"
                @click="navigateTo('/admin/statistics/byterm/usage')"
                >기간별 사용량 통계 화면으로 &rarr;</a
            >
        </div>
        <div class="mt-5 sm:px-3 lg:px-5">
            <a
                href="javascript:void(0)"
                class="text-base font-medium text-indigo-700 hover:text-indigo-600"
                @click="navigateTo('/admin/statistics/byterm/word')"
                >기간별 단어 통계 화면으로 &rarr;</a
            >
        </div>
    </div>
</template>

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

/*
const route = useRoute();
let hero: string | string[] = '';
hero = route.params['hero'];
*/

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

let rawData1 = [];
let rawData2 = [];

console.log('responseJson=', responseJson);
if (responseJson['responseMessage'] == 'ok') {
    rawData1 = responseJson['result']['adminDashData1'];
    rawData2 = responseJson['result']['adminDashData2'];
}

const lineChartData = {
    labels: rawData1.map((item) => item['date_tag']),
    datasets: [
        {
            label: 'Total',
            backgroundColor: '#00D8FF',
            data: rawData1.map((item) => item['total']),
        },
        {
            label: 'Hit',
            backgroundColor: '#f87979',
            data: rawData1.map((item) => item['hit']),
        },
    ],
};

const lineChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};

const pieChartData = {
    labels: rawData2.map((item) => item['key_name']),
    datasets: [
        {
            // backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
            data: rawData2.map((item) => item['total']),
        },
    ],
};

const pieChartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};

const chartData = {
    labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December',
    ],
    datasets: [
        {
            label: 'Data One',
            backgroundColor: '#f87979',
            data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
        },
    ],
};

const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
};
</script>
