<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="bg-white">
        <div
            class="max-w-7xl mx-auto text-center py-12 px-4 sm:px-6 lg:py-16 lg:px-8"
        >
            <h2
                class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl"
            >
                <span class="block">회원 탈퇴</span>
                <span class="block">탈퇴하시겠습니까?</span>
            </h2>
            <p class="mt-4 text-lg leading-6 text-indigo-200">
                탈퇴 후에는 일정 기간 동일 이메일로 가입이 불가합니다.
            </p>
            <div class="mt-8 flex justify-center">
                <div class="inline-flex rounded-md shadow">
                    <a
                        href="javascript:void(0)"
                        class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
                        @click="doWithdrawal"
                    >
                        탈퇴
                    </a>
                </div>
                <div class="ml-3 inline-flex">
                    <a
                        href="javascript:void(0)"
                        class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200"
                        @click="$router.push('/')"
                    >
                        취소
                    </a>
                </div>
            </div>
        </div>
    </div>
</template>

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

useHead({
    htmlAttrs: {
        class: 'h-full bg-white',
    },
    bodyAttrs: {
        class: 'h-full',
    },
});

async function doWithdrawal() {
    const responseJson = await _crossCtl.doComm('withdrawal', '', {});
    console.log('responseJson=', responseJson);
    if (responseJson['responseMessage'] == 'ok') {
        window.location.replace('/');
    } else {
        alert(responseJson['responseMessage']);
    }
}
</script>
