<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="当前序列" name="current-study">
                <div class="text-desc">
                  {{ studyCode }}
                </div>
                <div class="text-desc">
                  {{ description }}
                </div>
                <div v-if="seriesCount" class="text-desc">
                  {{ modality }} : {{ seriesCount }} Series
                </div>
                <div class="viewerSidethumbs ps" style="position: relative;">
                  <div class="viewerSidethumbinner">
                    <div
                      v-for="(item, index) in seriesList"

                      :key="index"
                      class="viewernavigatorwrapper"
                      :class="{'viewerSideActive': index==0}"
                      style="position: relative;"
                      series-type="current"
                      @click="showSeriesImage($event,index)"
                    >
                      <el-image
                        class="image-preview"
                        style="height:72px;width:72px;"
                        :src="item.previewImageUrl"
                        fit="fill"
                      />
                      <div class="viewernavitextwrapper">
                        <div style="padding: 1px;">
                          #{{ item.seriesNumber }}
                        </div>
                        <div v-show="item.instanceCount" style="padding: 1px;">
                          {{ item.modality }}: {{ item.instanceCount }} image
                        </div>
                        <div v-show=" item.sliceThickness" style="padding: 1px;">
                          T: {{ item.sliceThickness }}
                        </div>
                        <div v-show="item.description" style="width: 150px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                          {{ item.description }}
                        </div>
                        <div style="padding: 1px;">
                          {{ item.prefetchInstanceCount }}/{{ item.instanceCount }}
                        </div>

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

                    </div>
                  </div>
                </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 requestPoolManager from '@/utils/request-pool'
import store from '@/store'
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
cornerstoneWADOImageLoader.external.cornerstone = cornerstone
// cornerstoneWADOImageLoader.webWorkerManager.initialize({
//   webWorkerPath: './webWorker.js',
//   taskConfiguration: {
//     'decodeTask': {
//       codecsPath: './dicomCodecs.js'
//     }
//   }
// })
const maximumSizeInBytes = 1024 * 1024 * 1024 // 1 GB
export default {
  name: 'DicomsOfSeries',
  components: {
    'dicom-viewer': dicomViewer
  },
  data() {
    return {
      studyCode: '',
      modality: '',
      seriesCount: 0,
      description: '',
      seriesList: [],
      cachedImages: [],
      isStartLoad: false,
      firstInstanceId: ''
    }
  },
  created() {
    store.dispatch('user/setToken', this.$router.currentRoute.query.token)
    cornerstone.events.addEventListener('cornerstoneimageloaded', this.cornerstoneImageLoaded)
    this.initStudy()
  },
  beforeDestroy() {
    requestPoolManager.stopTaskTimer()
  },
  methods: {
    // 格式化序列信息
    initStudy() {
      this.studyCode = this.$router.currentRoute.query.studyCode
      this.modality = this.$router.currentRoute.query.modality
      this.seriesCount = 1
      this.description = this.$router.currentRoute.query.description
      if (this.$router.currentRoute.query.series) {
        const seriesInfo = JSON.parse(this.$router.currentRoute.query.series)
        var seriesList = []
        const imageIds = []
        // seriesInfo.InstanceList.forEach(function(item) {
        //   imageIds.push(`wadouri:/api/instance/content/${item}`)
        // })
        // seriesInfo.InstanceList.forEach((id) => {
        //   imageIds.push(`wadouri:http://123.56.94.154:7000/instance/content/${id}`)
        // })
        seriesInfo.InstancePathList.forEach((path) => {
          imageIds.push(`wadouri:${localStorage.getItem('location') !== 'USA' ? process.env.VUE_APP_DICOM_PATH : process.env.VUE_APP_DICOM_USA_PATH}${path}`)
        })
        seriesList.push({
          imageIds: imageIds,
          seriesId: seriesInfo.Id,
          seriesUid: seriesInfo.SeriesInstanceUid,
          seriesNumber: seriesInfo.SeriesNumber,
          sliceThickness: seriesInfo.SliceThickness,
          modality: seriesInfo.Modality,
          description: seriesInfo.Description,
          previewImageUrl: `/api/series/preview/${seriesInfo.Id}`,
          instanceCount: seriesInfo.InstanceCount,
          prefetchInstanceCount: 0,
          loadStatus: false,
          imageloadedArr: []
        })
        this.seriesList = seriesList
        if (this.seriesList.length > 0) {
          this.$nextTick(() => {
            this.$refs.dicomViewer.loadImageStack(this.seriesList[0])
          })
        }
      }
    },
    showSeriesImage(e, seriesIndex) {
      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.seriesList[seriesIndex])
    },
    loadAllImages() {
      this.seriesList.forEach(series => {
        series.imageIds.forEach(imageId => {
          this.load(imageId, series.seriesId)
        })
      })
    },
    // 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)
    //     })
    //   })
    // },
    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)
        })
      })
    },
    imageLoaded(imageId, seriesUid) {
      var seriesIndex = -1
      for (let i = 0; i < this.seriesList.length; ++i) {
        if (this.seriesList[i].seriesUid === seriesUid) {
          seriesIndex = i
          break
        }
      }
      if (seriesIndex < 0) return

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

        if (this.seriesList[seriesIndex].prefetchInstanceCount >= this.seriesList[seriesIndex].instanceCount) {
          this.seriesList[seriesIndex].prefetchInstanceCount = this.seriesList[seriesIndex].instanceCount
          // 设置当前序列状态为已下载完成
          this.seriesList[seriesIndex].loadStatus = true
        }
      }
    },
    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) {
        // 清理影像缓存
      }
    },
    // instance下载成功回调
    cornerstoneImageLoaded(e) {
      if (this.firstInstanceId === e.detail.image.imageId && !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 seriesIndex = -1
      for (let i = 0; i < this.seriesList.length; ++i) {
        if (this.seriesList[i].seriesUid === seriesUid) {
          seriesIndex = i
          break
        }
      }
      if (seriesIndex < 0) return

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

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

<style lang="scss">
.viewerContainer{
  display: block;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: #444;
  overflow: hidden;
  .el-tabs--border-card{
    background:none;
    border: none;
  }
  .el-tabs--border-card>.el-tabs__content{
    padding: 5px 0px 0px 0px;
  }
  .el-tabs__item{
    height: 35px;
    line-height: 35px;
  }
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .relationVisit{
    line-height: 20px;
    cursor: pointer;
  }
  .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;
  }
  .viewerContentWrapper {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 5px;
    /* height: 95%; */
    height: 99%;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }
  .viewerContentWrapper>div {
    display: inline-block;
    white-space: normal;
  }
  .viewerLeftSidePanel {
    width: 215px;
    background-color: #323232;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    margin-right: 2px;
    color: #D0D0D0;
    overflow-y: auto;
  }
  .viewerContentWrapper>div>.sidePanelBody {
    background: rgba(50,50,50,1);
    word-break: break-all;
    display: table;
    width: 100%;
    border: 1px solid #3e3f3a;
  }
  .viewerContentWrapper>div>div.sidePanelBody>div {
    width: 100%;
    height: 100%;
  }
  .text-desc{
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    // background: rgb(88 84 83);
    color: #d0d0d0;
    padding: 2px;
  }
  .ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
  }
  .viewerLeftSidePanel .viewernavigatorwrapper {
    display: flex;
    width: 210px;
    height: 84px;
    padding: 1px 2px 1px 8px;
    margin: 6px 0 6px 1px;
    border-radius: 2px;
    border: 1px solid #404040;
  }
  .viewernavigatorwrapper .el-progress__text{
    display: none;
  }
  .viewernavigatorwrapper .el-progress-bar{
    padding-right:0px;
  }
  .ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
  }
  .viewerLeftSidePanel .image-preview {
    border: 2px solid #252525;
    cursor: pointer;
  }
  .viewerLeftSidePanel .viewernavitextwrapper {
    /* width: 120px;
    height: 80px; */
    flex:1;
    padding: 3px 1px 3px 4px;
    vertical-align: top;
    font-size: 12px;
  }
  .viewerLeftSidePanel .viewerlabelwrapper {
    width: 20px;
    font-size: 12px;
  }
  .viewerSideActive {
    background: #16477b;
    background: #16477b80;
    border: 1px solid #23527b;
  }
  .viewerContent {
    flex: 1;
    height: 100%;
    display: block;
    background-color: black;
    color: #D0D0D0;
    font-size: 13px;
  }
}
</style>

