<template>
    <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
        <div
            v-if="isLoading"
            class="flex flex-1 flex-col justify-between bg-white p-6"
        >
            <div class="flex-1 relative">
                <div class="flex border-b-2 border-indigo-500 pb-2">
                    <p class="text-sm font-medium text-indigo-600">
                        <a
                            href="javascript:void(0)"
                            @click="pageMove(pageTitle[0].id, '')"
                            >{{
                                pageTitle[0]?.title ?? pageTitle[0]?.title
                            }}&nbsp;</a
                        >
                    </p>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="w-6 h-6 text-indigo-500 absolute right-0 cursor-pointer"
                        @click="pageMove(pageTitle[0].id, '')"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M12 6v12m6-6H6"
                        />
                    </svg>
                </div>
                <a
                    v-for="list in dataList"
                    :key="list.serial"
                    class="mt-2 block"
                >
                    <p
                        class="mt-3 text-base text-gray-500 cursor-pointer"
                        @click="pageMove(pageTitle[0].id, list)"
                    >
                        {{
                            list.title.length >= 20
                                ? list.title.substr(0, 20) + '...'
                                : list.title.substr(0, 20)
                        }}
                    </p>
                </a>
            </div>
        </div>
        <div v-else class="flex flex-1 flex-col justify-between bg-white p-6">
            <div class="flex-1 relative">
                <div class="flex pb-2 bg-sky-100 animate-pulse rounded-lg">
                    <p class="text-sm font-medium text-gray-600">
                        <a href="javascript:void(0)">&nbsp;</a>
                    </p>
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        fill="none"
                        viewBox="0 0 24 24"
                        stroke-width="1.5"
                        stroke="currentColor"
                        class="hidden w-6 h-6 text-indigo-500 absolute right-0 cursor-pointer"
                    >
                        <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M12 6v12m6-6H6"
                        />
                    </svg>
                </div>
                <a class="mt-2 block">
                    <p
                        class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
                    >
                        &nbsp;
                    </p>
                    <p
                        class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-full"
                    >
                        &nbsp;
                    </p>
                    <p
                        class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-2/3"
                    >
                        &nbsp;
                    </p>
                    <p
                        class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
                    >
                        &nbsp;
                    </p>
                    <p
                        class="mt-3 bg-slate-100 animate-pulse rounded-lg cursor-pointer w-3/4"
                    >
                        &nbsp;
                    </p>
                </a>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const props = defineProps({
    dataList: { type: Object, required: true },
    pageTitle: { type: Object, required: true },
    isLoading: { type: Boolean, default: false },
});

const bordPage = ['preach', 'programme', 'youtube'];

function pageMove(pageName, detail) {
    if (pageName === 'notice') {
        navigateTo('/support/' + pageName);
    } else if (bordPage.includes(pageName) == true) {
        if (detail == '') {
            navigateTo('/board/' + pageName + '/list');
        } else {
            navigateTo('/board/' + pageName + '/view/' + detail.cid);
        }
    }
}
</script>
