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

interface ModalOptionInterface {
  title: string
  content: string
}

interface Props {
  modalOptions: ModalOptionInterface
}

defineProps<Props>()

const { t } = useI18n()

const isShowModal = ref(false)

const pageWidth = ref(window.innerWidth)

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

const modalFixRight = computed(() => {
  return ((pageWidth.value / 5) * 2 - 443) / 2
})

watch(
  () => isShowModal.value,
  () => {
    pageWidth.value = window.innerWidth
  },
)

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<boolean | Error>((resolve, reject) => {
    _modalStatusResolve = resolve
    _modalStatusReject = reject
  })
}

defineExpose({
  handleShowModal,
})
</script>

<template>
  <n-modal v-model:show="isShowModal">
    <div class="fixed! w-[443px] rounded-[10px] bg-[#fff] p-[30px]" :style="{ right: modalFixRight + 'px' }">
      <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">
          {{ 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>
