<template>
  <div ref="container" v-loading="loading" class="none-dicom-reading-container">
    <!-- 访视阅片 -->
    <div v-if="isShow && readingCategory && readingCategory=== 1" class="reading-wrapper">
      <el-tabs v-model="activeName" :before-leave="beforeLeave">
        <!-- 阅片 -->
        <el-tab-pane :label="$t('trials:reading:tabTitle:review')" name="read">
          <VisitReview
            :trial-id="trialId"
            :subject-id="subjectId"
            :subject-code="subjectCode"
            :visit-task-id="visitTaskId"
            :task-blind-name="taskBlindName"
            :reading-category="readingCategory"
            :readingTool="readingTool"
            :criterionType="criterionType"
            :isExistsClinicalData="isExistsClinicalData"
            :isReadingShowSubjectInfo="isReadingShowSubjectInfo"
            :is-reading-task-view-in-order="isReadingTaskViewInOrder"
            :iseCRFShowInDicomReading="iseCRFShowInDicomReading"
            @previewCD="previewCD"
          />
        </el-tab-pane>
        <!-- 报告 -->
        <el-tab-pane :label="$t('trials:reading:tabTitle:report')" name="report" v-if="!iseCRFShowInDicomReading">
          <Report 
            v-if="tabs.includes('report')"
            ref="reportPage"
            :trialId="trialId"
            :visit-task-id="visitTaskId"
            :subject-id="subjectId"
            :readingTool="readingTool"
            :criterionType="criterionType"
            :is-reading-task-view-in-order="isReadingTaskViewInOrder"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
    
    <!-- 全局阅片 -->
    <GlobalReview
      v-else-if="isShow && readingCategory && readingCategory === 2"
      :trial-id="trialId"
      :subject-id="subjectId"
      :visit-task-id="visitTaskId"
      :reading-category="readingCategory"
      :subject-code="subjectCode"
      :task-blind-name="taskBlindName"
      :is-reading-show-subject-info="isReadingShowSubjectInfo"
      :is-reading-show-previous-results="isReadingShowPreviousResults"
      :is-exists-clinical-data="isExistsClinicalData"
    />
    <!-- 裁判阅片 -->
    <AdReview
      v-else-if="isShow && readingCategory && readingCategory === 4"
      :trial-id="trialId"
      :subject-id="subjectId"
      :visit-task-id="visitTaskId"
      :reading-category="readingCategory"
      :subject-code="subjectCode"
      :task-blind-name="taskBlindName"
      :is-reading-show-subject-info="isReadingShowSubjectInfo"
      :is-reading-show-previous-results="isReadingShowPreviousResults"
      :is-exists-clinical-data="isExistsClinicalData"
    />

    <!-- 肿瘤学阅片 -->
    <OncologyReview
      v-else-if="isShow && readingCategory && readingCategory === 5"
      :trial-id="trialId"
      :subject-id="subjectId"
      :visit-task-id="visitTaskId"
      :reading-category="readingCategory"
      :subject-code="subjectCode"
      :task-blind-name="taskBlindName"
      :is-reading-show-subject-info="isReadingShowSubjectInfo"
      :is-reading-show-previous-results="isReadingShowPreviousResults"
      :is-exists-clinical-data="isExistsClinicalData"
    />

    <el-dialog
      :visible.sync="dialogVisible"
      :custom-class="isFullscreen?'full-dialog-container':'dialog-container'"
      :show-close="false"
      :close-on-click-modal="false"
      :fullscreen="isFullscreen"
    >
      <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="isFullscreen?'exit-fullscreen':'fullscreen'" style="cursor: pointer;font-size: 20px;" @click="isFullscreen=!isFullscreen" />
          <svg-icon v-if="closeCDVisible" icon-class="dClose" style="cursor: pointer;font-size: 25px;margin-left: 10px;" @click="dialogVisible = false" />
        </div>
      </span>
      <div style="height: 100%;margin:0;display: flex;flex-direction: column;">
        <ClinicalData
          v-if="dialogVisible"
          style="flex: 1"
          :trial-id="trialId"
          :subject-id="subjectId"
          :visit-task-id="cdVisitTaskId"
          :is-reading-show-subject-info="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 { getNextTask, readClinicalData } from '@/api/trials'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
import DicomEvent from '@/views/trials/trials-panel/reading/dicoms/components/DicomEvent'
import Report from './components/Report'
import VisitReview from './components/VisitReview'
import GlobalReview from '@/views/trials/trials-panel/reading/global-review'
import AdReview from '@/views/trials/trials-panel/reading/ad-review'
import ClinicalData from '@/views/trials/trials-panel/reading/clinical-data'
// import { getToken } from '@/utils/auth'
import OncologyReview from '@/views/trials/trials-panel/reading/oncology-review'
export default {
  name: 'NoneDicomReading',
  components: {
    VisitReview,
    Report,
    AdReview,
    GlobalReview,
    OncologyReview,
    ClinicalData
  },
  data() {
    return {
      loading: false,
      readingCategory: null,
      subjectId: '',
      visitTaskId: '',
      trialId: '',
      subjectCode: '',
      taskBlindName: '',
      isReadingShowSubjectInfo: false,
      isReadingShowPreviousResults: false,
      isReadingTaskViewInOrder: false,
      isExistsClinicalData: false,
      isNeedReadClinicalData: false,
      isReadClinicalData: false,
      iseCRFShowInDicomReading: false,
      criterionType: null,
      readingTool: null,
      isNewSubject: null,
      dialogVisible: false,
      closeCDVisible: false,
      cdVisitTaskId: '',
      isFullscreen: false,
      // dialogH: 0,
      isShow: false,
      activeName:'',
      tabs: []
    }
  },
  mounted() {
    DicomEvent.$on('getNextTask', () => {
      this.getTaskInfo()
    })
    this.trialId = this.$router.currentRoute.query.trialId
    this.subjectCode = this.$router.currentRoute.query.subjectCode
    this.subjectId = this.$router.currentRoute.query.subjectId
    this.visitTaskId = this.$router.currentRoute.query.visitTaskId
    this.isReadingShowSubjectInfo = this.$router.currentRoute.query.isReadingShowSubjectInfo
    this.isReadingShowPreviousResults = this.$router.currentRoute.query.isReadingShowPreviousResults
    this.isReadingTaskViewInOrder = JSON.parse(this.$router.currentRoute.query.isReadingTaskViewInOrder)
    this.criterionType = this.$router.currentRoute.query.criterionType
    this.readingTool = this.$router.currentRoute.query.readingTool
    this.isNewSubject = this.$router.currentRoute.query.isNewSubject
    if (this.isNewSubject && this.isReadingTaskViewInOrder) {
      const message = this.$t('trials:reading:noneDicom:message:startRead').replace('xxx', this.subjectCode)
      this.$message.success(message)
      changeURLStatic('isNewSubject', '')
    }
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.getTaskInfo()
    this.dialogH = this.$refs['container'].clientHeight - 250 + 'px'
    window.addEventListener('resize', () => { this.dialogH = this.$refs['container'].clientHeight - 250 + 'px' })
  },
  beforeDestroy() {
    DicomEvent.$off('getNextTask')
  },
  methods: {
    getTaskInfo() {
      this.loading = true
      var param = {
        subjectId: this.subjectId,
        trialId: this.trialId,
        subjectCode: this.subjectCode,
        visitTaskId: this.$router.currentRoute.query.visitTaskId,
        trialReadingCriterionId: this.$router.currentRoute.query.TrialReadingCriterionId
      }
      this.isShow = false
      getNextTask(param).then(res => {
        this.readingCategory = res.Result.ReadingCategory
        // if (this.subjectId !== res.Result.SubjectId && this.isReadingTaskViewInOrder) {
        //   store.dispatch('reading/resetVisitTasks')
        //   var token = getToken()
        //   window.location.href = `/noneDicomReading?trialId=${this.trialId}&subjectCode=${res.Result.SubjectCode}&subjectId=${res.Result.SubjectId}&isReadingShowPreviousResults=${this.isReadingShowPreviousResults}&isReadingShowSubjectInfo=${this.isReadingShowSubjectInfo}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&isNewSubject=1&isReadingTaskViewInOrder=${res.Result.IsReadingTaskViewInOrder}&TokenKey=${token}`
        // }
        if (res.Result.ReadingCategory === 1) {
          this.activeName = 'read'
          this.tabs = [this.activeName]
        }
        this.subjectId = res.Result.SubjectId
        this.visitTaskId = res.Result.VisitTaskId
        this.subjectCode = res.Result.SubjectCode
        this.taskBlindName = res.Result.TaskBlindName
        this.isExistsClinicalData = res.Result.IsExistsClinicalData
        this.isReadClinicalData = res.Result.IsReadClinicalData
        this.isNeedReadClinicalData = res.Result.IsNeedReadClinicalData
        this.iseCRFShowInDicomReading = res.Result.IseCRFShowInDicomReading
        this.isReadingTaskViewInOrder = res.Result.IsReadingTaskViewInOrder
        this.isReadingShowSubjectInfo = res.Result.IsReadingShowSubjectInfo
        this.isReadingShowPreviousResults = res.Result.IsReadingShowPreviousResults
        this.digitPlaces = res.Result.DigitPlaces
        localStorage.setItem('digitPlaces', 2)
        this.$nextTick(() => {
          if (this.isExistsClinicalData && this.isNeedReadClinicalData && !this.isReadClinicalData) {
            this.isFullscreen = false
            this.dialogVisible = true
            this.cdVisitTaskId = this.visitTaskId
          }
        })
        this.isShow = true
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    previewCD(taskId) {
      this.closeCDVisible = true
      this.isFullscreen = false
      this.dialogVisible = true
      this.cdVisitTaskId = taskId
      this.dialogVisible = true
    },
    async handleConfirmCD() {
      this.loading = true
      var visitTaskId = this.visitTaskId
      try {
        await readClinicalData({ visitTaskId })
        this.loading = false
        this.dialogVisible = false
        this.isReadClinicalData = true
      } catch (e) {
        this.loading = false
      }
    },
    beforeLeave(activeName, oldActiveName) {
      if (!this.tabs.includes(activeName)) {
        this.tabs.push(activeName)
      }
      if (oldActiveName === 'read') {
        this.$nextTick(() => {
          if (this.$refs.reportPage) {
            // DicomEvent.$emit('getReportInfo', true)
            this.$refs.reportPage.setScrollTop(1)
          }
        })
      }
      return Promise.resolve(true)
    },
  }
}
</script>

<style lang="scss" scoped>
.none-dicom-reading-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .el-dialog{
    margin-top: 0px !important;
    ::v-deep .el-dialog__wrapper{
      margin-top: 0px !important;
    }
    ::v-deep .el-dialog__body{
      padding: 10px;
    }
  }
  .reading-wrapper{
    width: 100%;
    height: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    ::v-deep .el-tabs{
      box-sizing: border-box;
      height: 100%;
      display: flex;
      flex-direction: column;
      .el-tabs__item{
        // color: #fff;
      }
      .el-tabs__header{
        height: 50px;
        margin:0px;
        box-sizing: border-box;
      }
      .el-tabs__content{
        flex: 1;
        margin:0px;
        box-sizing: border-box;
      }
      .el-tabs__item{
        // color: #fff;
      }
      .el-tab-pane{
        height: 100%;
      }

    }
  }
  ::v-deep .dialog-container{
    margin-top: 50px !important;
    width:75%;
    height:80%;
  }
  ::v-deep .el-dialog__body{
      padding: 20px 20px 0 20px;
      height: calc(100% - 70px);
    }
  .el-dialog__header{
    position: relative;
  }
}

.full-dialog-container{
  ::v-deep .is-fullscreen .el-dialog__body{
    height: calc(100% - 70px);
  }
}
 
</style>
