<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
import { useLayoutConfig } from '@/composables/useLayoutConfig'

const { t } = useI18n()

const { isMobile } = useLayoutConfig()

const isShowModal = ref(false)

const modalOptions = reactive({
  title: t('common_module.tip'),
  content: '',
  cancelText: t('common_module.cancel_btn_text'),
  confirmText: t('common_module.confirm_btn_text'),
})

let _modalStatusResolve = (_value?: any) => {}
let _modalStatusReject = (_reason?: any) => {}

watch(
  () => isShowModal.value,
  (newVal) => {
    if (!newVal) {
      modalOptions.content = ''
      modalOptions.title = t('common_module.tip')
      modalOptions.cancelText = t('common_module.cancel_btn_text')
      modalOptions.confirmText = t('common_module.confirm_btn_text')
    }
  },
)

onMounted(() => {
  window.$message.ctWarning = handleShowModal
})

function handleCancel() {
  isShowModal.value = false

  _modalStatusReject(new Error('cancel show modal'))
}

function handleConfirm() {
  isShowModal.value = false

  _modalStatusResolve(true)
}

function handleShowModal(content: string, title?: string, cancelText?: string, confirmText?: string) {
  modalOptions.content = content
  title && (modalOptions.title = title)
  cancelText && (modalOptions.cancelText = cancelText)
  confirmText && (modalOptions.confirmText = confirmText)

  isShowModal.value = true

  return new Promise<boolean | Error>((resolve, reject) => {
    _modalStatusResolve = resolve
    _modalStatusReject = reject
  })
}
</script>

<template>
  <n-modal v-model:show="isShowModal">
    <div
      class="rounded-[10px] bg-[#fff]"
      :class="isMobile ? 'max-w-[calc(100%-40px)] p-[20px]' : 'min-w-[420px] max-w-[600px] p-[30px]'"
    >
      <div>
        <h2 class="flex items-baseline">
          <i class="iconfont icon-tishi text-[18px] text-[#f25744]"></i>
          <span class="font-600 ml-[5px] text-[18px]">{{ modalOptions.title || t('common_module.tip') }}</span>
        </h2>

        <div class="mt-[20px] pl-4 text-[16px]">{{ modalOptions.content }}</div>
      </div>

      <div class="mt-[50px] text-end">
        <n-button color="#F5F5F5" round class="!px-[34px] !py-[10px] !text-[14px] !text-[#333]" @click="handleCancel">
          {{ modalOptions.cancelText || t('common_module.cancel_btn_text') }}
        </n-button>

        <n-button color="#6F77FF" round class="!ml-[12px] !px-[34px] !py-[10px] !text-[14px]" @click="handleConfirm">
          {{ modalOptions.confirmText || t('common_module.confirm_btn_text') }}
        </n-button>
      </div>
    </div>
  </n-modal>
</template>
