<template>
  <div v-loading="loading" class="ecrf-wrapper">
    <el-form
      v-if="questions.length > 0"
      ref="questions"
      size="small"
      :model="questionForm"
    >
      <QuestionItem
        v-for="question of questions"
        :key="question.Id"
        :question="question"
        :question-form="questionForm"
        :reading-task-state="readingTaskState"
        :is-first-change-task="isFirstChangeTask"
        :visit-task-id="visitTaskId"
        @setFormItemData="setFormItemData"
        @resetFormItemData="resetFormItemData"
        @addAnnotation="addAnnotation"
        @removeAnnotation="removeAnnotation"
        @locateAnnotation="locateAnnotation"
      />

      <el-form-item v-if="readingTaskState < 2 && !isFirstChangeTask">
        <div style="text-align:right">
          <el-button size="mini" :disabled="!questionFormChangeState" :type="questionFormChangeState ? 'primary' : null" @click="handleSave">{{ $t('common:button:save') }}</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import { uploadPrintscreen } from '@/api/reading'
import { saveImageQuality } from '@/api/trials'
import QuestionItem from './QuestionItem'
import DicomEvent from './DicomEvent'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  name: 'ECRF',
  components: {
    QuestionItem
  },
  props: {
    questionFormChangeState: {
      type: Boolean,
      default: false
    },
    questionFormChangeNum: {
      type: Number,
      default: 0
    },
    isFirstChangeTask: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      questions: [],
      questionForm: {},
      readingTaskState: 2,
      visitTaskId: '',
      imageQualityId: '',
      measurements: [],
      spleenStatusId: '',
      isBaseLineTask: false
    }
  },
  computed: {
    ...mapGetters(['visitTaskList', 'currentReadingTaskState'])
  },
  watch: {
    questionForm: {
      deep: true,
      immediate: false,
      handler(v) {
        DicomEvent.$emit('questionFormChange', true)
      }
    },
    currentReadingTaskState: {
      immediate: true,
      handler(val) {
        if (val) {
          this.readingTaskState = val
        }
      }
    }
  },
  mounted() {
    DicomEvent.$on('setReadingState', readingTaskState => {
      this.readingTaskState = readingTaskState
    })
    DicomEvent.$on('handleSaveQuestions', readingTaskState => {
      this.handleSave()
    })
  },
  beforeDestroy() {
    DicomEvent.$off('setReadingState')
  },
  methods: {
    async getQuestions(visitTaskId) {
      this.visitTaskId = visitTaskId
      // const loading = this.$loading({ fullscreen: true })
      var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === visitTaskId)

      if (idx > -1) {
        this.isBaseLineTask = this.visitTaskList[idx].IsBaseLineTask
        this.readingTaskState = this.visitTaskList[idx].ReadingTaskState
        var questions = this.visitTaskList[idx].Questions
        this.measurements = []
        this.visitTaskList[idx].QuestionMarkInfoList.forEach(i => {
          if (i.MeasureData) {
            i.MeasureData = JSON.parse(i.MeasureData)
          }
          this.measurements.push(i)
        })

        questions.map((v) => {
          v.IsBaseLineTask = this.isBaseLineTask
          if (v.Type === 'group' && v.Childrens.length === 0) return
          if (!v.IsPage && v.Type !== 'group' && v.Type !== 'summary') {
            this.$set(this.questionForm, v.Id, v.Answer ? v.Answer : null)
            if (v.QuestionType === 44) {
              // 影像质量评估
              this.imageQualityId = v.Id
              // store.dispatch('reading/setImageQuality', v.Answer ? v.Answer : null)
            }
            if (v.QuestionType === 49) {
              // 脾脏状态
              this.spleenStatusId = v.Id
            }
          }
          if (v.Childrens.length > 0) {
            this.setChild(v.Childrens)
          }
        })
        this.questions = questions
      }
      // loading.close()
    },
    setChild(obj) {
      obj.forEach(i => {
        i.IsBaseLineTask = this.isBaseLineTask
        if (i.Type !== 'group' && i.Type !== 'summary' && i.Id) {
          this.$set(this.questionForm, i.Id, i.Answer ? i.Answer : null)
          if (i.QuestionType === 44) {
            // 影响质量评估
            this.imageQualityId = i.Id
            // store.dispatch('reading/setImageQuality', i.Answer ? i.Answer : null)
          }
          if (i.QuestionType === 49) {
            // 脾脏状态
            this.spleenStatusId = i.Id
          }
        }
        if (i.Childrens && i.Childrens.length > 0) {
          this.setChild(i.Childrens)
        }
      })
    },
    handleSave() {
      this.$refs['questions'].validate(async(valid) => {
        if (!valid) return
        this.loading = true
        var answers = []
        var imageQuality = null
        await this.uploadScreenshot()
        for (const k in this.questionForm) {
          answers.push({ id: k, answer: this.questionForm[k] })
          if (k === this.imageQualityId) {
            imageQuality = this.questionForm[k]
          }
        }
        var questionMarkInfoList = []
        this.measurements.forEach(i => {
          if (i.MeasureData) {
            i.MeasureData = JSON.stringify(i.MeasureData)
          }

          questionMarkInfoList.push(i)
        })
        var params = {
          visitTaskId: this.visitTaskId,
          answers: answers,
          questionMarkInfoList
        }
        saveImageQuality(params).then(async res => {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          var trialId = this.$route.query.trialId
          await store.dispatch('reading/refreshDicomReadingQuestionAnswer', { trialId: trialId, visitTaskId: this.visitTaskId })
          this.getQuestions(this.visitTaskId)

          this.loading = false

          DicomEvent.$emit('questionFormChange', false)
          DicomEvent.$emit('getReportInfo', true)
          DicomEvent.$emit('readingPageUpdate', {})
          var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.visitTaskId)
          if (idx > -1 && !this.visitTaskList[idx].IsBaseLineTask) {
            if (parseInt(imageQuality) === 2) {
              this.$confirm(this.$t('trials:reading:warnning:unableEvaluate'), '', {
                type: 'warning'
              }).then(() => {
                store.dispatch('reading/setImageQuality', imageQuality)
                DicomEvent.$emit('handleImageQualityAbnormal')
              }).catch(() => {

              })
            }
          }
        }).catch(() => {
          this.loading = false
        })
      })
    },
    // 上传截图
    async  uploadScreenshot() {
      for (let i = 0; i < this.measurements.length; i++) {
        if (this.measurements[i].pictureBaseStr) {
          var pictureObj = await this.uploadScreenshots(`${new Date().getTime()}`, this.measurements[i].pictureBaseStr)
          this.measurements[i].PicturePath = pictureObj.isSuccess ? pictureObj.result.url : ''
          this.measurements[i].pictureBaseStr = ''
        }
      }
    },
    async uploadScreenshots(fileName, file) {
      try {
        file = this.convertBase64ToBlob(file)
        var trialId = this.$route.query.trialId
        var subjectId = this.$route.query.trialId
        const result = await this.OSSclient.put(`/${trialId}/Read/${subjectId}/Visit/${fileName}.png`, file)
        return { isSuccess: true, result: result }
      } catch (e) {
        console.log(e)
        return { isSuccess: false, result: e }
      }
    },
    convertBase64ToBlob(imageEditorBase64) {
      var base64Arr = imageEditorBase64.split(',')
      var imgtype = ''
      var base64String = ''
      if (base64Arr.length > 1) {
        // 如果是图片base64，去掉头信息
        base64String = base64Arr[1]
        imgtype = base64Arr[0].substring(
          base64Arr[0].indexOf(':') + 1,
          base64Arr[0].indexOf(';')
        )
      }
      // 将base64解码
      var bytes = atob(base64String)
      // var bytes = base64;
      var bytesCode = new ArrayBuffer(bytes.length)
      // 转换为类型化数组
      var byteArray = new Uint8Array(bytesCode)

      // 将base64转换为ascii码
      for (var i = 0; i < bytes.length; i++) {
        byteArray[i] = bytes.charCodeAt(i)
      }

      // 生成Blob对象（文件对象）
      return new Blob([bytesCode], { type: imgtype })
    },
    addAnnotation(obj) {
      const { Id, QuestionType } = obj
      this.currentQsId = Id
      var idx = this.measurements.findIndex(i => i.QuestionId === Id)
      var orderMarkName = QuestionType === 48 ? 'Spleen' : ''
      if (idx === -1) {
        // 脾脏长度(48); 肝脏血池SUVmax(51); 纵膈血池SUVmax(52)
        this.measurements.push({ QuestionId: Id, QuestionType: QuestionType, StudyId: '', SeriesId: '', InstanceId: '', MarkTool: '', PicturePath: '', NumberOfFrames: '', MeasureData: '', OrderMarkName: orderMarkName })
      }

      // 脾脏长度  直径测量
      this.$emit('setNonTargetMeasurementStatus', { status: true })
      DicomEvent.$emit('imageLocation', { questionId: Id, visitTaskId: this.visitTaskId, lesionName: orderMarkName, markTool: 'Length', readingTaskState: this.readingTaskState, isMarked: false })
    },
    removeAnnotation(obj) {
      const { Id } = obj
      var idx = this.measurements.findIndex(i => i.QuestionId === Id)
      if (idx === -1) return
      this.$set(this.questionForm, Id, '')
      store.dispatch('reading/removeNonTargetMeasuredData', { visitTaskId: this.visitTaskId, measureData: this.measurements[idx].MeasureData, questionId: Id })
      this.measurements.splice(idx, 1)
      DicomEvent.$emit('getMeasureData')
    },
    locateAnnotation(obj) {
      const { Id } = obj
      var idx = this.measurements.findIndex(i => i.QuestionId === Id)
      if (idx === -1) return
      const measureObj = this.measurements[idx]
      DicomEvent.$emit('imageLocation', { questionId: Id, visitTaskId: this.visitTaskId, lesionName: measureObj.OrderMarkName, markTool: measureObj.MarkTool, readingTaskState: this.readingTaskState, isMarked: !!measureObj.MeasureData })
    },
    setMeasuredData(measurement) {
      var idx = -1
      if (this.currentQsId) {
        // 新增
        idx = this.measurements.findIndex(i => i.QuestionId === this.currentQsId)
        this.currentQsId = ''
      } else {
        // 编辑
        idx = this.measurements.findIndex(i => i.OrderMarkName === measurement.data.remark)
      }
      if (idx === -1) return
      var remark = this.measurements[idx].QuestionType === 48 ? 'Spleen' : ''
      measurement.data.remark = remark
      this.measurements[idx].StudyId = measurement.studyId
      this.measurements[idx].SeriesId = measurement.seriesId
      this.measurements[idx].InstanceId = measurement.instanceId
      this.measurements[idx].MarkTool = measurement.type
      this.measurements[idx].NumberOfFrames = isNaN(parseInt(measurement.frame)) ? 0 : measurement.frame
      this.measurements[idx].MeasureData = measurement
      this.measurements[idx].pictureBaseStr = measurement.pictureBaseStr
      measurement.pictureBaseStr = ''
      // 添加标记
      var data = {
        Id: '',
        IsDicomReading: true,
        StudyId: measurement.studyId,
        InstanceId: measurement.instanceId,
        SeriesId: measurement.seriesId,
        MeasureData: measurement,
        QuestionId: this.measurements[idx].QuestionId,
        RowIndex: null,
        RowId: null,
        VisitTaskId: this.visitTaskId,
        OrderMarkName: measurement.data.remark,
        frame: isNaN(parseInt(measurement.frame)) ? 0 : measurement.frame
      }
      if (measurement.type === 'Length') {
        const length = measurement.data.length ? parseFloat(measurement.data.length) : null
        this.$set(this.questionForm, this.measurements[idx].QuestionId, length || null)
        console.log(this.measurements[idx].QuestionType, length)
        if (this.measurements[idx].QuestionType === 48 && length <= 130 && this.isBaseLineTask) {
          // 脾脏状态设置默认值为正常
          this.$set(this.questionForm, this.spleenStatusId, '1')
        }
        if (this.measurements[idx].QuestionType === 48 && length > 130 && this.isBaseLineTask) {
          // 脾脏状态设置默认值为肿大
          this.$set(this.questionForm, this.spleenStatusId, '6')
        }
      }
      store.dispatch('reading/addOrUpdateNonTargetMeasuredData', { visitTaskId: this.visitTaskId, data: data })
      DicomEvent.$emit('questionFormChange', true)
    },
    resetFormItemData(v) {
      this.questionForm[v] = null
    },
    setFormItemData(obj) {
      if (obj.key === this.spleenStatusId) {
        console.log(obj.val)
      }
      this.questionForm[obj.key] = obj.val
    }
  }
}
</script>
<style lang="scss" scoped>
  .ecrf-wrapper{
    /deep/ .el-form-item__label{
      color: #c3c3c3;
    }
    /deep/ .el-input__inner{
      background-color: transparent;
      color: #ddd;
      border: 1px solid #5e5e5e;
    }
    /deep/ .el-textarea__inner{
      background-color: transparent;
      color: #ddd;
      border: 1px solid #5e5e5e;
    }

    /deep/ .el-form-item{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    /deep/ .el-form-item__content{
      flex: 1;
    }
    /deep/ .el-button--mini, .el-button--mini.is-round {
    padding: 7px 10px;
  }
    .el-form-item__content
    .el-select{
      width: 100%;
    }
  }

  </style>

