<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'

interface Props {
  title?: string
  content: string
}

const { title = '', content = '' } = defineProps<Props>()

const { t } = useI18n()

const isShowModal = ref(false)

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

function handleCancel() {
  isShowModal.value = false

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

function handleConfirm() {
  isShowModal.value = false

  _modalStatusResolve(true)
}

function handleShowModal() {
  isShowModal.value = true

  return new Promise((resolve, reject) => {
    _modalStatusResolve = resolve
    _modalStatusReject = reject
  })
}

defineExpose({
  showModal: handleShowModal,
})
</script>

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

        <div class="mt-[20px] indent-4 text-[16px]">{{ 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">
          {{ t('common_module.cancel_btn_text') }}
        </n-button>

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