<template>
  <div id="e-dialog">
    <el-dialog :title="dialog.title" v-model="dialog.show" :width="width" :before-close="toClose" :close-on-click-modal="false" :append-to-body="true">
      <el-col :span="24" class="dialogInfo" :style="{ 'max-height': height }"><slot name="info"></slot></el-col>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue';
const props = defineProps({
  dialog: { type: Object, default: () => {} },
  width: { type: String, default: '40%' },
  height: { type: String, default: '400px' }
});
const { dialog } = toRefs(props);
const { width } = toRefs(props);
const emit = defineEmits(['toClose']);
const toClose = () => {
  emit('toClose');
};
</script>

<style lang="scss" scoped>
.dialogInfo {
  min-height: 30px;
  overflow-y: auto;
}
</style>
