<script setup lang="ts">
import { computed, useSlots } from 'vue'
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' // 标签显示的位置
}

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

const props = withDefaults(defineProps<Props>(), {
  height: 240,
  width: 500,
  borderRadius: 6,
  btnLoading: false,
  btnDisabled: false,
  cancelBtnText: '取 消',
  confirmBtnText: '确认',
  labelWidth: 80,
  labelPlacement: 'left',
})

const emit = defineEmits<Emits>()

const slots = useSlots()

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

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

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

function handleDetele() {
  emit('confirm')
}
</script>

<template>
  <NModal
    preset="card"
    transform-origin="center"
    closable
    :style="modalBasicStyle"
    :show="showModal"
    :bordered="false"
    :auto-focus="false"
    :header-style="modalHeaderStyle"
    :content-style="modalContentStyle"
    :footer-style="modalFooterStyle"
    :on-mask-click="handleCloseModal"
    @close="handleCloseModal"
  >
    <template #header>
      <div class="text-xl">{{ 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 class="h-[32px]! rounded-md! px-6!" @click="handleCloseModal"> {{ cancelBtnText }} </NButton>
        <NButton
          :loading="btnLoading"
          type="primary"
          :disabled="btnDisabled"
          class="h-[32px]! px-6! rounded-md! ml-4!"
          @click="handleDetele"
        >
          {{ confirmBtnText }}
        </NButton>
      </div>
    </template>
  </NModal>
</template>
