<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :title="title"
    :width="width"
    :before-close="handleBeforeClose"
    custom-class="custom-dialog"
  >
    <!-- 内容区域 -->
    <div class="dialog-content" :style="{ height: contentHeight }">
      <iframe
        :src="iframeSrc"
        frameborder="0"
        @load="handleIframeLoad"
        style="width: 100%; height: 100%"
      ></iframe>
    </div>

    <!-- 底部按钮区域 -->
    <template #footer>
      <el-button
        type="primary"
        style="width: 100%"
        v-clipboard:copy="iframeSrc"
        v-clipboard:success="onCopy"
        >复制链接</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
  export default {
    name: 'ElDialogWrapper',
    props: {
      // 基础配置
      visible: {
        type: Boolean,
        default: false
      },
      title: {
        type: String,
        default: '对话框'
      },
      width: {
        type: String,
        default: '50%'
      },
      height: {
        type: String,
        default: '500px' // 更改为明确的默认高度
      },
      // iframe配置
      iframeSrc: {
        type: String,
        default: ''
      }
    },
    computed: {
      // 计算内容区域高度（减去标题和底部区域）
      contentHeight() {
        return this.height;
      }
    },
    data() {
      return {
        dialogVisible: this.visible
      };
    },
    watch: {
      visible(val) {
        this.dialogVisible = val;
      },
      dialogVisible(val) {
        this.$emit('update:visible', val);
      }
    },
    methods: {
      handleBeforeClose(done) {
        this.$emit('before-close', done);
        this.$emit('update:visible', false);
        done();
      },
      handleIframeLoad() {
        this.$emit('iframe-load');
      },
      onCopy() {
        this.$message.success('复制成功！');
      }
    }
  };
</script>

<style scoped>
  /* 组件内样式（scoped） */
  ::v-deep .el-dialog__body {
    padding: 0;
    font-size: 14px;
  }
</style>
