<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    modelValue: boolean
    title: string
    width?: string
    footer?: boolean
  }>(),
  {
    width: '500px',
    footer: true
  }
)

const computedModelValue = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  }
})

const emits = defineEmits(['update:modelValue', 'closed', 'cancel', 'submit'])

function closed() {
  emits('closed')
}

function cancel() {
  computedModelValue.value = false
  emits('cancel')
}

function submit() {
  emits('submit')
}
</script>

<template>
  <el-dialog
    :title="title"
    :width="width"
    v-model="computedModelValue"
    append-to-body
    close-on-click-modal
    draggable
    overflow
    align-center
    @closed="closed"
  >
    <slot />

    <template #footer>
      <div class="dialog-footer">
        <div v-if="!footer">
          <slot name="footer" />
        </div>
        <div v-else>
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
