<!--
 * @Author: xiejiang
 * @Date: 2024-11-27 15:14:31
 * @LastEditors: xiejiang
 * @LastEditTime: 2024-12-11 14:05:24
 * @Description:  弹窗
 * Copyright（c）2024 by 好老师教育科技有限公司 All right Reserved.
-->
<template>
  <t-dialog
    v-model:visible="visible"
    :width="width"
    :footer="true"
    class="reset-dialog"
    :on-close="closeDialog"
    v-bind="$attrs"
  >
    <template #header>
      <div v-if="showTitle">{{ title }}</div>
      <slot name="title" v-else />
    </template>
    <template #body>
      <slot name="body" />
    </template>
    <template #footer>
      <div class="flex items-center justify-end footer-buttons">
        <slot name="footer" />
      </div>
    </template>
  </t-dialog>
</template>

<script setup lang="ts">
import { isFunction } from '@/utils/is'

defineOptions({
  name: 'Tdialog'
})
interface DialogProps {
  dialogVisible: boolean
  title?: string
  width?: string
  bodyLoading?: boolean
}
const props = withDefaults(defineProps<DialogProps>(), {
  dialogVisible: false,
  width: '560px',
  bodyLoading: false
})
const visible = ref(props.dialogVisible)
watch(
  () => props.dialogVisible,
  val => {
    visible.value = val
  },
  { immediate: true }
)
const emit = defineEmits<{
  (e: 'update:dialogVisible', value: Boolean): void
  (e: 'close'): void
  (e: 'confirm'): void
}>()
const closeDialog = () => {
  emit('update:dialogVisible', false)
  emit('close')
}
type Slots = Record<'title' | 'body' | 'footer', () => VNode>
const slots = defineSlots<Slots>()
const showTitle = computed(() => !isFunction(slots.title))
</script>

<style lang="less" scoped>
:deep(.reset-dialog) {
  .t-dialog {
    padding: 24px 32px;
  }

  .t-dialog__body {
    padding: 24px 0;
    text-align: left;
  }

  .t-dialog__footer {
    padding-top: 24px;
  }
}
</style>
