<template>
  <div class="viewerContainer">
    <div class="viewerContentWrapper">
      <div class="viewerLeftSidePanel">
        <div id="listWrapper" class="sidePanelBody">
          <div class="sidePanelThumbs">
            <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
              <el-tab-pane :label="$t('trials:dicom-show:currentVisit')" name="current-study">
                <div class="text-desc" style="background:rgb(55 55 55);">
                  {{ visitInfo }}
                </div>
                <div class="viewerSidethumbs ps" style="position: relative;">
                  <div class="viewerSidethumbinner">
                    <!-- <div
                      v-for="(study, index) in studyList"
                      :key="index"
                    >  -->
                    <el-collapse v-model="activeNames">
                      <el-collapse-item v-for="(study, index) in studyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
                        <template slot="title">

                          <div class="text-desc">
                            {{ study.StudyCode }}
                          </div>
                          <!-- <div v-show="study.Description" class="text-desc">
                            {{ study.Description }}
                          </div> -->
                          <el-tooltip v-show="study.Description" class="item" effect="dark" :content="study.Description" placement="bottom">
                            <div v-show="study.Description" style="width: 50px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                              {{ study.Description }}
                            </div>
                          </el-tooltip>
                          <div v-show="study.SeriesCount" class="text-desc">
                            {{ study.Modalities }} : {{ study.SeriesCount }} Series
                          </div>
                        </template>
                        <div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
                          {{ study.Description }}
                        </div>
                        <div
                          v-for="(series, i) in study.SeriesList"
                          :key="i"
                          :class="{'viewerSideActive': i==0 && index === 0}"
                          style="position: relative;margin-bottom:5px;border-radius: 2px;border: 1px solid #404040;"
                          series-type="current"
                          @click="showSeriesImage($event,index,i,series)"
                        >
                          <div class="viewernavigatorwrapper">
                            <!-- <el-image
                            class="image-preview"
                            style="height:72px;width:72px;"
                            :src="series.previewImageUrl"
                            fit="fill"
                          /> -->

                            <img
                              class="image-preview"
                              :src="series.previewImageUrl"
                              crossorigin="anonymous"
                              alt=""
                              style="width: 85px;height:85px;"
                              fit="fill"
                            >
                            <div class="viewernavitextwrapper">
                              <div style="padding: 1px;">
                                #{{ series.seriesNumber }}
                              </div>
                              <div v-show="series.InstanceCount" style="padding: 1px;">
                                {{ series.modality }}: {{ series.instanceCount }} image
                              </div>
                              <div v-show=" series.sliceThickness" style="padding: 1px;">
                                T: {{ series.sliceThickness }}
                              </div>

                              <el-tooltip v-show="series.description" class="item" effect="dark" :content="series.description" placement="bottom">
                                <div v-show="series.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                                  {{ series.description }}
                                </div>
                              </el-tooltip>
                              <div style="padding: 1px;">
                                {{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
                              </div>

                            </div>
                          </div>
                          <div v-if="showDelete" @click.stop="" style="display: flex;flex-direction: row;justify-content: space-between;">

                            <div>
                              <span style="font-size: 12px;">{{ $t('trials:audit:table:isReading') }}</span>
                              <el-switch
                                v-model="series.isReading"
                                size="mini"
                                @change="changeReadingStatus($event, series)"
                              />
                            </div>
                            <div>
                              <span style="font-size: 12px;">{{ $t('trials:audit:table:isDelete') }}</span>
                              <el-switch
                                v-model="series.isDeleted"
                                size="mini"
                                @change="changeDeleteStatus($event, series)"
                              />
                            </div>
                          </div>
                          <!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
                          <el-progress v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount" :percentage="Number(series.prefetchInstanceCount/series.instanceCount)*100" />
                        </div> -->
                          <div v-if="series.prefetchInstanceCount>0 && series.prefetchInstanceCount<series.instanceCount">
                            <el-progress :percentage="parseInt(((series.prefetchInstanceCount/series.instanceCount)*100).toFixed(2))" />
                          </div>

                        </div>
                      </el-collapse-item>

                    </el-collapse>

                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane :label="$t('trials:dicom-show:relatedVisit')" name="relation-study" class="pane-relation-wrapper">
                <div class="viewerSidethumbinner">
                  <el-collapse v-model="relationActiveName" @change="handelRelationActiveChange">
                    <el-collapse-item v-for="(study) in relationStudyList" :key="`${study.StudyId}`" :name="`${study.StudyId}`">
                      <template slot="title">

                        <div class="text-desc">
                          {{ study.StudyCode }}
                        </div>
                        <!-- <div v-show="study.Description" class="text-desc">
                          {{ study.Description }}
                        </div> -->

                        <div v-show="study.SeriesCount" class="text-desc">
                          {{ study.Modalities }} : {{ study.SeriesCount }} Series
                        </div>
                      </template>
                      <div v-show="study.Description" class="text-desc" style="background-color: #1f1f1f;">
                        {{ study.Description }}
                      </div>
                      <div v-if="study.seriesList" class="viewerSidethumbs ps" style="position: relative;">
                        <div class="viewerSidethumbinner">
                          <div
                            v-for="(seriesItem, index) in study.seriesList"
                            :key="index"
                            class="viewernavigatorwrapper"
                            style="position: relative;border:1px solid #434343;"
                            series-type="relation"
                            @click="showRelationSeriesImage($event,seriesItem,index)"
                          >
                            <!-- <el-image
                            class="image-preview"
                            style="height:72px;width:72px;"
                            :src="seriesItem.previewImageUrl"
                            fit="fill"
                          /> -->
                            <img
                              class="image-preview"
                              :src="seriesItem.previewImageUrl"
                              crossorigin="anonymous"
                              alt=""
                              style="width: 85px;height:85px;"
                              fit="fill"
                            >

                            <div class="viewernavitextwrapper">
                              <div v-if="seriesItem.keySeries" style="padding: 1px;color:red">
                                Key Images
                              </div>
                              <div v-else style="padding: 1px;">
                                #{{ seriesItem.seriesNumber }}
                              </div>
                              <div v-show=" seriesItem.instanceCount" style="padding: 1px;">
                                {{ seriesItem.modality }}: {{ seriesItem.instanceCount }} image
                              </div>
                              <div v-show="seriesItem.sliceThickness" style="padding: 1px;">
                                T: {{ seriesItem.sliceThickness }}
                              </div>
                              <el-tooltip v-show="seriesItem.description" class="item" effect="dark" :content="seriesItem.description" placement="bottom">
                                <div v-show="seriesItem.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                                  {{ seriesItem.description }}
                                </div>
                              </el-tooltip>

                            </div>
                          <!-- <div style="position: absolute;bottom: -10px;left: 0;width: 100%;">
                            <el-progress v-if="seriesItem.prefetchInstanceCount>0 && seriesItem.prefetchInstanceCount<seriesItem.instanceCount" :percentage="Number(seriesItem.prefetchInstanceCount/seriesItem.instanceCount)*100" />
                          </div> -->
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>

                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <div class="viewerContent">
        <dicom-viewer id="dicomViewer" ref="dicomViewer" style="height:100%" />
      </div>
    </div>
  </div>
</template>

<script>
import * as dicomParser from 'dicom-parser'
import * as cornerstone from 'cornerstone-core'
import * as cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader'
import dicomViewer from '@/components/Dicom/DicomViewer'
import { getVisitStudyList, getAllRelationStudyList, getSeriesList } from '@/api/reading'
import { setSeriesStatus } from '@/api/trials'
import requestPoolManager from '@/utils/request-pool'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
export default {
  name: 'DicomsOfVisit',
  components: {
    'dicom-viewer': dicomViewer
  },
  data() {
    return {
      studyList: [],
      visitInfo: '',
      activeName: 'current-study',
      relationStudyList: [],
      cachedImages: [],
      isReading: null,
      isStartLoad: false,
      firstInstanceId: '',
      firstSeriesId: '',
      showDelete: 0,
      imageList: [],
      activeNames: [],
      relationActiveName: [],
      showSeriesList: []
    }
  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }

    this.trialId = this.$router.currentRoute.query.trialId
    this.subjectVisitId = this.$router.currentRoute.query.subjectVisitId
    this.visitInfo = this.$router.currentRoute.query.visitInfo
    this.isReading = this.$router.currentRoute.query.isReading ? this.$router.currentRoute.query.isReading * 1 : 0
    this.showDelete = parseInt(this.$router.currentRoute.query.showDelete)
    // cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
    this.getStudiesInfo()
  },
  beforeDestroy() {
    requestPoolManager.stopTaskTimer()
  },
  methods: {
    // 获取某个访视下所有的检查信息
    getStudiesInfo() {
      this.studyList = []
      getVisitStudyList(this.trialId, this.subjectVisitId, this.isReading).then(res => {
        res.Result.forEach((study) => {
          const data = {}
          data.StudyId = study.StudyId
          data.StudyCode = study.StudyCode
          data.Modalities = study.Modalities
          data.SeriesCount = study.SeriesCount
          data.InstanceCount = study.InstanceCount
          data.InstanceCount = study.InstanceCount
          data.PreviewImageCount = 0
          var seriesList = []
          study.SeriesList.forEach((series) => {
            const imageIds = []

            // series.InstanceList.forEach((id) => {
            //   imageIds.push(`wadouri:/api/instance/content/${id}`)
            // })
            // series.InstanceList.forEach((id) => {
            //   imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
            // })
            series.InstancePathList.forEach((path) => {
              imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? this.OSSclientConfig.basePath : this.OSSclientConfig.basePath}${path}`)
            })
            seriesList.push({
              trialId: this.trialId,
              subjectVisitId: this.subjectVisitId,
              studyId: study.StudyId,
              imageIds: imageIds,
              seriesId: series.Id,
              seriesUid: series.SeriesInstanceUid,
              seriesNumber: series.SeriesNumber,
              sliceThickness: series.SliceThickness,
              modality: series.Modality,
              description: series.Description,
              isReading: series.IsReading,
              isDeleted: series.IsDeleted,
              previewImageUrl: series.ImageResizePath ? this.OSSclientConfig.basePath + series.ImageResizePath : `/api/series/preview/${series.Id}`,
              instanceCount: series.InstanceCount,
              prefetchInstanceCount: 0,
              loadStatus: false,
              imageloadedArr: []
            })
          })
          data.SeriesList = seriesList
          this.studyList.push(data)
        })
        if (this.studyList.length > 0) {
          this.$refs.dicomViewer.loadImageStack(this.studyList[0].SeriesList[0])
          const imageId = this.studyList[0].SeriesList[0].imageIds[0]
          let instanceId = imageId.split('/')[imageId.split('/').length - 1]
          instanceId = instanceId.split('.')[0]
          this.firstInstanceId = instanceId
          this.activeNames = [this.studyList[0].StudyId]
          this.loadAllImages()
        }
      })
    },
    showSeriesImage(e, studyIndex, seriesIndex, series) {
      const element = e.currentTarget
      const elements = document.querySelectorAll('[series-type]')
      Array.from(elements).forEach((e) => {
        e.classList.remove('viewerSideActive')
      })
      element.classList.add('viewerSideActive')
      this.currentSeriesIndex = seriesIndex
      this.$refs.dicomViewer.loadImageStack(this.studyList[studyIndex].SeriesList[seriesIndex])
      if (!series.loadStatus) {
        requestPoolManager.changePriority(series.seriesId)
        // var isAddToTakPool = false
        // if (this.showSeriesList.includes(`${studyIndex}_${seriesIndex}`)) {
        //   isAddToTakPool = true
        // } else {
        //   this.showSeriesList.push(`${studyIndex}_${seriesIndex}`)
        // }
        // if (!isAddToTakPool) {
        //   var priority = parseInt(new Date().getTime())
        //   series.isLoading = true
        //   series.imageIds.map((imageId, i) => {
        //     this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
        //   })
        // } else {
        //   requestPoolManager.changePriority(series.seriesId)
        // }
      }
    },
    changeReadingStatus(callback, data) {
      let statusStr = ''
      if (callback) {
        statusStr = this.$t('trials:audit:label:setSeriesReading')
        data.isReading = false
      } else {
        statusStr = this.$t('trials:audit:label:setSeriesNotReading')
        data.isReading = true
      }
      var message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
      message = message.replace('yyy', this.$fd('YesOrNo', !data.isReading))
      this.$confirm(message, {
        distinguishCancelAndClose: true,
        type: 'warning'
      }).then(() => {
        const state = data.isReading ? 1 : 2
        this.loading = true

        setSeriesStatus(data.trialId, data.subjectVisitId, data.studyId, data.seriesId, state).then(res => {
          this.loading = false
          if (res.IsSuccess) {
            data.isReading = !data.isReading
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            window.opener.postMessage({ type: 'refreshSeriesList', data: '' }, window.location)
          }
        }).catch(() => { this.loading = false })
      }).catch(() => {})
    },
    changeDeleteStatus(callback, data) {
      let statusStr = ''
      if (callback) {
        statusStr = this.$t('trials:audit:label:setSeriesDeleted')
        data.isDeleted = false
      } else {
        statusStr = this.$t('trials:audit:label:setSeriesNotDelete')
        data.isDeleted = true
      }
      var message = this.$t('trials:audit:message:changeSeriesStatus').replace('xxx', statusStr)
      message = message.replace('yyy', this.$fd('YesOrNo', !data.isDeleted))
      this.$confirm(message, {
        distinguishCancelAndClose: true,
        type: 'warning'
      }).then(() => {
        const state = data.isDeleted ? 5 : 4
        this.loading = true
        setSeriesStatus(data.trialId, data.subjectVisitId, data.studyId, data.seriesId, state).then(res => {
          this.loading = false
          if (res.IsSuccess) {
            data.isDeleted = !data.isDeleted
            this.$message.success(this.$t('common:message:savedSuccessfully'))
            window.opener.postMessage({ type: 'refreshSeriesList', data: '' }, window.location)
          }
        }).catch(() => { this.loading = false })
      }).catch(() => {})
    },
    // 切换关联检查Tab时获取关联检查信息
    handleTabClick(tab, event) {
      if (tab.name === 'relation-study' && this.relationStudyList.length <= 0) {
        const loading = this.$loading({
          target: document.querySelector('.pane-relation-wrapper'),
          fullscreen: false,
          lock: true,
          text: 'Loading',
          background: 'rgb(49 49 49 / 50%)',
          spinner: 'el-icon-loading'
        })
        getAllRelationStudyList(this.subjectVisitId).then(res => {
          loading.close()
          this.relationStudyList = res.Result
          console.log(this.relationStudyList)
        }).catch(() => { loading.close() })
      }
    },
    handelRelationActiveChange(v) {
      var selectedId = v.length > 0 ? v[v.length - 1] : ''
      if (!selectedId) return
      var sIdx = this.relationStudyList.findIndex(study => study.StudyId === selectedId)
      if (sIdx > -1) {
        this.getRelationSeriesByStudy(selectedId, sIdx)
      }
    },
    // 根据关联检查获取序列信息
    getRelationSeriesByStudy(studyId, index) {
      console.log('getRelationSeriesByStudy')
      if (this.relationStudyList[index].seriesCount) {
        this.relationStudyList[index].showSeries = !this.relationStudyList[index].showSeries
        this.$forceUpdate()
      } else {
        const scope = this
        const loading = this.$loading({
          target: document.querySelector(`.relation-study-wrapper-${index}`),
          fullscreen: false,
          lock: true,
          text: 'Loading',
          background: 'rgb(49 49 49 / 50%)',
          spinner: 'el-icon-loading'
        })
        getSeriesList(`/series/list/${studyId}`).then(data => {
          loading.close()
          if (data.Result != null && data.Result.length > 0) {
            var seriesList = []
            const res = data.Result
            res.forEach(function(item) {
              const imageIds = []
              // item.InstanceList.forEach(function(id) {
              //   imageIds.push(`wadouri:/api/instance/content/${id}`)
              // })
              // item.InstanceList.forEach((id) => {
              //   imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
              // })
              item.InstancePathList.forEach((path) => {
                imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? scope.OSSclientConfig.basePath : scope.OSSclientConfig.basePath}${path}`)
              })
              seriesList.push({
                imageIds: imageIds,
                seriesId: item.Id,
                seriesUid: item.SeriesInstanceUid,
                seriesNumber: item.SeriesNumber,
                sliceThickness: item.SliceThickness,
                modality: item.Modality,
                description: item.Description,
                previewImageUrl: item.ImageResizePath ? scope.OSSclientConfig.basePath + item.ImageResizePath : `/api/series/preview/${item.Id}`,
                instanceCount: item.InstanceCount,
                prefetchInstanceCount: 0,
                hasLabel: item.HasLabel,
                keySeries: item.KeySeries,
                loadStatus: false,
                imageloadedArr: []
              })
            })
            scope.relationStudyList[index].seriesCount = seriesList.length
            scope.relationStudyList[index].seriesList = seriesList
            scope.relationStudyList[index].showSeries = true
            console.log(scope.relationStudyList)
            scope.$forceUpdate()
          }
        }).catch(() => { loading.close() })
      }
    },
    showRelationSeriesImage(e, series, index) {
      this.currentRelationIndex = index
      const element = e.currentTarget
      const elements = document.querySelectorAll('[series-type]')
      Array.from(elements).forEach((e) => {
        e.classList.remove('viewerSideActive')
      })
      element.classList.add('viewerSideActive')
      this.$refs.dicomViewer.loadImageStack(series)
      if (!series.loadStatus) {
        var priority = parseInt(new Date().getTime())
        series.imageIds.map(imageId => {
          this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
        })
      }
    },
    loadAllImages() {
      var priority = parseInt(new Date().getTime())
      this.studyList.map((study, studyIndex) => {
        study.SeriesList.map((series, seriesIndex) => {
          series.imageIds.map(imageId => {
            var p = null
            if (this.firstInstanceId === imageId) {
              p = priority * 100
            } else {
              p = priority - 1
            }
            this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex, seriesIndex, priority: p })
          })
          // if (!series.loadStatus && series.seriesId !== this.firstSeriesId) {
          //   series.imageIds.map(imageId => {
          //     // imageIds.push({ imageId: image, seriesId: series.seriesId, priority })
          //     this.imageList.push({ imageId: imageId, seriesId: series.seriesId, studyIndex, seriesIndex, priority })
          //   })
          // }
        })
      })
      if (this.imageList.length > 0) {
        this.loopLoad()
      }
      // requestPoolManager.setPendingList(imageIds)
    },
    loopLoad() {
      if (this.imageList.length > 0) {
        requestPoolManager.startTaskTimer()
        this.imageList.map(image => {
          requestPoolManager.loadAndCacheImagePlus(image.imageId, image.seriesId, image.priority).then(res => {
            this.imageLoaded(image, res.data.string('x0020000e'))
          })
        })
        requestPoolManager.sortTaskPool()
        this.imageList = []
      }
    },
    load(imageId, seriesId, priority = 999) {
      return new Promise((resolve, reject) => {
        requestPoolManager.loadAndCacheImagePlus(imageId, seriesId, priority).then(res => {
          if (!res) return
          this.imageLoaded(imageId, res.data.string('x0020000e'))
          resolve(res)
        }).catch(e => {
          reject(e)
        })
      })
    },
    // load(imageId, priority = 999) {
    //   return new Promise((resolve, reject) => {
    //     const imageTask = this.buildImageRequestTask(imageId, { priority })
    //     requestPoolManager.addTaskIntoPool(imageTask).then((res) => {
    //       resolve(res)
    //     }).catch(e => {
    //       reject(e)
    //       console.log(e)
    //     })
    //   })
    // },
    buildImageRequestTask(imageId, config = {}) {
      return {
        key: imageId,
        ...config,
        execute: () => {
          return cornerstone.loadAndCacheImage(imageId)
        }
      }
    },
    datasetsCacheChanged(e) {
      const cacheInfo = e.detail.cacheInfo
      const cacheSizeInBytes = cacheInfo.cacheSizeInBytes
      if (cacheSizeInBytes >= maximumSizeInBytes) {
        // 清理缓存的影像
      }
    },
    imageLoaded(image, seriesUid) {
      var studyIndex = image.studyIndex
      var seriesIndex = image.seriesIndex
      if (seriesIndex < 0 || studyIndex < 0) return
      if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(image.imageId) < 0) {
        ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
        this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(image.imageId)

        if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
          // 设置当前序列状态为已下载完成
          this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
        }
      }
    },
    // instance下载成功回调
    cornerstoneImageLoaded(e) {
      if (e.detail.image.imageId.includes(this.firstInstanceId) && !this.isStartLoad) {
        // 初始化图像加载完成时，自动下载
        this.loadAllImages()
        this.isStartLoad = true
        // requestPoolManager.executeTask()
      }
      const uri = e.detail.image.sharedCacheKey
      const index = this.cachedImages.findIndex(item => item.uri === uri)
      if (index === -1) {
        this.cachedImages.push({ uri: uri, timestamp: new Date().getTime() })
      } else {
        this.cachedImages[index].timestamp = new Date().getTime()
      }
      var imageId = e.detail.image.imageId
      var seriesUid = e.detail.image.data.string('x0020000e')
      var studyIndex = -1
      var seriesIndex = -1
      for (let i = 0; i < this.studyList.length; ++i) {
        for (let j = 0; j < this.studyList[i].SeriesList.length; ++j) {
          if (this.studyList[i].SeriesList[j].seriesUid === seriesUid) {
            studyIndex = i
            seriesIndex = j
            break
          }
        }
        if (studyIndex > 0) break
      }
      if (seriesIndex < 0) return

      const imageIdIndex = this.studyList[studyIndex].SeriesList[seriesIndex].imageIds.indexOf(imageId)
      if (imageIdIndex < 0) return
      if (this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.indexOf(imageId) < 0) {
        ++this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount
        this.studyList[studyIndex].SeriesList[seriesIndex].imageloadedArr.push(imageId)

        if (this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount >= this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount) {
          this.studyList[studyIndex].SeriesList[seriesIndex].prefetchInstanceCount = this.studyList[studyIndex].SeriesList[seriesIndex].instanceCount
          // 设置当前序列状态为已下载完成
          this.studyList[studyIndex].SeriesList[seriesIndex].loadStatus = true
        }
      }
    }
  }
}
</script>

<style >
.viewerContainer .el-tabs--border-card{
  background:none;
  border: none;
}
.viewerContainer .el-tabs__item{
  height: 35px;
  line-height: 35px;
  width: 100px;
  padding: 0!important;
  text-align: center;
  transform: scale(.8);
}
.viewerContainer .el-tabs--border-card>.el-tabs__content{
  padding: 5px 0px 0px 0px;
}
.viewerContainer ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}
.viewerContainer ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
}
.viewerContainer .relationVisit{
  line-height: 20px;
  cursor: pointer;
}
  .viewerContainer{
    display: block;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #444;
    overflow: hidden;
  }
.viewerContainer  .viewerBanner {
    background: linear-gradient(0,#444,#222);
    min-height: 28px;
    font-size: 16px;
    margin: 0;
    height: 30px;
    padding-top: 0;
    padding-left: 5px;
    padding-right: 5px;
    font-weight: bold;
}
.viewerContainer .viewerContentWrapper {
  display: flex;
  flex-direction: row;
    width: 100%;
    padding: 5px;
    /* height: 95%; */
    height: 99%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}
.viewerContainer .viewerContentWrapper>div {
    display: inline-block;
    white-space: normal;
}
.viewerContainer .viewerLeftSidePanel {
    width: 215px;
    background-color: #323232;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    margin-right: 2px;
    color: #D0D0D0;
    overflow-y: auto;
}
.viewerContainer .viewerContentWrapper>div>.sidePanelBody {
    background: rgba(50,50,50,1);
    word-break: break-all;
    display: table;
    width: 100%;
    border: 1px solid #3e3f3a;
}
.viewerContainer .viewerContentWrapper>div>div.sidePanelBody>div {
    width: 100%;
    height: 100%;
}
.viewerContainer .text-desc{
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  background: #585453;
  color: #d0d0d0;
  padding: 2px;
}
.viewerContainer .ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}
.viewerContainer .viewerLeftSidePanel .viewernavigatorwrapper {
    display: flex;
    width: 200px;
    /* height: 84px; */
    padding: 1px 2px 1px 2px;
    margin: 2px 0 1px 1px;
    /* border-radius: 2px;
    border: 1px solid #404040; */

}
.viewerContainer .viewernavigatorwrapper .el-progress__text{
  display: none;
}
.viewerContainer .viewernavigatorwrapper .el-progress-bar{
  padding-right:0px;
}
.viewerContainer .ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
}
.viewerContainer .viewerLeftSidePanel .image-preview {
    border: 2px solid #252525;
    cursor: pointer;
}
.viewerContainer .viewerLeftSidePanel .viewernavitextwrapper {
    /* width: 120px;
    height: 80px; */
    flex:1;
    padding: 3px 1px 3px 4px;
    vertical-align: top;
    font-size: 12px;
}
.viewerContainer .viewerLeftSidePanel .viewerlabelwrapper {
    width: 20px;

    font-size: 12px;
}
.viewerContainer .viewerSideActive {
    background: #16477b;
    background: #16477b80;
    border: 1px solid #23527b;
}
.viewerContainer .viewerContent {
    flex: 1;
    height: 100%;
    display: block;
    background-color: black;
    color: #D0D0D0;
    font-size: 13px;
}
.viewerContainer .pane-relation-wrapper{
  min-height: 500px;
}
.viewerContainer .el-collapse{
  border: none;
}

.viewerContainer  .el-collapse-item{
  background-color: #585453!important;
  color: #ddd;

}
.viewerContainer .el-collapse-item__content{
  padding-bottom:5px;
  background-color: #2c2c2c!important;
  color: #ddd;
}
.viewerContainer .el-collapse-item__header{
  background-color: #585453!important;
  color: #ddd;
  border-bottom-color:#5a5a5a;
  padding-left: 5px;
  height: 40px;
  line-height: 20px;
}

/* .viewerRightSidePanel {
    width: 300px;
    height: 100%;
    background-color: #323232;
    margin: 0;
    padding: 0;
    margin-left: 2px;
    border: 1px solid blueviolet;
    color: #D0D0D0;
    font-size: 13px;
} */
</style>

