<script setup lang="ts">
import { computed, useSlots, Slots } from 'vue'
import { useI18n } from 'vue-i18n'
import { modalHeaderStyle, modalContentStyle, modalFooterStyle } from './modal-style'

interface Props {
  title: string // 弹窗标题
  isShow: boolean // 是否显示
  height?: number // 高度
  width?: number // 宽度
  borderRadius?: number // 圆角
  btnLoading?: boolean // 按钮是否加载中
  btnDisabled?: boolean // 按钮是否禁用
  cancelBtnText?: string // 取消按钮文字
  confirmBtnText?: string // 取消按钮文字
  labelWidth?: number // 标签的宽度
  labelPlacement?: 'left' | 'top' // 标签显示的位置
  contentStyle?: object
  maskClosable?: boolean // 点击遮罩层是否关闭
}

interface Emits {
  (e: 'update:isShow', value: boolean): void
  (e: 'close'): void
  (e: 'confirm'): void
}

const { t } = useI18n()

const props = withDefaults(defineProps<Props>(), {
  height: 240,
  width: 500,
  borderRadius: 10,
  btnLoading: false,
  btnDisabled: false,
  cancelBtnText: '',
  confirmBtnText: '',
  labelWidth: 80,
  labelPlacement: 'left',
  contentStyle: () => ({}),
  maskClosable: false,
})

const cancelBtnText = computed(() => props.cancelBtnText || t('common_module.cancel_btn_text'))
const confirmBtnText = computed(() => props.confirmBtnText || t('common_module.confirm_btn_text'))

const emit = defineEmits<Emits>()

const slots: Slots = useSlots()

const modalBasicStyle = {
  width: props.width + 'px',
  minHeight: props.height + 'px',
  borderRadius: props.borderRadius + 'px',
}

const contentStyle = computed(() => {
  return { ...modalContentStyle, ...props.contentStyle }
})

const showModal = computed({
  get() {
    return props.isShow
  },
  set(value: boolean) {
    emit('update:isShow', value)
  },
})

function handleCloseModal() {
  showModal.value = false
  emit('close')
}

function handleConfirm() {
  emit('confirm')
}

function handleMaskClick() {
  if (props.maskClosable) {
    handleCloseModal()
  }
}
</script>

<template>
  <NModal
    preset="card"
    transform-origin="center"
    closable
    :style="modalBasicStyle"
    :show="showModal"
    :bordered="false"
    :auto-focus="false"
    :header-style="modalHeaderStyle"
    :content-style="contentStyle"
    :footer-style="modalFooterStyle"
    :mask-closable="maskClosable"
    :on-mask-click="handleMaskClick"
    @close="handleCloseModal"
  >
    <template #header>
      <slot v-if="slots.header" name="header" />
      <div v-else class="font-family-medium text-[18px] leading-none">{{ title }}</div>
    </template>

    <div>
      <slot name="content" />
    </div>

    <template #footer>
      <slot v-if="slots.footer" name="footer" />

      <div v-else class="flex w-full items-center justify-end">
        <NButton color="#F5F5F5" round class="h-[34px]! px-6! min-w-[96px]! text-font-color!" @click="handleCloseModal">
          {{ cancelBtnText }}
        </NButton>
        <NButton
          :loading="btnLoading"
          type="primary"
          color="#6F77FF"
          round
          :bordered="false"
          :focusable="false"
          :disabled="btnDisabled"
          class="h-[34px]! px-6! ml-4! min-w-[96px]!"
          @click="handleConfirm"
        >
          {{ confirmBtnText }}
        </NButton>
      </div>
    </template>
  </NModal>
</template>
