<template>
  <div class="fx-row fx-bet-cen pointer" @click="handleCollectQuestion">
    <i v-if="!question.collect" class="el-icon-star-off f24"></i>
    <i v-else class="el-icon-star-on f24 f-yellow"></i>
    <span class="ml3">收藏</span>
<!--    <img v-if="tmpImageBase64" :src="tmpImageBase64">-->
  </div>
</template>

<script>
import consts from '@/common/mx-const'
import questionMixin from '../mx-question-mixin'
import { cancelQuestionCollection, uploadGeneratePicAndBindQuestion } from '@/api/webApi/front'
import html2canvas from 'html2canvas'

export default {
  mixins: [questionMixin],
  name: 'plus-question-collection',
  data() {
    return {
      tmpAnswer: '',
      tmpImageBase64: '',
      loading: false
    }
  },
  methods: {
    cancelCollect() {
      const cancelData = {
        questionId: this.question.questionId,
        examineeType: this.examineeType
      }
      this.loading = true
      cancelQuestionCollection(cancelData).then(_ => {
        this.question.collect = false
      }).finally(_ => this.loading = false)
    },
    printAndCollect() {
      window.pageYoffset = 0
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0 //滚动条置顶，解决生成图片不全问题

      this.tmpAnswer = this.question.answer
      this.question.answer = ''

      setTimeout(() => {
        let questionEle = document.getElementById('question_' + this.question.questionId)
        let redrawCanvas = document.createElement('canvas')
        let w = parseInt(window.getComputedStyle(questionEle).width)
        let h = parseInt(window.getComputedStyle(questionEle).height)
        redrawCanvas.width = w
        redrawCanvas.height = h
        redrawCanvas.style.width = w + 'px'
        redrawCanvas.style.height = h + 'px'
        let context = redrawCanvas.getContext('2d')
        context.scale(1, 1) ///缩放等级
        html2canvas(questionEle, {
          canvas: redrawCanvas
        }).then(canvas => {
          const fileName = '题目id:' + this.question.questionId + '.jpg'
          let imgUri = canvas.toDataURL('image/jpeg', 2) // 获取生成的图片的url
          this.tmpImageBase64 = imgUri
          console.log(imgUri)
          let title = this.question.title
          const formData = new FormData()
          formData.append('title', title)
          formData.append('base64Data', imgUri)
          formData.append('questionId', this.question.questionId)
          formData.append('type', consts.enum.uploadType.codeResourcePic + '')
          formData.append('ossType', consts.enum.uploadType.questionsPicture + '')

          // restore
          this.question.answer = this.tmpAnswer

          // api
          uploadGeneratePicAndBindQuestion(formData)
            .then((response) => {
              this.question.collect = true
              this.msgSuccess('收藏成功')
            }).finally(() => this.loading = false)
        })
      }, 50)
    },
    handleCollectQuestion() {
      if (this.loading) return
      if (this.question.collect) {
        this.cancelCollect()
      } else {
        this.printAndCollect()
      }
    }
  }
}
</script>

<style scoped>

</style>
