<template>
  <div ref="preview-wrapper" class="preview-wrapper">
    <div class="viewerContainer">
      <div class="viewerContentWrapper" style="padding-top:25px;">
        <div class="viewerLeftSidePanel">
          <div id="listWrapper" class="sidePanelBody">
            <div class="sidePanelThumbs">
              <!-- <div class="studyDesc" style="border-bottom:1px solid #9e9e9e;" @click="closeDialog()">
              <span style="font-size:14px;color:#d0d0d0;margin:5px 0px;line-height: 25px;">返回列表</span>
            </div> -->
              <div class="studyDesc">
                {{ studyTitle }}
              </div>
              <div class="studyDesc">
                {{ seriesCount }} Series
              </div>
              <div class="viewerSidethumbs ps" style="position: relative;">
                <div class="viewerSidethumbinner">
                  <div
                    v-for="(item, index) in seriesList"
                    :key="index"
                    :class="{'viewerSideActive': index==currentSeriesIndex}"
                    class="viewernavigatorwrapper"
                    @click="showSeriesImage(index)"
                  >
                    <dicomPreview
                      :image-id="item.previewImageId"
                      class="image-preview"
                      style="height:72px;width:72px;display: inline-block"
                    />
                    <!-- <span class="viewernavitextwrapper" title>
                    <span class="viewernavitexttxt">
                      <span>{{ item.seriesTitle }}</span>
                    </span>
                    <span class="viewernavitextnum">
                      {{ item.instanceCount }} image

                    </span>
                  </span>-->
                    <div class="viewernavitextwrapper">
                      <div style="padding: 1px 5px 1px 1px;display: flex;justify-content: space-between;">
                        <div style="padding: 1px;">#{{ item.seriesNumber }}</div>
                        <div v-if="item.isExistMutiFrames && item.instanceCount > 1">
                              <el-popover
                                v-model="item.isShowPopper"
                                placement="right-start"
                                trigger="manual"
                                popper-class="instance_frame_wrapper"
                              >
                                <div style="text-align: right;">
                                  <i class="el-icon-circle-close" style="font-size: 20px;cursor: pointer;color:#ddd;" @click="item.isShowPopper = false" />
                                </div>
                                <div class="frame_list">
                                  <div
                                    v-for="(instance, idx) in item.instanceInfoList"
                                    :key="instance.InstanceUid"
                                    class="frame_content"
                                    :style="{'margin-bottom':idx<item.instanceInfoList.length-1? '5px':'0px'}"
                                    @click="showMultiFrames(item, index, instance)"
                                  >
                                    <div>
                                      <div>{{ instance.InstanceNumber }}</div>
                                      <div>
                                        {{ `${instance.NumberOfFrames > 0 ? instance.NumberOfFrames : 1} frame` }}
                                      </div>
                                    </div>
                                  </div>
                                </div>
                                <i slot="reference" class="el-icon-connection" style="font-size: 15px;cursor: pointer;" @click="popperClick(seriesList, item)" />
                              </el-popover>
                            </div>
                      </div>
                      
                      <div style="padding: 1px;">{{ item.description }}</div>
                      <div
                        v-show="item.instanceCount"
                        style="padding: 1px;"
                      >{{ item.modality }} : {{ item.instanceCount }} image
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="viewerContent">
          <dicom-viewer id="dicomViewer" ref="dicomViewer" style="height:100%" />
        </div>
      </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 dicomStore from '@/utils/dicom-store'
import dicomViewer from '@/components/Dicom/DicomViewer'
import dicomPreview from '@/components/Dicom/DicomPreview'
import metaDataProvider from '@/utils/metaDataProvider'
cornerstone.metaData.addProvider(metaDataProvider, { priority: 10 });
var config = {
  maxWebWorkers: 4,
  startWebWorkersOnDemand: true,
  taskConfiguration: {
    decodeTask: {
      initializeCodecsOnStartup: false
    }
  }
}
cornerstoneWADOImageLoader.webWorkerManager.initialize(config)
cornerstoneWADOImageLoader.external.dicomParser = dicomParser
cornerstoneWADOImageLoader.external.cornerstone = cornerstone

export default {
  components: {
    dicomViewer,
    dicomPreview
  },
  props: {
    uid: {
      type: String,
      default: ''
    },
    studyList: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },

  data() {
    return {
      studyTitle: '',
      seriesCount: 0,
      seriesList: [],
      currentSeriesIndex: -1
    }
  },

  mounted() {
    var totalHeight = window.innerHeight || document.body.clientHeight
    var wrapper = this.$refs['preview-wrapper']
    wrapper.style.height = (totalHeight - 70) + 'px'
    if (!this.studyList || !this.uid) return
    this.loadStudy()
  },

  methods: {
    deepClone(obj) {
      if (typeof obj !== 'object' || obj === null) {
        return obj
      }
      const newObj = Array.isArray(obj) ? [] : {}
      for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
          newObj[key] = this.deepClone(obj[key])
        }
      }
      return newObj
    },
    loadStudy() {
      var studyList = this.studyList
      var studyUid = this.uid
      var studyItem = studyList.find(function(item) {
        return item.dicomInfo.studyUid === studyUid
      })
      if (!studyItem) return

      this.studyTitle = studyItem.dicomInfo.description
      this.seriesCount = studyItem.seriesList.length
      var scope = this

      studyItem.seriesList.forEach(function(series) {
        series.instanceList.sort(function(item1, item2) {
          return item1.instanceNumber - item2.instanceNumber
        })

        var imageIds = []
        let isExistMutiFrames = false
        let instanceInfoList = []
        series.instanceList.forEach(function(instance) {
          console.log(instance)
          let instanceInfo = {}
          var fileId = cornerstoneWADOImageLoader.wadouri.fileManager.add(
            instance.file
          )
          if (instance.frameCount > 1) {
            for (var i = 0; i < instance.frameCount; ++i) {
              imageIds.push(`${fileId}?frame=${i}`)
            }
            isExistMutiFrames = true
            instanceInfo.NumberOfFrames = instance.frameCount
            instanceInfo.InstanceNumber = instance.instanceNumber
            instanceInfo.InstanceUid = instance.instanceUid
            instanceInfo.FileId = fileId
          } else {
            imageIds.push(fileId)
            instanceInfo.NumberOfFrames = 0
            instanceInfo.InstanceNumber = instance.instanceNumber
            instanceInfo.InstanceUid = instance.instanceUid
            instanceInfo.FileId = fileId
          }
          instanceInfoList.push(instanceInfo)
        })

        scope.seriesList.push({
          seriesNumber: series.seriesNumber,
          description: series.description,
          modality: series.modality,
          instanceCount: series.instanceList.length,
          imageIds: imageIds,
          previewImageId: imageIds[0],
          isExistMutiFrames: isExistMutiFrames,
          instanceInfoList: instanceInfoList,
          isShowPopper: false
        })
      })

      this.showSeriesImage(0)
    },
    popperClick(seriesList, series) {
      for (let i = 0; i < seriesList.length; i++) {
        if (seriesList[i].isShowPopper) {
          seriesList[i].isShowPopper = false
        }
      }
      series.isShowPopper = !series.isShowPopper
    },
    showMultiFrames(series, seriesIndex, instanceInfo) {
      this.currentSeriesIndex = seriesIndex
      const imageIds = []
      if (instanceInfo.NumberOfFrames && instanceInfo.NumberOfFrames > 1) {
        for (let j = 0; j < instanceInfo.NumberOfFrames; j++) {
          imageIds.push(`${instanceInfo.FileId}?frame=${j}`)
        }
      } else {
        imageIds.push(instanceInfo.FileId)
      }
      const seriesInfo = {
        seriesNumber: series.seriesNumber,
        description: series.description,
        modality: series.modality,
        instanceCount: series.instanceCount,
        imageIds: imageIds,
        previewImageId: imageIds[0],
      }
      this.$refs.dicomViewer.loadImageStack(seriesInfo)
    },
    showSeriesImage(seriesIndex) {
      // if (seriesIndex === this.currentSeriesIndex) return;
      this.currentSeriesIndex = seriesIndex
      this.$refs.dicomViewer.loadImageStack(this.seriesList[seriesIndex])
    },
    closeDialog() {
      this.$emit('closeInnerDialog')
    }
  }
}
</script>

<style lang="scss">
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }

  .viewerContainer {
    width: 100%;
    display: block;
    height: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    background-color: #444;
    overflow: hidden;
  }

  .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: 99%;
    /* height: 95%; */
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
  }

  .viewerContentWrapper > div {
    display: inline-block;
    white-space: normal;
  }

  .viewerLeftSidePanel {
    width: 200px;
    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%;
  }

  .studyDesc {
    font-weight: bold;
    font-size: 13px;
    text-align: center;
    background: rgb(88 84 83);
    color: #d0d0d0;
    padding: 5px;
  }

  .ps {
    overflow: hidden !important;
    overflow-anchor: none;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
  }

  .viewerLeftSidePanel .viewernavigatorwrapper {
    display: flex;
    width: 196px;
    height: 84px;
    padding: 1px 2px 1px 8px;
    margin: 6px 0 6px 1px;
    border-radius: 2px;
    border: 1px solid #404040;
  }

  .ui-draggable-handle {
    -ms-touch-action: none;
    touch-action: none;
  }

  .viewerLeftSidePanel .image-preview {
    border: 2px solid #252525;
    cursor: pointer;
  }

  .viewerLeftSidePanel .viewernavitextwrapper {
    flex: 1;
    padding: 3px 1px 3px 4px;
    vertical-align: top;
    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;
  }
  .instance_frame_wrapper{
    min-width: 120px;
    background-color: #2c2c2c;
    border: 1px solid #2c2c2c;
    padding: 5px;
  }
  .frame_list{
    max-height: 500px;
    overflow-y: auto;
  }
  .instance_frame_wrapper ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  .instance_frame_wrapper  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .frame_content{
    /* height: 50px; */
    padding: 10px;
    display: flex;
    justify-content: flex-start;
    color: #ddd;
    font-size: 12px;
    border: 1px solid #404040;
  }
  .frame_content:hover {
    /* font-weight: bold; */
    /* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
    cursor: pointer;
    /* color: #428bca; */
    border-color: #213a54 !important;
    background-color: #213a54;
  }
</style>
