<template>
  <div style="position: relative">
    <LinkTitlesCustom :currentPaths="['试卷检查', '试卷列表', '试卷详情']" />
    <div style="position: absolute;right: 10px;">
      <el-button
        type="primary"
        size="small"
        @click="back"
        style="padding-bottom:8px;"
        icon="el-icon-arrow-left"
        >返回</el-button
      >
    </div>
    <br />
    <div style="margin-left:50px;width: 95%;height: 80%" v-html="html"></div>
    <el-dialog
      title="查看图片"
      width="800px"
      :visible.sync="picModel"
      :close-on-click-modal="false"
      @close="closePicModel"
    >
      <el-button size="mini" icon="el-icon-refresh-left" @click="leftRotate"
        >左旋</el-button
      >
      <el-button size="mini" icon="el-icon-refresh-right" @click="rightRotate"
        >右旋</el-button
      >
      <div class="block-seperator"></div>
      <img
        :src="picForm.imgUrl"
        height="100%"
        width="100%"
        :style="{
          width: '90%',
          transform: 'rotate(' + picForm.rotate + 'deg)'
        }"
      />
    </el-dialog>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { DATA_PROCESS_API } from "@/constants/constants";
import LinkTitlesCustom from "@/components/LinkTitlesCustom.vue";
export default {
  data() {
    return {
      workId: "",
      examId: "",
      studentPaperId: "",
      examType: "",
      html: "",
      picModelKey: Math.random(),
      picModel: false,
      picForm: {
        imgUrl: "",
        rotate: 0
      }
    };
  },
  components: {
    LinkTitlesCustom
  },
  computed: {
    ...mapState({ user: state => state.user })
  },
  methods: {
    rightRotate() {
      this.picForm.rotate = this.picForm.rotate + 90;
    },
    leftRotate() {
      this.picForm.rotate = this.picForm.rotate - 90;
    },
    closePicModel() {
      this.picForm.rotate = 0;
      this.picModel = false;
      this.picModelKey = Math.random();
    },
    viewPicture(src) {
      this.picForm.imgUrl = src;
      this.picModel = true;
    },
    back() {
      this.$router.back();
    },
    getStudentPaper() {
      var url =
        DATA_PROCESS_API +
        "/studentPapers/check/" +
        this.studentPaperId +
        "/" +
        this.examType;
      this.$http.get(url).then(response => {
        console.log(response);
        this.html = response.data.studentSubjectiveHtml;
      });
    }
  },
  created() {
    this.workId = this.$route.params.workId;
    this.examId = this.$route.params.examId;
    this.studentPaperId = this.$route.params.studentPaperId;
    this.examType = this.$route.params.examType;
    this.getStudentPaper();
  },
  mounted() {
    window.viewPicture = this.viewPicture;
  }
};
</script>
<style>
img.photo-answer {
  width: 100px;
  padding: 10px;
  height: 100px;
}
.photo-answers-block {
  width: 350px !important;
}
.photo-answers-block a {
  cursor: pointer;
}
</style>
