<template>
  <div class="base-dialog">
    <el-dialog class="base-dialog" v-model="visible" :width="width" align-center>
      <img src="@/public/header/close.png" class="close" @click="handleClose" />
      <slot></slot>
      <template #footer v-if="$slots.footer">
        <slot name="footer"></slot>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  modelValue: { type: Boolean, default: false },
  width: { type: [Number, String], default: '600px' },
})

const emit = defineEmits(['update:modelValue', 'close'])

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

function handleClose() {
  visible.value = false
  emit('close')
}
</script>

<style lang="scss">
.base-dialog {
  position: relative;

  .close {
    width: 34px;
    height: 34px;
    cursor: pointer;
    position: absolute;
    top: -34px;
    right: -34px;
    z-index: 9999;

    &:hover {
      transform: scale(1.1);
      transition: transform 0.3s;
    }
  }

  .el-dialog__headerbtn {
    display: none;
  }

  .el-dialog {
    border-radius: 20px;
  }

  .el-dialog__header {
    display: none;
  }
}
</style>
