<template>
  <el-dialog :title="title" v-model="visible" :width="width" append-to-body :destroy-on-close="true"
    :close-on-click-modal="false" custom-class="ie-modal" @close="handleBeforeClose">
    <slot v-if="show"></slot>
    <template #footer>
      <div>
        <el-button @click="handleCancel" v-if="showCancel">{{ cancelText }}</el-button>
        <el-button type="primary" @click="handleConfirm" :loading="loadingModel" v-if="showConfirm">
          {{ confirmText }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch } from 'vue';

const loadingModel = defineModel('loading')
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  width: {
    type: String,
    default: '500px'
  },
  showCancel: {
    type: Boolean,
    default: true
  },
  showConfirm: {
    type: Boolean,
    default: true
  },
  cancelText: {
    type: String,
    default: '取消'
  },
  confirmText: {
    type: String,
    default: '确定'
  }
})
const visible = defineModel('visible')
const show = ref(false);
const emit = defineEmits(['cancel', 'confirm'])

const handleBeforeClose = () => {
  emit('beforeClose')
}
const handleCancel = () => {
  emit('cancel')
  close();
}
const handleConfirm = () => {
  emit('confirm')
}
watch(visible, (newVal) => {
  if (newVal) {
    show.value = newVal;
  } else {
    setTimeout(() => {
      show.value = false;
    }, 300);
  }
})
const open = () => {
  visible.value = true
}
const close = () => {
  visible.value = false
}
const showLoading = () => {
  loadingModel.value = true
}
const hideLoading = () => {
  loadingModel.value = false
}

defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})
</script>
<style lang="scss" scoped>
.ie-modal {
  .el-dialog:not(.is-fullscreen) {
    margin-top: 0 !important;
  }
}
</style>