<template>
  <el-dialog
      :model-value="showDialog"
      :title="title"
      :width="width"
      @close="closeDialog"
      data-testid="custom-dialog"
  >
    <div data-testid="dialog-content">
      <slot name="content"></slot>
      <slot></slot>
    </div>
    <template #footer>
      <div class="dialog-footer all-select-btn" data-testid="dialog-footer">
        <el-button type="default" @click="closeDialog" class="search-btn-balck-theme" data-testid="close-button">关闭</el-button>
        <el-button type="default" v-if="btnGroup.length" v-for="item in btnGroup" class="reset-btn-balck-theme" :key="item.attrKey" @click="handleBtn(item.attrKey)" :data-testid="`dialog-button-${item.attrKey}`">
          {{item.label}}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits } 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','onSave']);
/**
 * @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);
};
/**
 * @Description: 确认按钮方法回调
 * @author liqiuyu
 * @date 2025/5/22
 */
const handleSave = ()=> {
   emit('onSave');
}
</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: 32px;
    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: 32px;
    color: rgba(255, 255, 255, 0.85);
    margin-right: 16px;
    cursor: pointer;
  }
}
</style>