<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <TransitionRoot as="template" :show="open">
        <Dialog as="div" class="relative z-10" @close="open = false">
            <div
                class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
            />

            <div class="fixed z-10 inset-0 overflow-y-auto">
                <div
                    class="flex items-end sm:items-center justify-center min-h-full p-4 text-center sm:p-0"
                >
                    <DialogPanel
                        class="relative bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full"
                    >
                        <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
                            <div class="sm:flex sm:items-start">
                                <div
                                    :class="
                                        currentModalInfo['type'] == 'ok'
                                            ? 'mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-100 sm:mx-0 sm:h-10 sm:w-10'
                                            : currentModalInfo['type'] ==
                                              'error'
                                            ? 'mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10'
                                            : 'mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 sm:mx-0 sm:h-10 sm:w-10'
                                    "
                                >
                                    <CheckIcon
                                        v-if="currentModalInfo['type'] == 'ok'"
                                        class="h-6 w-6 text-green-600"
                                        aria-hidden="true"
                                    />
                                    <ExclamationTriangleIcon
                                        v-else-if="
                                            currentModalInfo['type'] == 'error'
                                        "
                                        class="h-6 w-6 text-red-600"
                                        aria-hidden="true"
                                    />
                                    <ExclamationCircleIcon
                                        v-else
                                        class="h-6 w-6 text-gray-600"
                                        aria-hidden="true"
                                    />
                                </div>
                                <div
                                    class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left"
                                >
                                    <DialogTitle
                                        as="h3"
                                        class="text-lg leading-6 font-medium text-gray-900"
                                    >
                                        {{ currentModalInfo['title'] }}
                                    </DialogTitle>
                                    <div class="mt-2">
                                        <p class="text-sm text-gray-500">
                                            {{ currentModalInfo['message'] }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
                        >
                            <button
                                type="button"
                                :class="
                                    currentModalInfo['type'] == 'ok'
                                        ? 'w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm'
                                        : currentModalInfo['type'] == 'error'
                                        ? 'w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm'
                                        : 'w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:ml-3 sm:w-auto sm:text-sm'
                                "
                                @click="
                                    _crossCtl.onModalClosed(
                                        currentModalInfo.serial,
                                        0
                                    )
                                "
                            >
                                {{ currentModalInfo['btnTexts'][0] }}
                            </button>
                            <button
                                v-if="currentModalInfo['btnCount'] > 1"
                                ref="cancelButtonRef"
                                type="button"
                                :class="
                                    currentModalInfo['type'] == 'ok'
                                        ? 'mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'
                                        : currentModalInfo['type'] == 'error'
                                        ? 'mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'
                                        : 'mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm'
                                "
                                @click="
                                    _crossCtl.onModalClosed(
                                        currentModalInfo.serial,
                                        1
                                    )
                                "
                            >
                                {{ currentModalInfo['btnTexts'][1] }}
                            </button>
                        </div>
                    </DialogPanel>
                </div>
            </div>
        </Dialog>
    </TransitionRoot>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import {
    Dialog,
    DialogPanel,
    DialogTitle,
    TransitionRoot,
} from '@headlessui/vue';
import {
    CheckIcon,
    ExclamationTriangleIcon,
    ExclamationCircleIcon,
} from '@heroicons/vue/24/outline';

const currentModalInfo = _crossCtl.currentModalInfo;

const open = computed(() => {
    return currentModalInfo.value['serial'] !== -1;
});
</script>
