<template>
  <ElDialog
    v-model="dialogVisible"
    :width="width"
    :align-center="alignCenter"
    class="custom-dialog"
    append-to-body
    :style="{ background: bgColor }"
  >
    <div class="absolute top-10 right-10 round-4 w-20 h-20 flex-center pointer hover" @click="close">
      <SvgIcon name="close" size="14" />
    </div>
    <slot></slot>
  </ElDialog>
</template>

<!-- 标题、内容、底部按钮。都是自定义 -->
<script lang="ts" setup>
import { ref, computed  } from 'vue';
import SvgIcon from '@/components/SvgIcon/SvgIcon.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false,
  },
  alignCenter: {
    type: Boolean,
    default: true,
  },
  width: {
    type: String,
    default: '50%',
  },
  bgColor: {
    type: String,
    default: 'linear-gradient(to bottom, #1c2523 0%, #1a1a1a 20%)',
  },
});

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

const close = () => {
  emit('update:modelValue', false);
}
const dialogVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

</script>
<style lang="scss">
.custom-dialog {
  border-radius: 8px;
  padding: 0;
  .el-dialog__header {
    display: none;
  }
}
</style>
<style scoped>
.hover {
  &:hover {
    background: rgba(255, 255, 255, 0.1);
  }
}
</style>
