<template>
    <div class="bg-gray-50">
        <div class="max-w-7xl mx-auto py-6 space-y-6 sm:px-6 lg:px-8">
            <div class="bg-white shadow px-4 py-5 sm:rounded-lg sm:p-6">
                <div class="bg-white">
                    <div
                        class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-20 lg:px-8"
                    >
                        <div class="lg:grid lg:grid-cols-3 lg:gap-8">
                            <div>
                                <h2
                                    class="text-3xl font-extrabold text-gray-900"
                                >
                                    자주 묻는 질문과 답변
                                </h2>
                                <p class="mt-4 text-base text-gray-500">
                                    궁금하신 내용이 이곳에 없다면
                                    <a
                                        href="javascript:void(0)"
                                        class="font-medium text-indigo-600 hover:text-indigo-500"
                                        @click="
                                            $router.push('/support/inquiry')
                                        "
                                        >일대일 문의</a
                                    >
                                    메뉴를 통해 질문을 남기실 수 있습니다.
                                </p>
                            </div>
                            <div class="mt-12 lg:mt-0 lg:col-span-2">
                                <dl class="space-y-12">
                                    <div v-if="listData.length == 0">
                                        <dt
                                            class="text-lg leading-6 font-medium text-gray-900"
                                        >
                                            아직 등록된 자주 묻는 질문과 답변이
                                            없나요?
                                        </dt>
                                        <dd
                                            class="mt-2 text-base text-gray-500"
                                        >
                                            네. 아직은 등록된 내용이 없습니다.
                                        </dd>
                                    </div>

                                    <div
                                        v-for="item in listData"
                                        v-else
                                        :key="item.serial"
                                    >
                                        <BaseFaqItem1 :item="item" />
                                    </div>
                                </dl>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

const listData = ref();
const inLoadingFlag = ref(false);
const statusMessage = ref('데이터를 읽어 오는 중...');

inLoadingFlag.value = true;
const responseJson = await _crossCtl.doComm('list', 'faq:active', {});

inLoadingFlag.value = false;

if (responseJson['responseCode'] == 200) {
    listData.value = responseJson['data'];
} else {
    statusMessage.value = responseJson['responseMessage'];
}
</script>

<style lang="css" scoped></style>
