<template>
  <el-dialog
    class="modify-data"
    :visible.sync="modalIsShow"
    :title="title"
    top="10vh"
    width="500px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    @close="dialogClose"
    @opened="dialogOpen"
  >
    <div class="frame-container" style="height: 750px;" ref="frameContainer">
      <div class="frame-loading" v-if="loading"></div>
    </div>
    <div slot="footer"></div>
  </el-dialog>
</template>

<script>
export default {
  name: "modify-data",
  props: {
    instance: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  computed: {
    title() {
      return this.instance.studentName + "成绩报告";
    }
  },
  data() {
    return {
      modalIsShow: false,
      loading: true
    };
  },
  methods: {
    dialogOpen() {
      const iframeDom = document.createElement("iframe");
      const params = [
        this.instance.schoolId,
        this.instance.studentCode,
        this.instance.examId,
        this.instance.courseCode
      ]
        .filter(item => !!item)
        .join("/");
      iframeDom.src = `/#/student-preview/${params}`;
      iframeDom.style.cssText =
        "width: 422px;height: 736px;display:block;margin: 0 auto;border:none;";
      this.$refs.frameContainer.appendChild(iframeDom);
      this.loading = true;
      iframeDom.onload = () => {
        this.loading = false;
      };
    },
    dialogClose() {
      this.$refs.frameContainer.removeChild(
        this.$refs.frameContainer.lastChild
      );
    },
    cancel() {
      this.modalIsShow = false;
    },
    open() {
      this.modalIsShow = true;
    }
  }
};
</script>
