<template>
  <el-dialog
      :model-value="showDialog"
      :title="title"
      :width="width"
      @close="closeDialog"
  >
    <div>
      <slot name="content"></slot>
      <slot></slot>
    </div>
    <template #footer>
      <div class="dialog-footer" v-if="btnGroup.length">
        <div v-for="item in btnGroup" class="real-btn" :key="item.attrKey" @click="handleBtn(item.attrKey)">
          {{ item.label }}
        </div>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, ref, reactive,watch,onMounted } from 'vue';

const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '弹框标题'
  },
  width: {
    type: String,
    default: '40%'
  },
  btnGroup: {
    type: Array,
    default: () => ([])
  }
});
const emit = defineEmits(['close:showDialog', 'handleBtn']);
/**
 * @Description: 弹框关闭回调
 * @author liqiuyu
 * @date 2025/5/21
 */
const closeDialog = () => {
  emit('close:showDialog', false);
};

/**
 * @Description: 弹框底部按钮方法回调
 * @author liqiuyu
 * @date 2025/5/21
 */
const handleBtn = (key) => {
  emit('handleBtn', key);
};
</script>

<style scoped lang="scss">
:deep(.el-dialog) {
  background: rgb(34, 43, 69);
  .el-dialog__title {
    color: #f5f6f9;
  }
  .table {
    height: calc(100vh - 420px) !important;
  }
  .el-dialog__body {
    padding: 16px;
  }
  .el-dialog__footer {
    padding: 0;
  }
}
.dialog-footer {
  display: flex;
  justify-content:center;
  width: 100%;
  .real-btn {
    width: auto;
    height: 28px;
    background: rgb(64, 158, 255);
    border: 1px solid rgb(64, 158, 255);
    border-radius: 4px;
    box-shadow: 0 1px 9px 0 rgba(12, 123, 255, 0.3) inset;
    text-align: center;
    padding: 0 16px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.85);
    margin-right: 16px;
    cursor: pointer;
  }
}
</style>