<!-- 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">
                    필터된 단어 통계 상세 보기 (Top 10 only)
                </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>
                    <select
                        id="targetTerm"
                        v-model="targetTerm"
                        name="targetTerm"
                        class="mt-0 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
                        @change="onChange($event)"
                    >
                        <option
                            v-for="term in terms"
                            :key="term.key"
                            :selected="term.current"
                            :value="term.key"
                        >
                            <span class="truncate">
                                {{ term.key }}
                            </span>
                        </option>
                    </select>
                </div>
            </div>

            <Datepicker
                v-if="targetTerm == 'year'"
                v-model="targetDateYear"
                class="mt-4 sm:mt-0 sm:ml-2 sm:flex-none"
                locale="ko"
                :year-picker="true"
                @update:modelValue="handleDate"
            ></Datepicker>

            <Datepicker
                v-if="targetTerm == 'month'"
                v-model="targetDateMonth"
                class="mt-4 sm:mt-0 sm:ml-2 sm:flex-none"
                locale="ko"
                :month-picker="true"
                :format="formatForMonth"
                @update:modelValue="handleDate"
            ></Datepicker>

            <Datepicker
                v-if="targetTerm == 'day'"
                v-model="targetDateDay"
                class="mt-4 sm:mt-0 sm:ml-2 sm:flex-none"
                locale="ko"
                :format="formatForDay"
                @update:modelValue="handleDate"
            ></Datepicker>
        </div>

        <BaseList1
            :headings="listHeadings"
            :actions="listActions"
            :keys="listKeys"
            :data="listData"
            :action-key="actionKey"
            :column-filter="columnFilter"
            :do-action="doAction"
        />

        <div class="p-0 rounded-bl-2xl rounded-br-2xl md:px-0">
            <a
                href="javascript:void(0)"
                class="text-base font-medium text-indigo-700 hover:text-indigo-600"
                @click="$router.back()"
                >&larr;이전 화면으로<span aria-hidden="true"> </span
            ></a>
        </div>
    </div>
</template>

<script setup lang="ts">
import Datepicker from '@vuepic/vue-datepicker';
import '@vuepic/vue-datepicker/dist/main.css';

const router = useRouter();
const { $dayjs } = useNuxtApp();
definePageMeta({
    middleware: 'check-auth-op',
});

const targetDate = ref($dayjs(new Date().toISOString()).format('YYYY'));
const targetDateYear = ref($dayjs(new Date().toISOString()).format('YYYY'));
const targetDateMonth = ref({
    month: new Date().getMonth(),
    year: new Date().getFullYear,
});
const targetDateDay = ref(
    $dayjs(new Date().toISOString()).format('MM/DD/YYYY')
);

// console.log('huk = ', targetDate.value);
const format = (date) => {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();

    return `${year}${month}${day}`;
};

const formatForDay = (date) => {
    const day = date.getDate();
    const month = date.getMonth() + 1;
    const year = date.getFullYear();
    const hour = date.getHours();

    return `${year}${(month < 10 ? '0' : '') + month}${
        (day < 10 ? '0' : '') + day
    }`;
};

const formatForMonth = (date) => {
    return `${date.year}${(date.month + 1 < 10 ? '0' : '') + (date.month + 1)}`;
};

const listHeadings = [
    {
        title: '구분',
        class: 'py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6',
        key: 'date_tag',
        hiddenInfo: {
            headClass: 'font-normal lg:hidden',
            dts: [],
            dds: [],
        },
        subClass:
            'w-full max-w-0 py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:w-auto sm:max-w-none sm:pl-6',
    },
    {
        title: 'word',
        class: 'hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 lg:table-cell',
        key: 'word',
        hiddenInfo: {
            headClass: '',
            dts: [],
            dds: [],
        },
        subClass: 'hidden px-3 py-4 text-sm text-gray-500 lg:table-cell',
    },
    {
        title: 'hit',
        class: 'hidden px-3 py-3.5 text-left text-sm font-semibold text-gray-900 sm:table-cell',
        key: 'count',
        hiddenInfo: {
            headClass: '',
            dts: [],
            dds: [],
        },
        subClass: 'hidden px-3 py-4 text-sm text-gray-500 sm:table-cell',
    },

    {
        title: '갱신일',
        class: 'px-3 py-3.5 text-left text-sm font-semibold text-gray-900',
        key: 'updated',
        hiddenInfo: {
            headClass: '',
            dts: [],
            dds: [],
        },
        subClass: 'px-3 py-4 text-sm text-gray-500',
    },
];
const listActions = [];
const actionKey = 'serial';
const listKeys = [
    'serial',
    'date_tag',
    'total',
    'hit',
    'size',
    'uniq_ip',
    'uniq_referrer',
    'updated',
];
const listData = ref([]);

const totalPageCount = ref(0);
const currentPageNumber = ref(1);
const pageSize = ref(26);
const recordsTotal = ref(0);
// const order = [{ column: 'serial', dir: 'desc' }];
// const columns = { serial: { data: 'serial' } };

function columnFilter(key, val) {
    // console.log('columnFilter(), key = ', key, ', val = ', val);

    if (key == 'updated' || key == 'created') {
        return $dayjs(val).format('YY/MM/DD  A h:mm:ss');
        // return $dayjs(val).format('YY/MM/DD');
    } else if (key == 'size') {
        return _utils.formatBytes(val, 2);
    } else {
        return val;
    }
}

function doAction(tag, target) {
    console.log('on doAction(), tag=', tag, ', target=', target);
    router.push({
        name: 'key-edit',
        params: { target: target },
    });
}

function pageMove(targetPageIdex) {
    console.log('on pageMove(), targetPageIdex=', targetPageIdex);
    currentPageNumber.value = targetPageIdex;
    refresh();
}

async function refresh() {
    const responseJson = await _crossCtl.doComm(
        'local/list',
        'statistics:word',
        {
            start: (currentPageNumber.value - 1) * pageSize.value,
            length: pageSize.value,
            hero: targetKey.value,
            term: targetTerm.value,
            // termPrefix: _utils.getDateTimeTag(targetTerm.value.substring(0, 1)),
            termPrefix: targetDate.value,
        }
    );

    currentPageNumber.value = responseJson['currentPageNumber'];
    totalPageCount.value = responseJson['totalPageCount'];
    pageSize.value = parseInt(responseJson['pageSize']);
    recordsTotal.value = responseJson['recordsTotal'];

    for (let i = 0; i < responseJson['data'].length; i++) {
        responseJson['data'][i]['hit_ratio'] =
            (
                (responseJson['data'][i]['hit'] /
                    responseJson['data'][i]['total']) *
                100
            ).toFixed(2) + '%';
        responseJson['data'][i]['size_avg'] = _utils.formatBytes(
            responseJson['data'][i]['size'] / responseJson['data'][i]['total'],
            2
        );
    }

    listData.value = responseJson['data'];

    console.log('listData.value=', listData.value);
}

const terms = ref([]);

const route = useRoute();
const hero = route.params.hero;

const targetTerm = ref('year');
const targetKey = ref('');

const tmpTerms = [
    { current: targetTerm.value == 'year', key: 'year' },
    { current: targetTerm.value == 'month', key: 'month' },
    { current: targetTerm.value == 'day', key: 'day' },
];

terms.value = tmpTerms;

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

if (responseJson['data'].length == 0) {
    _crossCtl.openModal(
        'error',
        '잘못된 파라메타',
        '키 정보를 읽어올 수 없습니다.\n확인 버튼을 누르면 메인 화면으로 돌아갑니다.',
        ['확인'],
        (btnIdx) => {
            navigateTo('/');
        }
    );
} else {
    targetKey.value = responseJson['data'][0]['api_key'];
}

function handleDate(date) {
    console.log('huk date = ', date);

    let result = date;

    switch (targetTerm.value) {
        case 'year':
            result = `${date}`;
            break;

        case 'month':
            result = `${date.year}${
                (date.month + 1 < 10 ? '0' : '') + (date.month + 1)
            }`;
            break;

        case 'day':
            result = $dayjs(date).format('YYYYMMDD');
            break;
    }

    targetDate.value = result;

    console.log('huk result = ', result);

    refresh();
}

function onChange(e) {
    console.log('targetTerm.value=', targetTerm.value);

    switch (targetTerm.value) {
        case 'year':
            targetDate.value = $dayjs(new Date().toISOString()).format('YYYY');
            break;

        case 'month':
            targetDate.value = $dayjs(new Date().toISOString()).format(
                'YYYYMM'
            );
            break;

        case 'day':
            targetDate.value = $dayjs(new Date().toISOString()).format(
                'YYYYMMDD'
            );
            break;
    }

    terms.value = [
        { current: targetTerm.value == 'year', key: 'year' },
        { current: targetTerm.value == 'month', key: 'month' },
        { current: targetTerm.value == 'day', key: 'day' },
    ];

    refresh();
}

refresh();
</script>
