<template>
  <el-dialog modal-class="no-header-el-dialog" :model-value="visible" :width="400" title="" :show-close="false"
    :close-on-press-escape="false" :close-on-click-modal="canClose" @close="close()">
    <el-result v-if="status == 'loading'" icon="" title="" :sub-title="msg">
      <template #icon>
        <el-icon class="text-56px text-blue-500 animate-spin">
          <RefreshRight />
        </el-icon>
      </template>
    </el-result>
    <!-- success -->
    <el-result v-else :icon="status" :sub-title="msg">
      <template #extra>
        <el-button type="primary" @click="close()">确定</el-button>
      </template>
    </el-result>
  </el-dialog>
</template>
<script setup>
import { computed } from 'vue'

const emits = defineEmits(['close'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  status: {
    type: Object,
    default: () => ({})
  },
  msg: {
    type: String,
    default: ''
  }
})

const canClose = computed(() => ['success', 'error'].includes(props.status))

function close() {
  emits('close')
}
</script>
<style>
.no-header-el-dialog .el-dialog__header {
  display: none;
}
</style>