<template>
  <div
    id="canvas"
    ref="canvas"
    v-loading="loading"
    element-loading-text="Loading..."
    element-loading-background="rgba(0, 0, 0, 0.8)"
    style="position:relative;"
    class="cornerstone-element"
    @contextmenu.prevent="onContextmenu"
    @mousemove="sliderMousemove"
    @mouseup="sliderMouseup"
  >
    <div v-show="dicomInfo.series" class="info-series">
      <h2 style="color:#f44336;padding: 5px 0px;margin: 0;">{{ subjectCode }} {{ stack.taskBlindName }}</h2>
      <div>Series: #{{ dicomInfo.series }}</div>
      <div>Image: #{{ dicomInfo.frame }}</div>
      <div>{{ dicomInfo.modality }}</div>
    </div>
    <div v-show="dicomInfo.series" class="info-image">
      <div v-show="mousePosition.mo">
        Pos: {{ parseInt(mousePosition.x) }}, {{ parseInt(mousePosition.y) }}
      </div>
      <div v-if="(dicomInfo.modality === 'CT' || dicomInfo.modality === 'DR' || dicomInfo.modality === 'CR') && mousePosition.mo">
        Density: {{ mousePosition.mo }} HU
      </div>
      <div v-else-if="(dicomInfo.modality === 'PT' && mousePosition.suv)">
        Density: {{ mousePosition.suv.toFixed(digitPlaces) }} SUV
      </div>
      <div v-else-if="mousePosition.mo">
        Density: {{ mousePosition.mo }}
      </div>
      <div>
        W*H: {{ dicomInfo.size }}
        <!-- <span v-show="dicomInfo.pixel">{{ dicomInfo.pixel }}mm</span> -->
      </div>

      <div>Zoom: {{ dicomInfo.zoom }}</div>

      <!-- <div v-show="toolState.clipPlaying">FPS {{ dicomInfo.fps }}</div> -->
    </div>

    <div class="info-subject">
      <div>{{ stack.description }}</div>
      <!-- <div>{{ dicomInfo.hospital }}</div> -->
      <!-- <div v-show="dicomInfo.pid">{{ dicomInfo.pid }}</div> -->
      <!-- <div>{{ subjectCode }}</div> -->
      <!-- <div>{{ dicomInfo.sex }} {{ dicomInfo.age }}</div> -->
      <!-- <div v-show="dicomInfo.acc">ACC {{ dicomInfo.acc }}</div> -->
      <!-- <div>{{ dicomInfo.time }}</div> -->
    </div>
    <div ref="sliderBox" class="my_slider_box" style="position: absolute;right: 1px;height: calc(100% - 100px);transform: translateY(-50%);top: calc(50% - 30px);width: 10px;background: #333;cursor: pointer">
      <div :style="{top: height + '%'}" style="z-index:10;background: #9e9e9e;height: 20px;width: 100%;position: absolute;top: 0;cursor: move" @mousedown="sliderMousedown($event)" />
    </div>
    <div style="position: absolute;left: 50%;top: 15px;color: #f44336;">
      {{ markers.top }}
    </div>
    <div style="position: absolute;top: 50%;right: 15px;color: #f44336;">
      {{ markers.right }}
    </div>

    <div style="position: absolute;left: 50%;bottom: 15px;color: #f44336;">
      {{ markers.bottom }}
    </div>
    <div style="position: absolute;top: 50%;left: 15px;color: #f44336;">
      {{ markers.left }}
    </div>

    <div class="info-instance">
      <div v-show="dicomInfo.location">Location: {{ dicomInfo.location }}</div>
      <div v-show="dicomInfo.thick">Slice Thickness: {{ dicomInfo.thick }}mm</div>
      <div v-show="dicomInfo.wwwc">WW/WL: {{ dicomInfo.wwwc }}</div>
    </div>

    <!-- <div
      v-show="mousePosition.mo"
      class="msg-div"
      :style="{
        top: mousePosition.y+ 'px',
        left: mousePosition.x+ 'px',
      }"
    >
      <span>{{ mousePosition.mo }} ({{ parseInt(mousePosition.x) }},{{ parseInt(mousePosition.y) }})</span>
    </div> -->
  </div>
</template>
<style>
.my_slider_box:after{
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
  background: #333;
}
</style>
<script>
// import { splitLesion } from '@/api/trials'
import requestPoolManager from '@/utils/request-pool'
import DicomEvent from '../components/DicomEvent'
import Vue from 'vue'
import { mapGetters } from 'vuex'
import Contextmenu from 'vue-contextmenujs'
Vue.use(Contextmenu)
import * as cornerstone from 'cornerstone-core'
import * as cornerstoneMath from 'cornerstone-math'
import * as cornerstoneTools from 'cornerstone-tools'
const scroll = cornerstoneTools.import('util/scrollToIndex')
import Hammer from 'hammerjs'
import LengthTool from '@/views/trials/trials-panel/reading/dicoms/tools/Length/LengthTool'
import BidirectionalTool from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/BidirectionalTool'
import ArrowAnnotateTool from '@/views/trials/trials-panel/reading/dicoms/tools/ArrowAnnotate/ArrowAnnotateTool'
// import OrientationMarkersTool from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/OrientationMarkersTool'
import ScaleOverlayTool from '@/views/trials/trials-panel/reading/dicoms/tools/ScaleOverlay/ScaleOverlayTool'
import getOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/getOrientationString'
import invertOrientationString from '@/views/trials/trials-panel/reading/dicoms/tools/OrientationMarkers/invertOrientationString'
import calculateLongestAndShortestDiameters from '@/views/trials/trials-panel/reading/dicoms/tools/Bidirectional/calculateLongestAndShortestDiameters'
cornerstoneTools.external.cornerstone = cornerstone
cornerstoneTools.external.Hammer = Hammer
cornerstoneTools.external.cornerstoneMath = cornerstoneMath
cornerstoneTools.toolStyle.setToolWidth(1)
cornerstoneTools.toolColors.setToolColor('rgb(255, 0, 0)')
cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)')
// cornerstoneTools.init({ globalToolSyncEnabled: true })
cornerstoneTools.init()
export default {
  name: 'CustomizeDicomCanvas',
  props: {
    isScrollSync: {
      type: Boolean,
      required: true
    },
    canvasIndex: {
      type: Number,
      required: true
    }
    // isCurrentTask: {
    //   type: Boolean,
    //   required: true
    // },
    // isBaseline: {
    //   type: Boolean,
    //   required: true
    // },
    // readingTaskState: {
    //   type: Number,
    //   required: true
    // }
  },
  data() {
    return {
      loading: false,
      canvas: {},
      index: 0,
      height: 0,
      cornerstoneStyle: {},
      stack: {
        studyId: '',
        seriesId: '',
        instanceId: '',
        seriesNumber: '',
        imageIds: [],
        currentImageIdIndex: 0,
        firstImageLoading: false,
        visitTaskId: '',
        taskBlindName: ''
        // preventCache: true
      },
      dicomInfo: {
        hospital: '',
        pid: '',
        name: '',
        sex: '',
        age: '',
        acc: '',
        modality: '',
        time: '',
        series: '',
        frame: '',
        size: '',
        pixel: 0,
        thick: 0,
        wwwc: '',
        zoom: 0,
        fps: 5
      },
      toolState: {
        initialized: false,
        activeTool: 'none',
        dicomInfoVisible: false,
        clipPlaying: false,
        viewportInvert: false
      },
      loadImagePromise: null,
      AnnotationSync: null,
      allROIToolData: {},
      type: '',
      series: '',
      ToolStateManager: null,
      renderedMeasured: [],
      measuredTools: ['Length', 'Bidirectional', 'ArrowAnnotate'],
      measureData: [],
      selectedLesion: null,
      activeTool: 0, // 0:enable  1:passive  2:active
      activeToolName: '',
      isCurrentTask: false,
      isBaseline: false,
      readingTaskState: 2,
      image: null,
      CriterionType: 0,
      digitPlaces: 2,
      sliderInfo: {
        oldB: null,
        oldM: null,
        isMove: false
      },
      oldPosition: {},
      subjectCode: '',
      isMsg: false,
      mousePosition: { x: '', y: '', mo: '' },
      orientationMarkers: [],
      originalMarkers: [],
      imageId: '',
      markers: { top: '', right: '', bottom: '', left: '' }

    }
  },
  computed: {
    ...mapGetters(['visitTaskList'])
  },
  mounted() {
    this.subjectCode = this.$router.currentRoute.query.subjectCode
    document.addEventListener('mouseup', () => {
      this.sliderMouseup()
    })
    // document.addEventListener('mousemove', () => {
    //   this.sliderMousemove()
    // })
    var digitPlaces = localStorage.getItem('digitPlaces')
    this.digitPlaces = digitPlaces ? Number(digitPlaces) : this.digitPlaces
    this.type = this.$router.currentRoute.query.type ? this.$router.currentRoute.query.type : ''
    this.CriterionType = parseInt(localStorage.getItem('CriterionType'))
    this.canvas = this.$refs.canvas
    this.canvas.addEventListener('cornerstonenewimage', this.onNewImage)
    this.canvas.addEventListener(
      'cornerstoneimagerendered',
      this.onImageRendered
    )
    this.canvas.addEventListener(
      'cornerstoneimageloaded',
      this.onImageLoaded
    )

    this.canvas.addEventListener(
      'cornerstonetoolsclipstopped',
      this.onClipStopped
    )
    this.canvas.addEventListener(
      'cornerstonetoolsmeasurementcompleted',
      this.onMeasurementcompleted
    )
    this.canvas.addEventListener(
      'cornerstonetoolsmeasurementmodified',
      this.onMeasurementmodified
    )

    // this.canvas.addEventListener(
    //   'cornerstonetoolsmeasurementremoved',
    //   this.onMeasurementremoved
    // )
    this.canvas.addEventListener('cornerstonetoolsmouseup', this.mouseUp)
    this.canvas.addEventListener('cornerstonetoolsmousedown', this.mouseDown)
    this.canvas.addEventListener('cornerstonetoolsmouseclick', this.mouseClick)
    // this.canvas.addEventListener('click', this.cotextMenuClick)
    this.canvas.addEventListener('cornerstonetoolsstackscroll', this.stackScrollCallback)
    this.canvas.addEventListener('cornerstonetoolsmousemove', this.mouseMove)
    this.canvas.addEventListener('mouseleave', () => {
      this.mousePosition.mo = ''
    })

    // Store.$on('getMeasureData', () => {
    //   this.getMeasureData()
    //   console.log('getMeasureData')
    // })
    DicomEvent.$on('setReadingState', readingTaskState => {
      if (readingTaskState === 2) {
        this.activeTool = 0
      }
      this.readingTaskState = readingTaskState
      cornerstone.updateImage(this.canvas, true)
    })
  },
  beforeDestroy() {
    // Store.$off('getMeasureData')
    DicomEvent.$off('setReadingState')
  },
  methods: {
    reloadCanvas() {
      console.log('重新渲染')
      cornerstone.resize(this.canvas)
    },
    mouseMove(e) {
      const { element, image, currentPoints } = e.detail
      const x = Math.round(currentPoints.image.x)
      const y = Math.round(currentPoints.image.y)

      const stats = {}

      if (x >= 0 && y >= 0 && x < image.columns && y < image.rows) {
        stats.x = x
        stats.y = y

        if (image.color) {
          stats.storedPixels = this.getRGBPixels(element, x, y, 1, 1)
        } else {
          stats.storedPixels = cornerstone.getStoredPixels(
            element,
            x,
            y,
            1,
            1
          )
          stats.sp = stats.storedPixels[0]
          stats.mo = stats.sp * image.slope + image.intercept
        }
      }
      this.mousePosition.x = currentPoints.canvas.x
      this.mousePosition.y = currentPoints.canvas.y
      this.mousePosition.mo = stats.mo
    },
    getRGBPixels(element, x, y, width, height) {
      if (!element) {
        return
      }
      x = Math.round(x)
      y = Math.round(y)
      const enabledElement = cornerstone.getEnabledElement(element)
      const storedPixelData = []
      let index = 0
      const pixelData = enabledElement.image.getPixelData()
      let spIndex, row, column

      if (enabledElement.image.color) {
        for (row = 0; row < height; row++) {
          for (column = 0; column < width; column++) {
            spIndex = ((row + y) * enabledElement.image.columns + (column + x)) * 4
            const red = pixelData[spIndex]
            const green = pixelData[spIndex + 1]
            const blue = pixelData[spIndex + 2]
            const alpha = pixelData[spIndex + 3]

            storedPixelData[index++] = red
            storedPixelData[index++] = green
            storedPixelData[index++] = blue
            storedPixelData[index++] = alpha
          }
        }
      }

      return storedPixelData
    },
    sliderMousedown(e) {
      var boxHeight = this.$refs['sliderBox'].clientHeight
      this.sliderInfo.oldB = parseInt(e.srcElement.style.top) * boxHeight / 100
      this.sliderInfo.oldM = e.clientY
      this.sliderInfo.isMove = true
    },
    sliderMousemove(e) {
      if (!this.sliderInfo.isMove) return
      var PX = this.sliderInfo.oldB - (this.sliderInfo.oldM - e.clientY)
      var boxHeight = this.$refs['sliderBox'].clientHeight
      if (PX < 0) return
      if (PX > boxHeight) return
      var height = PX * 100 / boxHeight
      var index = Math.trunc(this.stack.imageIds.length * this.height / 100)

      // if (!cornerstone.imageCache.getImageLoadObject(this.stack.imageIds[index])) return
      this.height = height
      if (this.stack.currentImageIdIndex !== index) {
        scroll(this.canvas, index)
      }
    },
    sliderMouseup(e) {
      this.sliderInfo.isMove = false
    },
    getMeasureData() {
      var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
      this.measureData = this.visitTaskList[idx].MeasureData
      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
      const imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
      ToolStateManager.clearImageIdToolState(imageId)
      cornerstone.updateImage(this.canvas, true)
    },
    onContextmenu(event) {
      if (this.isBaseline || this.readingTaskState >= 2 || this.CriterionType === 10) return false
      const x = event.offsetX
      const y = event.offsetY
      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager

      var element = cornerstone.getEnabledElement(this.canvas)
      var { imageId } = element.image
      this.measuredTools.map(toolType => {
        const toolState = ToolStateManager.getImageIdToolState(imageId, toolType)
        if (!toolState) return
        var toolObj = new cornerstoneTools[`${toolType}Tool`]()

        var i = toolState.data.findIndex(data => toolObj.pointNearTool(this.canvas, data, { x, y }, 'mouse'))
        if (i === -1) return false
        var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
        var rowId = null
        if (idx > -1) {
          rowId = this.measureData[idx].RowId
        }
        if (rowId) {
          this.selectedLesion = toolState.data[i]
          this.$contextmenu({
            items: [
              {
                label: 'Split',
                divided: true,
                onClick: () => {
                  this.handleSplit()
                }
              }
              // {
              //   label: 'Merge',
              //   divided: true,
              //   children: [
              //     {
              //       label: 'T01'
              //     },
              //     {
              //       label: 'T02'
              //     },
              //     {
              //       label: 'T03'
              //     }
              //   ]
              // }
            ],
            event,
            x: event.clientX,
            y: event.clientY,
            customClass: 'class-a',
            zIndex: 3,
            minWidth: 100
          })
          return false
        } else {
          return false
        }
      })
    },
    handleSplit() {
      var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === this.selectedLesion.uuid)
      if (idx > -1) {
        // const loading = this.$loading({ fullscreen: true })
        // var params = {
        //   visitTaskId: this.stack.visitTaskId,
        //   questionId: this.measureData[idx].QuestionId,
        //   rowId: this.measureData[idx].RowId
        // }
        DicomEvent.$emit('split', this.measureData[idx])
        // splitLesion(params).then(res => {
        //   loading.close()
        //   DicomEvent.$emit('refreshVisitList')
        // })
      }
    },
    mouseUp(e) {
      console.log('mouseUp')
      this.image = e.detail.image
      this.getToolStateInfo(e)
    },
    mouseDown(e) {
      console.log('mouseDown')
      this.image = e.detail.image
    },
    getToolStateInfo(e) {
      const { element, currentPoints, image } = e.detail
      var imageId = image.imageId
      var instanceId = imageId.split('/')[imageId.split('/').length - 1]
      instanceId = instanceId.split('.')[0]
      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
      this.measuredTools.map(toolType => {
        const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, toolType)
        if (toolState) {
          var toolObj = new cornerstoneTools[`${toolType}Tool`]()

          var i = toolState.data.findIndex(data => toolObj.pointNearTool(element, data, currentPoints.canvas, 'mouse'))
          if (i > -1) {
            const measureData = {}
            measureData.studyId = this.stack.studyId
            measureData.seriesId = this.stack.seriesId
            measureData.instanceId = instanceId
            measureData.data = toolState.data[i]
            measureData.type = toolType
            measureData.thick = this.dicomInfo.thick
            var uuid = toolState.data[i].uuid
            var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === uuid)
            if (idx > -1) {
              var questionInfo = this.measureData[idx]
              this.$emit('modifyMeasureData', { measureData, questionInfo })
            } else {
              // this.$emit('setMeasureData', measureData)
            }
          }
        }
      })
    },
    stackScrollCallback(e) {
      const { detail } = e
      if (this.isScrollSync) {
        this.$emit('scrollSync', { canvasIndex: this.canvasIndex, direction: detail.direction })
      }
      this.stack.currentImageIdIndex = e.detail.newImageIdIndex
      // this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
      var priority = new Date(new Date().setHours(23, 59, 59, 999)).getTime()

      requestPoolManager.loadAndCacheImagePlus(this.stack.imageIds[this.stack.currentImageIdIndex], this.stack.seriesId, priority)
        .then(image => {
          this.height = (this.stack.currentImageIdIndex) * 100 / (this.stack.imageIds.length - 1)
          // 判断该序列是否下载完成
          // var isLoaded = this.getSeriesLoadStatus()
          // if (isLoaded === 0 || isLoaded === 1) {
          //   var maxStep = 5
          //   var index = e.detail.newImageIdIndex

          //   var frontLoadImage = this.stack.imageIds.slice(index <= maxStep ? 0 : index - maxStep, index <= maxStep ? index : maxStep)
          //   var rearLoadImage = this.stack.imageIds.slice(index + 1, index + maxStep)

          //   const priority = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
          //   if (detail.direction === -1) {
          //     // 往前滚动
          //     console.log('往前滚动')
          //     for (let i = frontLoadImage - 1; i >= 0; i--) {
          //       requestPoolManager.loadAndCacheImagePlus(frontLoadImage[i], this.stack.seriesId, priority - 1)
          //     }
          //     for (let i = 0; i < rearLoadImage.length; i++) {
          //       requestPoolManager.loadAndCacheImagePlus(rearLoadImage[i], this.stack.seriesId, priority - 1)
          //     }
          //   }
          //   if (detail.direction === 1) {
          //     // 往后滚动
          //     console.log('往后滚动')
          //     for (let i = rearLoadImage - 1; i >= 0; i--) {
          //       requestPoolManager.loadAndCacheImagePlus(rearLoadImage[i], this.stack.seriesId, priority - 1)
          //     }
          //     for (let i = frontLoadImage - 1; i >= 0; i--) {
          //       requestPoolManager.loadAndCacheImagePlus(frontLoadImage[i], this.stack.seriesId, priority - 1)
          //     }
          //   }
          // }
        })
        .catch((error) => {
          console.log(error)
        })
    },
    getSeriesLoadStatus() {
      var status = -1
      var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
      if (idx === -1) return status
      var studyList = this.visitTaskList[idx].StudyList
      var studyIdx = studyList.findIndex(study => study.StudyId === this.stack.studyId)
      if (studyIdx === -1) return status
      var seriesList = studyList[studyIdx].SeriesList
      var seriesIdx = seriesList.findIndex(series => series.seriesId === this.stack.seriesId)
      if (seriesIdx === -1) return status
      return seriesList[seriesIdx].loadStatus ? 1 : 0
    },
    renderMeasuredData(e) {
      var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
      this.measureData = this.visitTaskList[idx].MeasureData
      const { element } = e.detail
      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
      this.measureData.forEach(data => {
        if (this.activeTool === 2 && this.readingTaskState < 2) {
          if (this.activeToolName === data.MeasureData.type) {
            cornerstoneTools.setToolActiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
          } else {
            cornerstoneTools.setToolPassiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
          }
        } else if (this.activeTool === 1 && this.readingTaskState < 2) {
          cornerstoneTools.setToolPassiveForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
        } else {
          cornerstoneTools.setToolEnabledForElement(element, data.MeasureData.type, { mouseButtonMask: 1 })
        }
        if (this.stack.instanceId.includes(data.InstanceId) && data.MeasureData) {
          const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, data.MeasureData.type)
          if (toolState && toolState.data.length > 0) {
            var idx = toolState.data.findIndex(item => item.uuid === data.MeasureData.data.uuid)
            if (idx === -1) {
              ToolStateManager.addImageIdToolState(e.detail.image.imageId, data.MeasureData.type, data.MeasureData.data)
            }
          } else {
            ToolStateManager.addImageIdToolState(e.detail.image.imageId, data.MeasureData.type, data.MeasureData.data)
          }
        }
      })
    },
    mouseClick(e) {
      const { element, currentPoints } = e.detail
      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
      this.measuredTools.map(toolType => {
        const toolState = ToolStateManager.getImageIdToolState(e.detail.image.imageId, toolType)
        if (!toolState) return
        var toolObj = new cornerstoneTools[`${toolType}Tool`]()
        // toolState.data.forEach(data => {
        //   // data.color = ''
        // })
        var i = toolState.data.findIndex(data => toolObj.pointNearTool(element, data, currentPoints.canvas, 'mouse'))
        if (i > -1) {
        // 设置鼠标选中颜色rgb(0, 255, 0)
          // toolState.data[i].color = ''

          var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data && item.MeasureData.data.uuid === toolState.data[i].uuid)
          if (idx > -1) {
            DicomEvent.$emit('setCollapseActive', this.measureData[idx])
          }
          // toolState.data[i].active = true
          // cornerstone.updateImage(element)
        }
      })
    },
    loadImageStack(dicomSeries) {
      return new Promise(resolve => {
        this.isCurrentTask = dicomSeries.isCurrentTask
        this.isBaseline = dicomSeries.isBaseline
        this.readingTaskState = dicomSeries.readingTaskState
        if (this.isCurrentTask && this.readingTaskState < 2) {
          this.activeTool = 1
        } else {
          this.activeTool = 0
        }
        this.series = Object.assign(this.series ? this.series : {}, dicomSeries)
        this.stack = Object.assign(this.stack, dicomSeries)

        this.stack.seriesId = dicomSeries.seriesId
        this.stack.studyId = dicomSeries.studyId
        this.stack.seriesNumber = dicomSeries.seriesNumber
        this.stack.imageIds = dicomSeries.imageIds
        this.stack.currentImageIdIndex = dicomSeries.imageIdIndex ? dicomSeries.imageIdIndex : 0
        this.stack.firstImageLoading = true
        this.stack.visitTaskId = dicomSeries.visitTaskId
        this.stack.taskBlindName = dicomSeries.taskBlindName
        this.stack.description = dicomSeries.description
        // this.measuredData = dicomSeries.measuredData
        var idx = this.visitTaskList.findIndex(i => i.VisitTaskId === dicomSeries.visitTaskId)
        this.measureData = this.visitTaskList[idx].MeasureData
        const imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
        var instanceId = imageId.split('/')[imageId.split('/').length - 1]
        instanceId = instanceId.split('.')[0]
        this.stack.instanceId = instanceId
        const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
        ToolStateManager.clearImageIdToolState(dicomSeries.imageIds)
        if (this.toolState.clipPlaying) this.toggleClipPlay()
        this.toolState.viewportInvert = false
        this.toolState.dicomInfoVisible = false

        const element = this.$refs.canvas
        cornerstone.enable(element)
        element.tabIndex = 0
        element.focus()
        var scope = this
        // cornerstone.imageCache.setMaximumSizeBytes(100000)
        // this.loading = true
        // const loading = this.$loading({ fullscreen: true })
        // cornerstone.loadImage(this.stack.imageIds[this.stack.currentImageIdIndex])
        // cornerstone.loadAndCacheImage(this.stack.imageIds[this.stack.currentImageIdIndex])
        //   .then(image => {
        //     loading.close()
        //     scope.onFirstImageLoaded(image)
        //     resolve()
        //   }).catch((error) => {
        //     loading.close()

        //     if (error.error && error.error.message) {
        //       this.$message.error(error.error.message)
        //     }
        //     resolve()
        //   })
        // var priority = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
        // requestPoolManager.loadAndCacheImagePlus(this.stack.imageIds[this.stack.currentImageIdIndex], this.stack.seriesId, priority)
        // cornerstone.loadAndCacheImage(this.stack.imageIds[this.stack.currentImageIdIndex])
        // requestPoolManager.loadAndCacheImagePlus(this.stack.imageIds[this.stack.currentImageIdIndex], this.stack.seriesId, priority)
        cornerstone.loadAndCacheImage(this.stack.imageIds[this.stack.currentImageIdIndex])
          .then(image => {
            // loading.close()
            scope.onFirstImageLoaded(image)
            // requestPoolManager.executeTask()
            resolve()
          })
          .catch((error) => {
            // loading.close()

            if (error.error && error.error.message) {
              this.$message.error(error.error.message)
            }
            resolve()
          })
        // requestPoolManager.executeTask()
      })
    },
    onFirstImageLoaded(image) {
      console.log('onFirstImageLoaded')

      const element = this.$refs.canvas
      var viewport = cornerstone.getDefaultViewportForImage(this.canvas, image)
      cornerstone.displayImage(this.canvas, image, viewport)

      if (!this.toolState.initialized) {
        this.toolState.initialized = true
        const toolButtons = document.querySelectorAll('[data-tool]')

        // const scope = this
        Array.from(toolButtons).forEach((toolBtn) => {
          // Add the tool
          const toolName = toolBtn.getAttribute('data-tool')
          const apiTool = cornerstoneTools[`${toolName}Tool`]
          if (apiTool) {
            const toolAlreadyAddedToElement = cornerstoneTools.getToolForElement(element, apiTool)

            if (!toolAlreadyAddedToElement) {
              if (toolName === 'Length') {
                cornerstoneTools.addToolForElement(element, LengthTool, { configuration: { handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true, digits: this.digitPlaces }})
              } else if (toolName === 'Bidirectional') {
                cornerstoneTools.addToolForElement(element, BidirectionalTool, { digits: this.digitPlaces })
              } else if (toolName === 'ArrowAnnotate') {
                cornerstoneTools.addToolForElement(element, ArrowAnnotateTool, { configuration: { allowEmptyLabel: true, handleRadius: false, drawHandlesOnHover: true, hideHandlesIfMoving: true }})
              } else {
                cornerstoneTools.addToolForElement(element, apiTool)
              }
            }
          }
        })
        if (!cornerstoneTools.getToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)) {
          cornerstoneTools.addToolForElement(element, cornerstoneTools.StackScrollMouseWheelTool)
        }
        cornerstoneTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {})

        if (!cornerstoneTools.getToolForElement(element, ScaleOverlayTool)) {
          cornerstoneTools.addToolForElement(element, ScaleOverlayTool)
        }
        cornerstoneTools.setToolActiveForElement(element, 'ScaleOverlay', {})

        // if (!cornerstoneTools.getToolForElement(element, OrientationMarkersTool)) {
        //   cornerstoneTools.addToolForElement(element, OrientationMarkersTool)
        // }
        // cornerstoneTools.setToolActiveForElement(element, 'OrientationMarkers', { })
      }

      // cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'stackPrefetch', 'playClip'])
      cornerstoneTools.addStackStateManager(this.canvas, ['stack', 'playClip'])
      cornerstoneTools.addToolState(this.canvas, 'stack', this.stack)
      // cornerstoneTools.stackPrefetch.enable(this.canvas)
      cornerstone.updateImage(element, true)

      this.stack.firstImageLoading = false
      this.toolState.dicomInfoVisible = true
      var instanceId = image.imageId.split('/')[image.imageId.split('/').length - 1]
      instanceId = instanceId.split('.')[0]
      this.stack.instanceId = instanceId
      this.resetWwwc()
    },
    onNewImage(e) {
      console.log('cornerstonenewimage')
      e.detail.enabledElement.options = {}
      var data = e.detail.image.data
      this.dicomInfo.hospital = data.string('x00080080')
      // this.dicomInfo.pid = data.string('x00100020')
      this.dicomInfo.pid = data.string('x00120040')
      this.dicomInfo.name = data.string('x00100010')
      this.dicomInfo.age = data.string('x00101010')
      this.dicomInfo.sex = data.string('x00100040')
      this.dicomInfo.acc = data.string('x00080050') // 登记号
      this.dicomInfo.modality = data.string('x00080060')
      this.dicomInfo.time = this.formatDicomDateTime(
        data.string('x00080020'),
        data.string('x00080030')
      )
      this.dicomInfo.series = data.string('x00200011')
      this.dicomInfo.frame = `${this.stack.currentImageIdIndex + 1}/${
        this.stack.imageIds.length
      }`
      this.dicomInfo.size = `${data.uint16('x00280010')}*${data.uint16(
        'x00280011'
      )}`
      // var pixel = data.floatString('x00280030')
      if (this.dicomInfo.pixel) {
        this.dicomInfo.pixel = this.dicomInfo.pixel.toFixed(2)
      }
      this.dicomInfo.thick = data.floatString('x00180050') // 切片厚度
      if (this.dicomInfo.thick) {
        this.dicomInfo.thick = this.dicomInfo.thick.toFixed(2)
      }
    },
    formatDicomDateTime(date, time) {
      if (date) {
        date = `${date.substr(0, 4)}-${date.substr(4, 2)}-${date.substr(6, 2)}`
      }
      if (time) { time = `${time.substr(0, 2)}:${time.substr(2, 2)}:${time.substr(4, 2)}` }
      return time ? `${date} ${time}` : `${date} 00:00:00`
    },
    onImageLoaded(e) {
      console.log('onImageLoaded')
    },
    onImageRendered(e) {
      console.log('onImageRendered')
      // const { element } = e.detail
      var imageId = e.detail.image.imageId
      var instanceId = imageId.split('/')[imageId.split('/').length - 1]
      instanceId = instanceId.split('.')[0]

      if (this.imageId !== instanceId) {
        this.getOrientationMarker(e.detail.element)
        this.imageId = instanceId
      }
      // this.$set(this.markers, 'top', this.orientationMarkers[0])
      // this.$set(this.markers, 'right', this.orientationMarkers[1])
      // this.$set(this.markers, 'bottom', this.orientationMarkers[2])
      // this.$set(this.markers, 'left', this.orientationMarkers[3])
      // this.markers.top = this.orientationMarkers[0]
      // this.markers.right = this.orientationMarkers[1]
      // this.markers.bottom = this.orientationMarkers[2]
      // this.markers.left = this.orientationMarkers[3]
      this.stack.instanceId = instanceId
      var viewport = e.detail.viewport
      this.dicomInfo.wwwc = `${Math.round(
        viewport.voi.windowWidth
      )}/${Math.round(viewport.voi.windowCenter)}` // 窗位
      this.dicomInfo.zoom = viewport.scale.toFixed(2)
      var data = e.detail.image.data
      const position = data.string('x00200032')
      this.dicomInfo.location = position ? Number(
        position.split('\\')[position.split('\\').length - 1]
      ).toFixed(2) : ''
      this.renderMeasuredData(e)
    },
    getOrientationMarker(element) {
      const enabledElement = cornerstone.getEnabledElement(element)
      const imagePlane = cornerstone.metaData.get(
        'imagePlaneModule',
        enabledElement.image.imageId
      )

      if (!imagePlane || !imagePlane.rowCosines || !imagePlane.columnCosines) {
        return
      }

      const row = getOrientationString(imagePlane.rowCosines)
      const column = getOrientationString(imagePlane.columnCosines)
      const oppositeRow = invertOrientationString(row)
      const oppositeColumn = invertOrientationString(column)
      const markers = {
        top: oppositeColumn,
        bottom: column,
        left: oppositeRow,
        right: row
      }
      if (!markers) {
        return
      }
      this.orientationMarkers = [oppositeColumn, row, column, oppositeRow]
      this.originalMarkers = [oppositeColumn, row, column, oppositeRow]
      this.setMarkers()
    },
    onMeasurementcompleted(e) {
      // 测量完成
      console.log('completed')
      this.activeTool = 1
      this.activeToolName = ''
      // cornerstoneTools.setToolPassiveForElement(element, e.detail.toolName)
      var element = cornerstone.getEnabledElement(this.canvas)
      var { imageId } = element.image
      // var imageId = this.stack.imageIds[this.stack.currentImageIdIndex]
      var instanceId = imageId.split('/')[imageId.split('/').length - 1]
      instanceId = instanceId.split('.')[0]
      if (e.detail.toolName === 'Length' || e.detail.toolName === 'ArrowAnnotate') {
        const measureData = {}
        measureData.studyId = this.stack.studyId
        measureData.seriesId = this.stack.seriesId
        measureData.instanceId = instanceId
        measureData.data = e.detail.measurementData
        measureData.type = e.detail.toolName
        measureData.thick = this.dicomInfo.thick
        console.log(e.detail.measurementData)
        this.$emit('setMeasureData', measureData)
        cornerstoneTools.setToolPassiveForElement(this.canvas, e.detail.toolName)
      } else if (e.detail.toolName === 'Bidirectional') {
        const {
          longestDiameter,
          shortestDiameter
        } = calculateLongestAndShortestDiameters(e.detail.measurementData, element.image, this.digitPlaces)
        const measureData = {}

        measureData.studyId = this.stack.studyId
        measureData.seriesId = this.stack.seriesId
        measureData.instanceId = instanceId
        measureData.data = e.detail.measurementData
        measureData.type = e.detail.toolName
        measureData.thick = this.dicomInfo.thick
        measureData.data.longestDiameter = longestDiameter
        measureData.data.shortestDiameter = shortestDiameter
        this.$emit('setMeasureData', measureData)
        cornerstoneTools.setToolPassiveForElement(this.canvas, e.detail.toolName)
      }
    },
    onMeasurementremoved(e) {

    },
    onMeasurementmodified(e) {
      // 移动
      console.log('modified')
    },
    measurementMouseUpHandler(e) {
      console.log('measurementMouseUp')
    },
    // updateImage(obj) {
    //   // const element = this.$refs.canvas
    //   // this.measuredData = obj.measuredData
    //   // const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager
    //   // var imageId = `wadouri:/api/instance/content/${obj.instanceId}`
    //   // ToolStateManager.clearImageIdToolState(imageId)
    //   // cornerstone.updateImage(element, true)
    // },
    updateImage(instanceId) {
      var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
      this.measureData = this.visitTaskList[i].MeasureData

      const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager

      var element = cornerstone.getEnabledElement(this.canvas)
      var { imageId } = element.image
      ToolStateManager.clearImageIdToolState(imageId)
      cornerstone.updateImage(element, true)
    },
    removeToolState(measureData) {
      var i = this.visitTaskList.findIndex(i => i.VisitTaskId === this.stack.visitTaskId)
      this.measureData = this.visitTaskList[i].MeasureData
      var idx = this.measureData.findIndex(item => item.MeasureData && item.MeasureData.data.uuid === measureData.data.uuid)
      if (idx > -1) {
        this.measureData.splice(idx, 1)
        var element = cornerstone.getEnabledElement(this.canvas)
        const ToolStateManager = cornerstoneTools.globalImageIdSpecificToolStateManager

        var { imageId } = element.image
        ToolStateManager.clearImageIdToolState(imageId)
        cornerstone.updateImage(element, true)
      }
    },
    getToolForElement(toolName) {
      var isExist = false
      for (var i = 0; i < cornerstoneTools.store.state.tools.length; i++) {
        if (cornerstoneTools.store.state.tools[i].name === toolName) {
          isExist = true
          break
        }
      }
      return isExist
    },
    onClipStopped() {
      this.toolState.clipPlaying = false
    },

    onKeyPress(e) {
      var key = e.detail.keyCode
      var keys = { PageUp: 33, PageDown: 34, End: 35, Home: 36 } // Left: 37, Up: 38, Right: 39, Down: 40
      if (key < keys.PageUp || key > keys.Home) return
      if (key === keys.Home) this.scrollPage(-9999)
      else if (key === keys.PageUp) this.scrollPage(-1)
      else if (key === keys.PageDown) this.scrollPage(1)
      else if (key === keys.End) this.scrollPage(9999)
    },

    resizeCanvas() {
      cornerstone.resize(this.canvas, true)
    },

    activateCanvas() {
      this.canvas.tabIndex = 0
      this.canvas.focus()
    },

    resetViewport() {
      this.toolState.viewportInvert = false
      var image = cornerstone.getImage(this.canvas)
      cornerstone.setViewport(
        this.canvas,
        cornerstone.getDefaultViewportForImage(this.canvas, image)
      )
    },

    toggleDicomInfo() {
      this.toolState.dicomInfoVisible = !this.toolState.dicomInfoVisible
      if (this.toolState.dicomInfoVisible) {
        cornerstoneTools.orientationMarkers.enable(this.canvas)
      } else cornerstoneTools.orientationMarkers.disable(this.canvas)
      cornerstone.updateImage(this.canvas)
    },
    setColormap(colormap) {
      const viewport = cornerstone.getViewport(this.canvas)
      viewport.colormap = colormap
      cornerstone.setViewport(this.canvas, viewport)
      cornerstone.updateImage(this.canvas, true)
      if (!colormap) {
        this.resetRenderCanvase(this.canvas)
      }
    },
    resetRenderCanvase(element) {
      const enabledElement = cornerstone.getEnabledElement(element)

      enabledElement.renderingTools.colormapId = undefined
      enabledElement.renderingTools.colorLut = undefined

      const renderCanvas = enabledElement.renderingTools.renderCanvas
      const canvasContext = renderCanvas.getContext('2d')
      canvasContext.fillStyle = 'white'
      canvasContext.fillRect(0, 0, renderCanvas.width, renderCanvas.height)

      const renderCanvasData = canvasContext.getImageData(
        0,
        0,
        renderCanvas.width,
        renderCanvas.height
      )

      enabledElement.renderingTools.renderCanvasContext = canvasContext
      enabledElement.renderingTools.renderCanvasData = renderCanvasData
    },
    scrollPage(offset) {
      var index = this.stack.currentImageIdIndex + offset
      this.index = this.stack.currentImageIdIndex + offset
      if (index < 0) index = 0
      else if (index >= this.stack.imageIds.length) {
        index = this.stack.imageIds.length - 1
      }
      if (index !== this.stack.currentImageIdIndex) {
        scroll(this.canvas, index)
      }
    },

    toggleClipPlay() {
      if (this.toolState.clipPlaying) {
        cornerstoneTools.stopClip(this.canvas)
        this.toolState.clipPlaying = false
        return
      }
      this.toolState.clipPlaying = true
      cornerstoneTools.playClip(this.canvas, this.dicomInfo.fps)
      cornerstoneTools.getToolState(
        this.canvas,
        'playClip'
      ).data[0].loop = false
    },
    setFps(fps) {
      this.dicomInfo.fps = fps
    },

    resetWwwc() {
      this.toolState.viewportInvert = false
      var viewport = cornerstone.getViewport(this.canvas)
      viewport.invert = false
      var image = cornerstone.getImage(this.canvas)
      viewport.voi.windowWidth = image.windowWidth
      viewport.voi.windowCenter = image.windowCenter
      cornerstone.setViewport(this.canvas, viewport)
    },

    setWwwc(ww, wc) {
      var viewport = cornerstone.getViewport(this.canvas)
      viewport.voi.windowWidth = ww
      viewport.voi.windowCenter = wc
      cornerstone.setViewport(this.canvas, viewport)
    },

    toggleInvert() {
      this.toolState.viewportInvert = !this.toolState.viewportInvert
      var viewport = cornerstone.getViewport(this.canvas)
      viewport.invert = this.toolState.viewportInvert
      cornerstone.setViewport(this.canvas, viewport)
    },

    activateZoom() {
      cornerstoneTools.addTool(cornerstoneTools.ZoomTool, {
        configuration: {
          invert: false,
          preventZoomOutsideImage: false,
          minScale: 0.1,
          maxScale: 20.0
        }
      })
      cornerstoneTools.setToolActive('Zoom', { mouseButtonMask: 1 })
      this.toolState.activeTool = 'zoom'
    },

    resetRotate() {
      this.orientationMarkers = [...this.originalMarkers]
      this.setMarkers()
      var viewport = cornerstone.getViewport(this.canvas)
      viewport.hflip = false
      viewport.vflip = false
      viewport.rotation = 0
      cornerstone.setViewport(this.canvas, viewport)
    },
    setMarkers() {
      var markers = [...this.orientationMarkers]
      for (const key in this.markers) {
        var v = markers.shift(0)
        this.markers[key] = v
      }
    },
    setRotate(hflip, vflip, angle, type) {
      var markers = [...this.orientationMarkers]
      if (type === 2) {
        // 垂直翻转
        this.orientationMarkers[1] = markers[3]

        this.orientationMarkers[3] = markers[1]
      } else if (type === 3) {
        // 水平翻转
        this.orientationMarkers[0] = markers[2]
        this.orientationMarkers[2] = markers[0]
      } else if (type === 4) {
        // 左转90度
        this.orientationMarkers = markers.slice(1, 4).concat(markers[0])
      } else if (type === 5) {
        // 右转90度
        this.orientationMarkers = [markers[3]].concat(markers.slice(0, 3))
      }
      this.setMarkers()
      var viewport = cornerstone.getViewport(this.canvas)
      if (hflip) viewport.hflip = !viewport.hflip
      if (vflip) viewport.vflip = !viewport.vflip
      if (angle !== 0) viewport.rotation += angle
      cornerstone.setViewport(this.canvas, viewport)
    },

    saveImage() {
      var uid = cornerstone.getImage(this.canvas).data.string('x00080018')
      cornerstoneTools.SaveAs(this.canvas, `${uid}.png`)
    },
    fitToWindow() {
      if (this.stack.seriesNumber) {
        cornerstone.fitToWindow(this.canvas)
      }
    },
    fitToImage() {
      if (this.stack.seriesNumber) {
        const enabledElement = cornerstone.getEnabledElement(this.canvas)
        enabledElement.viewport.scale = 1
        cornerstone.updateImage(this.canvas)
      }
    },

    removeLabel(item) {
      const promise = scroll(this.canvas, item.data.imageIdIndex)
      const scope = this
      Promise.all([promise]).then(res => {
        cornerstoneTools.removeToolState(scope.canvas, item.type, item.data)
        cornerstone.updateImage(scope.canvas)
      })
    },
    setToolPassive(toolName) {
      // 它们的数据可以被操作，但不能创建。
      cornerstoneTools.setToolPassiveForElement(this.canvas, toolName)
      this.activeTool = 1
      this.activeToolName = ''
    },
    setToolActive(toolName) {
      this.activeTool = 2
      // cornerstoneTools.setToolPassiveForElement(this.canvas, 'Bidirectional')
      // this.measuredTools.forEach(toolName => {
      //   console.log(toolName)
      //   cornerstoneTools.setToolPassiveForElement(this.canvas, toolName)
      // })
      this.activeToolName = toolName
      this.$nextTick(() => {
        // console.log(cornerstoneTools.isToolActiveForElement(this.canvas, 'Bidirectional'))

        cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
          mouseButtonMask: 1
        })
      })
    },
    setToolEnabled(toolName) {
      this.activeToolName = ''
      // 工具将呈现，但不会对输入作出反应
      cornerstoneTools.setToolEnabledForElement(this.canvas, toolName)
      this.activeTool = 0
      // this.readingTaskState = 2
    },
    setAllToolsPassive() {
      cornerstoneTools.store.state.tools.forEach((tool) => {
        cornerstoneTools.setToolPassiveForElement(this.canvas, tool.name)
      })
    },

    addTargetElement(synchronizer) {
      synchronizer.addTarget(this.$refs.canvas)
    },
    removeTarget(synchronizer) {
      synchronizer.removeTarget(this.$refs.canvas)
    },
    addSourceElement(synchronizer) {
      synchronizer.addSource(this.$refs.canvas)
    },
    removeSource(synchronizer) {
      synchronizer.removeSource(this.$refs.canvas)
    },
    activeReferenceLine(synchronizer) {
      if (
        !cornerstoneTools.getToolForElement(
          this.canvas,
          cornerstoneTools.ReferenceLinesTool
        )
      ) {
        cornerstoneTools.addToolForElement(
          this.canvas,
          cornerstoneTools.ReferenceLinesTool
        )
      }
      cornerstoneTools.setToolEnabledForElement(this.canvas, 'ReferenceLines', {
        synchronizationContext: synchronizer
      })

      // cornerstoneTools.addTool(cornerstoneTools.CrosshairsTool)
      // cornerstoneTools.setToolActive('Crosshairs', {
      //   mouseButtonMask: 1,
      //   synchronizationContext: synchronizer
      // })
    },
    disabledReferenceLine(synchronizer) {
      synchronizer.enabled = false
      synchronizer.remove(this.canvas)
      cornerstoneTools.setToolDisabledForElement(this.canvas, 'ReferenceLines')
      // cornerstoneTools.setToolDisabledForElement(this.canvas, 'Crosshairs')
    },
    activeViewPortToolSync(synchronizer, toolName) {
      synchronizer.add(this.canvas)
      synchronizer.enabled = true
      if (
        !cornerstoneTools.getToolForElement(
          this.canvas,
          cornerstoneTools[`${toolName}Tool`]
        )
      ) {
        cornerstoneTools.addToolForElement(
          this.canvas,
          cornerstoneTools[`${toolName}Tool`]
        )
      }
      cornerstoneTools.setToolActiveForElement(this.canvas, toolName, {
        mouseButtonMask: 1,
        synchronizationContext: synchronizer
      })
    },
    disabledViewPortToolSync(synchronizer, toolName) {
      synchronizer.enabled = false
      synchronizer.remove(this.canvas)
      cornerstoneTools.setToolDisabledForElement(this.canvas, toolName)
    },
    activeImageSync(synchronizer) {
      synchronizer.add(this.$refs.canvas)
      synchronizer.enabled = true
      return false
    },
    disabledImageSync(synchronizer) {
      synchronizer.remove(this.$refs.canvas)
      synchronizer.enabled = false
      return false
    },
    activeAnnotationSync(synchronizer) {
      this.AnnotationSync = synchronizer
      synchronizer.add(this.$refs.canvas)
      synchronizer.enabled = true
    },
    disabledAnnotationSync(synchronizer) {
      this.AnnotationSync = null
      synchronizer.enabled = false
      synchronizer.remove(this.$refs.canvas)
      this.setAllToolsPassive()
    },
    getToolSate() {
      const toolROITypes = [
        'Probe',
        'EllipticalRoi',
        'RectangleRoi',
        'ArrowAnnotate',
        'Length',
        'CobbAngle',
        'Angle',
        'Bidirectional',
        'FreehandRoi'
      ]
      for (let i = 0; i < toolROITypes.length; i++) {
        const toolROIType = toolROITypes[i]
        const toolROIData = JSON.stringify(
          cornerstoneTools.getToolState(this.canvas, toolROIType)
        )

        if (toolROIData !== undefined) {
          this.allROIToolData[toolROITypes[i]] = JSON.parse(toolROIData)
        }
      }
    }

  }
}
</script>

<style lang="scss" scoped>
  .context-menu-wrapper{
    position: absolute;
    ul{
      list-style: none;
      margin: 0px;
      padding: 0px;
      background: #343333;
      color: #fff;
      margin: 0;
      border: 1px solid #2a2a2a;
      border-radius: 3px;
      height: auto;
      min-height: 50px;
      line-height: 1.5em;
      width:80px;
      box-sizing: border-box;
    }
    .menu{
      li {
        padding: 2px 5px;
        position: relative;
        border-bottom: 1px solid #666;
        div{
          padding: 5px;
        }
      }
      .submenu{
        position: absolute;
        left: 77px;
        top: -1px;
        background: #343333;
        color: #fff;
        display: none;
        li {
          padding: 2px 5px;
          border-bottom: 1px solid #666;
          div{
            padding: 5px;
          }
        }
      }

    }
    .menu li:hover{
      background-color: #ff5722;
      .submenu{
        display:block;
      }
    }
    .menu_active{
      cursor: pointer;
    }
    .menu_disabled{
      cursor: not-allowed;
    }

  }
.info-series {
  position: absolute;
  left: 10px;
  top: 10px;
  text-align: left;
  color: #ddd;
  font-size: 12px;
  /* z-index: 1; */
}
.info-image {
  position: absolute;
  left: 10px;
  bottom: 10px;
  text-align: left;
  color: #ddd;
  font-size: 12px;
  /* z-index: 1; */
}

.info-subject {
  position: absolute;
  right: 15px;
  top: 10px;
  text-align: right;
  color: #ddd;
  font-size: 12px;
  /* z-index: 1; */
}
.info-instance {
  position: absolute;
  right: 15px;
  bottom: 10px;
  text-align: right;
  color: #ddd;
  font-size: 12px;
  /* z-index: 1; */
}

.load-indicator {
  position: absolute;
  left: 10px;
  top: 10px;
  text-align: left;
  /* z-index: 1; */
}

.magnifyTool {
  border: 2px solid #ffffff;
  border-radius: 50%;
  display: none;
  cursor: none;
}

.menu__item {
  display: block;
  line-height: 20px;
  text-align: center;
  margin: 10px;
  cursor: default;
}
.menu__item:hover {
  color: #ff0000;
}

.menu {
  height: auto;
  width: auto;
  position: absolute;
  font-size: 14px;
  text-align: left;
  border-radius: 10px;
  border: 1px solid #c21111;
  background-color: #ffffff;
}

li:hover {
  background-color: #e0e0e2;
  color: white;
}
.msg-div {
    position: absolute;
    z-index: 10;
    background-color: rgba(255, 255, 255, 0.5);
    color: #000;
    padding: 5px 20px;
  }
</style>
