<template>
  <div v-loading="loading" class="reading-viewer-container">
    <!-- 访视阅片 -->
    <visit-review 
      v-if="taskInfo && taskInfo.ReadingCategory=== 1" 
    />
    <!-- 临床数据 -->
    <el-dialog
      :visible.sync="clinicalDataVisible"
      :custom-class="isClinicalDataFullscreen?'full-dialog-container':'dialog-container'"
      :show-close="false"
      :close-on-click-modal="false"
      :fullscreen="isClinicalDataFullscreen"
    >
      <span slot="title" class="dialog-footer">
        <!-- 当前阅片任务存在临床数据，请查看。若已查看，请点击“确认” -->
        <span v-if="!closeCDVisible">{{ $t('trials:reading:dagTitle:msg1') }}</span>
        <div style="position: absolute;right: 20px;top: 10px;">
          <svg-icon :icon-class="isClinicalDataFullscreen?'exit-fullscreen':'fullscreen'" style="cursor: pointer;font-size: 20px;" @click="isClinicalDataFullscreen=!isClinicalDataFullscreen" />
          <svg-icon v-if="closeCDVisible" icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;" @click="clinicalDataVisible = false" />
        </div>
      </span>
      <div style="height: 100%;margin:0;display: flex;flex-direction: column;">
        <clinical-data
          v-if="clinicalDataVisible"
          style="flex: 1"
          :trial-id="trialId"
          :subject-id="taskInfo.SubjectId"
          :visit-task-id="cdVisitTaskId"
          :is-reading-show-subject-info="taskInfo.IsReadingShowSubjectInfo"
        />
        <div v-if="!closeCDVisible" style="text-align:right">
          <el-button type="primary" @click="handleConfirmCD">{{ $t('trials:reading:button:confirm') }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import VisitReview from './components/VisitReview'
import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
export default {
  name:'Dicoms3d',
  components: { VisitReview,ClinicalData },
  data() {
    return {
      taskInfo: null,
      trialId: '',
      loading: false,
      clinicalDataVisible: false,
      isClinicalDataFullscreen: false,
      closeCDVisible: false,
      cdVisitTaskId: ''
    }
  },
  mounted() {
    this.trialId = this.$route.query.trialId
    this.getTaskInfo()
  },
  methods: {
    async getTaskInfo() {
      this.loading = true
      try {
        const params = {
          subjectId: this.$route.query.subjectId,
          trialId: this.$route.query.trialId,
          subjectCode: this.$route.query.subjectCode,
          visitTaskId: this.$route.query.visitTaskId,
          trialReadingCriterionId: this.$route.query.TrialReadingCriterionId
        }
        const res = await getNextTask(params)
        this.taskInfo = res.Result
        localStorage.setItem('taskInfo', JSON.stringify(res.Result))
        localStorage.setItem('digitPlaces', JSON.stringify(res.Result.DigitPlaces))
        this.loading = false
        this.$nextTick(() => {
          if (this.taskInfo.IsExistsClinicalData && this.taskInfo.IsNeedReadClinicalData && !this.taskInfo.IsReadClinicalData) {
            this.isClinicalDataFullscreen = false
            this.clinicalDataVisible = true
            this.cdVisitTaskId = this.taskInfo.VisitTaskId
          }
        })
      } catch (e) {
        console.log(e)
        this.loading = false
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.reading-viewer-container {
  width: 100%;
  height: 100%;
  // ::v-deep .dialog-container{
  //   margin-top: 50px !important;
  //   width:75%;
  //   height:80%;
  // }
  // ::v-deep .el-dialog__body{
  //     padding: 10px;
  //     height: calc(100% - 70px);
  //   }
  // .el-dialog__header{
  //   position: relative;
  // }
  // .full-dialog-container{
  //   ::v-deep .is-fullscreen .el-dialog__body{
  //     height: calc(100% - 70px);
  //   }
  // }
}
</style>