<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">
                  {{ visitInfo }}
                </div>
                <div class="viewerSidethumbs ps" style="position: relative;">
                  <div class="viewerSidethumbinner">
                    <div
                      v-for="(study, index) in studyList"
                      :key="index"
                    >
                      <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>
                      <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"
                          />
                          <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>
                            <div v-show="series.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                              {{ series.description }}
                            </div>
                            <div style="padding: 1px;">
                              {{ series.prefetchInstanceCount }}/{{ series.instanceCount }}
                            </div>

                          </div>
                        </div>
                        <div v-if="showDelete" @click.stop="">

                          <span style="font-size: 12px;">{{ $t('trials:audit:table:isReading') }}</span>
                          <el-switch
                            v-model="series.isReading"
                            size="mini"
                            @change="changeReadingStatus($event, series)"
                          />

                          <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 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>
                    </div>

                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="关联检查" name="relation-study" class="pane-relation-wrapper">
                <div>
                  <div v-for="(study, keyIndex) in relationStudyList" :key="keyIndex" style="margin-bottom: 5px;">
                    <div :class="['text-desc', 'relationVisit', `relation-study-wrapper-${keyIndex}`]" @click="getRelationSeriesByStudy(study.StudyId,keyIndex)">
                      <span v-show="study.VisitName">{{ study.VisitName }} </span>
                      <span v-show="study.StudyCode"> : {{ study.StudyCode }}</span>

                      <div v-show="study.Modalities">
                        {{ study.Modalities }} : {{ study.SeriesCount }} Series
                      </div>
                      <div v-show="study.Description">
                        {{ study.Description }}
                      </div>
                    </div>

                    <div v-if="study.seriesList && study.showSeries" class="viewerSidethumbs ps" style="position: relative;">
                      <div class="viewerSidethumbinner">
                        <div
                          v-for="(seriesItem, index) in study.seriesList"
                          :key="index"
                          class="viewernavigatorwrapper"
                          style="position: relative;"
                          series-type="relation"
                          @click="showRelationSeriesImage($event,seriesItem,index)"
                        >
                          <el-image
                            class="image-preview"
                            style="height:72px;width:72px;"
                            :src="seriesItem.previewImageUrl"
                            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>
                            <div v-show="seriesItem.description" style="width: 120px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;padding: 1x;">
                              {{ seriesItem.description }}
                            </div>
                          </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>
                  </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 { getVisitStudyList, getAllRelationStudyList, getStudyInfo, 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: []
    }
  },
  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' ? process.env.VUE_APP_DICOM_PATH : process.env.VUE_APP_DICOM_USA_PATH}${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: `/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
        }
      })
    },
    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) {
        series.isLoading = true
        var p = parseInt(new Date().getTime())
        series.imageIds.map((imageId, i) => {
          var priority = ''
          if (i === 0) {
            priority = parseInt(new Date().getTime()) * 10
          } else {
            priority = p - 1
          }
          this.imageList.push({ imageId: imageId, seriesId: series.seriesId, priority })
          // this.load(imageId, series.seriesId, priority)
        })
      }
    },
    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)
      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)
      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
        }).catch(() => { loading.close() })
      }
    },
    // 根据关联检查获取序列信息
    getRelationSeriesByStudy(studyId, index) {
      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'
        })
        getStudyInfo(studyId).then(data => {
          scope.relationStudyList[index].studyCode = data.Result.StudyCode
          scope.relationStudyList[index].modality = data.Result.Modalities
          scope.relationStudyList[index].seriesCount = data.Result.SeriesCount
          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' ? process.env.VUE_APP_DICOM_PATH : process.env.VUE_APP_DICOM_USA_PATH}${path}`)
                })
                seriesList.push({
                  imageIds: imageIds,
                  seriesId: item.Id,
                  seriesUid: item.SeriesInstanceUid,
                  seriesNumber: item.SeriesNumber,
                  sliceThickness: item.SliceThickness,
                  modality: item.Modality,
                  description: item.Description,
                  previewImageUrl: `/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
              scope.$forceUpdate()
            }
          }).catch(() => { loading.close() })
        }).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 => {
        study.SeriesList.map(series => {
          if (!series.loadStatus && series.seriesId !== this.firstSeriesId) {
            var sliceThickness = isNaN(parseInt(series.sliceThickness)) ? null : parseInt(series.sliceThickness)
            if (sliceThickness === 5 || series.instanceCount <= 100) {
              series.imageIds.map(imageId => {
                // imageIds.push({ imageId: image, seriesId: series.seriesId, priority })
                this.imageList.push({ imageId: imageId, seriesId: series.seriesId, 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'))
          })
        })

        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(imageId, seriesUid) {
      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
        }
      }
    },
    // 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;
}
.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: rgb(88 84 83);
  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: 210px;
    height: 84px;
    padding: 1px 2px 1px 8px;
    margin: 6px 0 6px 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;
}
/* .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>

