<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
    @close="handleClose"
    class="import-result-dialog-wrapper"
  >
    <div class="import-result-content" v-html="content"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleClose">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "ImportResultDialog",
  props: {
    // 控制弹窗显示/隐藏
    visible: {
      type: Boolean,
      default: false
    },
    // 弹窗标题
    title: {
      type: String,
      default: "导入结果"
    },
    // 导入结果内容（支持HTML）
    content: {
      type: String,
      default: ""
    },
    // 弹窗宽度
    width: {
      type: String,
      default: "700px"
    },
    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: true
    },
    // 是否可以通过点击modal关闭
    closeOnClickModal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
      this.$emit("close");
    }
  }
};
</script>

<style scoped>
/* 导入结果弹窗样式 */
.import-result-dialog-wrapper .import-result-content {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 0;
  line-height: 1.8;
  font-size: 14px;
  color: #606266;
}

/* 滚动条美化 - WebKit浏览器（Chrome/Safari/Edge） */
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar {
  width: 6px;
}

.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 3px;
}

.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 3px;
}

.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb:hover {
  background: #909399;
}

/* Firefox滚动条 */
.import-result-dialog-wrapper .import-result-content {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
</style>
