<template>
  <div
    class="viewport_container"
    :class="['item',activeIndex === index?'item_active':'']"
    @mouseup="sliderMouseup"
  >
    <div :id="`viewport${index}`" ref="viewportCanvas" style="height: 100%;width:100%" />
    <!-- 序列信息 -->
    <div 
      v-if="seriesInfo.taskBlindName"
      class="seriesInfo_wrapper"
      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
    >
      <h2 v-if="isReadingShowSubjectInfo" class="taskInfo_container">
        {{ subjectCode }} {{ seriesInfo.taskBlindName }}
      </h2>
      <div v-if="index === 1 || index === 2">
        Series: #{{ seriesInfo.seriesNumber }}
      </div>
      <div v-if="index !== 4">Image: #{{ `${seriesInfo.imageIdIndex + 1} / ${seriesInfo.imageMaxLength}` }}</div>
      <div v-if="index === 1 || index === 2">{{ seriesInfo.modality }}</div>
      <div v-if="index === 3">{{ ctSeriesInfo ? ctSeriesInfo.modality + ' / ' + seriesInfo.modality : seriesInfo.modality }}</div>
      <div v-if="index === 4">MIP</div>
    </div>
    <!-- 描述信息 -->
    <div
      v-if="seriesInfo.description && (index === 1 || index === 2)"
      class="descInfo_wrapper"
      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
    >
      <div>{{ seriesInfo.description }}</div>
    </div>

    <!-- 图像信息  -->
    <div
      v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
      class="imageInfo_wrapper_l"
      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
    >
      <div v-show="mousePosition.index.length > 0">
        Pos: {{ mousePosition.index[0] }}, {{ mousePosition.index[1] }}, {{ mousePosition.index[2] }}
      </div>
      <div v-if="(seriesInfo.modality === 'CT' || seriesInfo.modality === 'DR' || seriesInfo.modality === 'CR') && mousePosition.value">
        HU: {{ mousePosition.value }}
      </div>
      <div v-else-if="(seriesInfo.modality === 'PT' && mousePosition.value)">
        SUVbw(g/ml): {{ digitPlaces === -1 ?mousePosition.value.toFixed(3) :mousePosition.value.toFixed(digitPlaces) }}
      </div>
      <div v-else-if="mousePosition.value">
        Density: {{ mousePosition.value }}
      </div>
      <div v-if="index === 1 || index === 2">
        W*H: {{ imageInfo.size }}
      </div>

      <!-- <div v-if="index === 1 || index === 2">Zoom: {{ imageInfo.zoom }}</div> -->
    </div>
    <div
      v-if="seriesInfo.description && (index === 1 || index === 2 || index === 3)"
      class="imageInfo_wrapper_r"
      :style="{color:index%2 == 1 ? '#ddd' : '#666'}"
    >
      <div v-show="imageInfo.location && index !== 3 ">Location: {{ `${imageInfo.location} mm` }}</div>
      <div v-show="seriesInfo.sliceThickness && index !== 3">Slice Thickness: {{ `${Number(seriesInfo.sliceThickness).toFixed(2)} mm` }}</div>
      <div v-show="imageInfo.wwwc ">WW/WL: {{ imageInfo.wwwc }}</div>
    </div>
    <div v-if="index !== 4" ref="sliderBox" class="slider_box" :style="{background: index === 2?'#ddd':'#333'}" @click.stop="goViewer($event)">
      <div :style="{top: sliderBoxHeight + '%'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="sliderMousedown($event)" />
    </div>
    <div style="position: absolute;left: 50%;top: 30px;color: #f44336;transform: translateX(-50%);">
      {{ markers.top }}
    </div>
    <div style="position: absolute;top: 50%;right: 15px;color: #f44336;transform: translateY(-50%);">
      {{ markers.right }}
    </div>

    <div style="position: absolute;left: 50%;bottom: 30px;color: #f44336;transform: translateX(-50%);">
      {{ markers.bottom }}
    </div>
    <div style="position: absolute;top: 50%;left: 15px;color: #f44336;transform: translateY(-50%);">
      {{ markers.left }}
    </div>
    <div v-if="presetName" class="color_bar">
      <canvas ref="colorBarCanvas" />
    </div>
    <div v-if="index === 4" id="rotateBar" ref="rotateBar" class="rotate_slider_box" @click.stop="clickRotate($event)">
      <div id="rotateSlider" :style="{left: rotateBarLeft + 'px'}" class="box" @click.stop.prevent="() => {return}" @mousedown.stop="rotateBarMousedown($event)" />
    </div>
  </div>
</template>
<script>
import {
  getRenderingEngine,
  metaData,
  utilities,
  // getOrCreateCanvas,
  Enums } from '@cornerstonejs/core'

import {
  utilities as toolsUtilities,
  annotation,
  Enums as toolsEnums
  // cursors
} from '@cornerstonejs/tools'
import vtkColorMaps from '@kitware/vtk.js/Rendering/Core/ColorTransferFunction/ColorMaps'
import { vec3, mat4 } from 'gl-matrix'
import html2canvas from 'html2canvas'
const { getColormap } = utilities.colormap
const {
  VOLUME_NEW_IMAGE
  // VOLUME_LOADED,
  // IMAGE_VOLUME_MODIFIED,
  // VOLUME_VIEWPORT_NEW_VOLUME
} = Enums.Events

var renderingEngine
var viewport
export default {
  name: 'Viewport',
  props: {
    activeIndex: {
      type: Number,
      default: 0
    },
    index: {
      // 1:ct  2:pet  3:fusion  4:mip
      type: Number,
      required: true
    },
    isReadingShowSubjectInfo: {
      type: Boolean,
      default: false
    },
    seriesInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    ctSeriesInfo: {
      type: Object,
      default() {
        return null
      }
    },
    renderingEngineId: {
      type: String,
      required: true
    },
    viewportId: {
      type: String,
      required: true
    },
    volume: {
      type: Object,
      default() {
        return {}
      }
    },
    measureDatas: {
      type: Array,
      default() {
        return []
      }
    },
    rgbPresetName: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      subjectCode: '',
      mousePosition: { index: [], value: null, modalityUnit: '', world: [], ctVal: null, ptVal: null },
      digitPlaces: -1,
      imageInfo: {
        zoom: null,
        size: null,
        location: null,
        sliceThickness: null,
        wwwc: null
      },
      sliderBoxHeight: 0,

      sliderInfo: {
        oldB: null,
        oldM: null,
        isMove: false
      },
      rotateAngle: 0,
      rotateBarLeft: 0,
      rotateBarInfo: {
        initX: null,
        initLeft: null,
        isMove: false
      },
      isFirstRender: true,
      defaultWindowLevel: {},
      presetName: '',
      orientationMarkers: [],
      originalMarkers: [],
      markers: { top: '', right: '', bottom: '', left: '' }
    }
  },
  watch: {
    activeIndex: {
      handler(v) {
        console.log('activeIndex ', v)
      }
    },
    rgbPresetName: {
      immediate: true,
      handler(v) {
        this.presetName = v || ''
        if (!this.presetName) return
        this.$nextTick(() => {
          this.renderColorBar(this.presetName)
        })
      }
    }
  },
  mounted() {
    const digitPlaces = parseInt(this.$route.query.digitPlaces)
    this.digitPlaces = digitPlaces === -1 ? 2 : digitPlaces
    this.subjectCode = this.$route.query.subjectCode
    var element = document.getElementById(`viewport${this.index}`)
    element.addEventListener(VOLUME_NEW_IMAGE, this.handleVolumeNewImage)
    element.addEventListener(Enums.Events.CAMERA_MODIFIED, this.handleCameraModified)
    element.addEventListener(Enums.Events.VOI_MODIFIED, this.handleVOIModified)
    element.addEventListener(toolsEnums.Events.MOUSE_WHEEL, this.handletoolsMouseWheel)

    element.addEventListener('CORNERSTONE_TOOLS_MOUSE_MOVE', this.handleMouseMove)

    element.addEventListener('mouseleave', this.handleMouseLeave)

    document.addEventListener('mouseup', () => {
      this.sliderMouseup()
      if (this.index === 4) {
        this.rotateBarMouseup()
      }
    })
    document.addEventListener('mousemove', (e) => {
      this.sliderMousemove(e)
      if (this.index === 4) {
        this.rotateBarMousemove(e)
      }
    })
  },
  methods: {
    handleVolumeNewImage(e) {
      const { imageIndex } = e.detail
      if (this.viewportId === e.detail.viewportId && this.index !== 4) {
        this.seriesInfo.imageIdIndex = imageIndex
      }
      renderingEngine = getRenderingEngine(this.renderingEngineId)
      viewport = renderingEngine.getViewport(this.viewportId)

      if (viewport) {
        var zoom = viewport.getZoom()

        if (zoom) {
          this.imageInfo.zoom = zoom.toFixed(4)
        }
        var imageId = viewport.getCurrentImageId()
        if (imageId) {
          const imagePlaneModule = metaData.get('imagePlaneModule', imageId)
          this.imageInfo.size = `${imagePlaneModule.columns}*${imagePlaneModule.rows}`
          this.imageInfo.location = imagePlaneModule.sliceLocation
          this.getOrientationMarker()
          this.sliderBoxHeight = imageIndex * 100 / (this.seriesInfo.imageMaxLength - 1)
        }
        let properties = viewport.getProperties()
        if (this.index === 3) {
          properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID`)
        }

        if (properties && properties.voiRange) {
          var { lower, upper } = properties.voiRange
          const windowWidth = upper - lower
          const windowCenter = (upper + lower) / 2
          this.defaultWindowLevel.windowWidth = windowWidth
          this.defaultWindowLevel.windowCenter = windowCenter
          this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
        }
        if (this.presetName) {
          this.renderColorBar(this.presetName)
        }
      }

      if (this.index !== 4 && viewport) {
        const width = viewport.element.clientWidth
        const height = viewport.element.clientHeight
        let worldPoint = null
        if (width && height && viewport.canvasToWorld) {
          worldPoint = viewport.canvasToWorld([width / 2, height / 2])
        }
        if ((!worldPoint || worldPoint.length < 3) && viewport.getCamera) {
          worldPoint = viewport.getCamera()?.focalPoint
        }
        if (Array.isArray(worldPoint) && worldPoint.length >= 3) {
          this.$emit('fusionSlicePointChange', {
            viewportId: this.viewportId,
            worldPoint: [...worldPoint]
          })
        }
      }
    },
    getOrientationMarker() {
      // eslint-disable-next-line no-unused-vars
      const { viewUp, viewPlaneNormal } = viewport.getCamera()

      const viewRight = vec3.create()
      vec3.cross(viewRight, viewUp, viewPlaneNormal)

      const columnCosines = [-viewUp[0], -viewUp[1], -viewUp[2]]
      const rowCosines = viewRight
      const rowString = toolsUtilities.orientation.getOrientationStringLPS(rowCosines)
      const columnString = toolsUtilities.orientation.getOrientationStringLPS(columnCosines)
      const oppositeRowString = toolsUtilities.orientation.invertOrientationStringLPS(rowString)
      const oppositeColumnString = toolsUtilities.orientation.invertOrientationStringLPS(columnString)
      this.markers.top = oppositeColumnString
      this.markers.right = rowString
      this.markers.bottom = columnString
      this.markers.left = oppositeRowString
      this.orientationMarkers = [oppositeColumnString, rowString, columnString, oppositeRowString]
      if (this.originalMarkers.length === 0) {
        this.originalMarkers = [...this.orientationMarkers]
      }
    },
    rotateMarkers(type) {
      var markers = [...this.orientationMarkers]
      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()
    },
    resetMarks() {
      this.orientationMarkers = [...this.originalMarkers]
      this.setMarkers()
    },
    setMarkers() {
      var markers = [...this.orientationMarkers]
      for (const key in this.markers) {
        var v = markers.shift(0)
        this.markers[key] = v
      }
    },
    handleCameraModified(e) {
      renderingEngine = getRenderingEngine(this.renderingEngineId)
      viewport = renderingEngine.getViewport(this.viewportId)
      if (!viewport) return

      var zoom = viewport.getZoom()
      if (!zoom) return
      this.imageInfo.zoom = zoom.toFixed(4)
      // console.log(e)
    },
    handleVOIModified(e) {
      renderingEngine = getRenderingEngine(this.renderingEngineId)
      viewport = renderingEngine.getViewport(this.viewportId)
      if (!viewport) return

      let properties = viewport.getProperties()
      if (this.index === 3) {
        // const volumeId = viewport.getVolumeId()
        const volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID2`
        properties = viewport.getProperties(volumeId)
      }
      if (properties && properties.voiRange) {
        var { lower, upper } = properties.voiRange
        const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
          lower,
          upper
        )
        this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
        // 当为PT或融合视口或MIP视口时，触发外部联动 (排除纯CT视口)
        if (this.index !== 1) {
          this.$emit('upperRangeChange', Math.round(upper))
        }
      }
    },
    handleMouseMove(e) {
      if (this.index !== 4) {
        const { currentPoints } = e.detail
        const worldPoint = currentPoints.world
        const { imageData } = this.volume
        const index = imageData.worldToIndex(worldPoint)

        index[0] = Math.floor(index[0])
        index[1] = Math.floor(index[1])
        index[2] = Math.floor(index[2])
        this.mousePosition.index = index

        // this.mousePosition.value = this.getValue(this.volume, worldPoint)
      }
    },
    getValue(volume, worldPos) {
      const { dimensions, scalarData, imageData } = volume

      const index = imageData.worldToIndex(worldPos)

      index[0] = Math.floor(index[0])
      index[1] = Math.floor(index[1])
      index[2] = Math.floor(index[2])

      if (!utilities.indexWithinDimensions(index, dimensions)) {
        return
      }

      const yMultiple = dimensions[0]
      const zMultiple = dimensions[0] * dimensions[1]
      // const scalarIndex = index[2] * zMultiple + index[1] * yMultiple + index[0];
      const value = scalarData[index[2] * zMultiple + index[1] * yMultiple + index[0]]

      return value
    },
    handleMouseLeave(e) {
      this.mousePosition.index = []
      this.mousePosition.value = null
    },
    goViewer(e) {
      var height = e.offsetY * 100 / this.$refs['sliderBox'].clientHeight
      this.sliderBoxHeight = height
      var index = Math.trunc(this.seriesInfo.imageMaxLength * this.sliderBoxHeight / 100)
      if (this.seriesInfo.imageIdIndex !== index) {
        this.scroll(index)
      }
    },

    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
      e.stopImmediatePropagation()
      e.stopPropagation()
      e.preventDefault()
    },
    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
      const height = PX * 100 / boxHeight
      var index = Math.trunc(this.seriesInfo.imageMaxLength * height / 100)
      index = index > this.seriesInfo.imageMaxLength ? this.seriesInfo.imageMaxLength : index < 0 ? 0 : index
      this.sliderBoxHeight = height
      if (this.seriesInfo.imageIdIndex !== index) {
        this.scroll(index)
      }
    },
    handletoolsMouseWheel(e) {
      const { viewportId, wheel } = e.detail
      if (viewportId === 'PET_MIP_CORONAL') {
        const container = document.getElementById('rotateBar')
        const slider = document.getElementById('rotateSlider')
        const containerWidth = container.offsetWidth
        const sliderWidth = slider.offsetWidth
        const maxX = containerWidth - sliderWidth
        const { direction } = wheel

        var x = Math.trunc(30 * ((containerWidth - sliderWidth) / 360))
        if (direction > 0 && (this.rotateBarLeft + x) > maxX) {
          this.rotateBarLeft = x - (containerWidth - sliderWidth - this.rotateBarLeft)
        } else if (direction < 0 && (this.rotateBarLeft < x)) {
          this.rotateBarLeft = containerWidth - (x - this.rotateBarLeft + sliderWidth)
        } else {
          this.rotateBarLeft = x * direction + this.rotateBarLeft
        }
      }
    },
    rotateBarMousemove(e) {
      // 滚动旋转
      if (!this.rotateBarInfo.isMove) return
      const container = document.getElementById('rotateBar')
      const slider = document.getElementById('rotateSlider')
      const containerWidth = container.offsetWidth
      const sliderWidth = slider.offsetWidth
      let x = Math.trunc(e.clientX - this.rotateBarInfo.initX + this.rotateBarInfo.initLeft)
      if (x < 0) x = 0
      if (x > containerWidth - sliderWidth) x = containerWidth - sliderWidth
      const deltaX = x - this.rotateBarLeft
      const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180)
      this.rotate(angle)
      this.rotateBarLeft = x
    },
    rotateBarMousedown(e) {
      console.log('rotateBarMousedown')
      this.rotateBarInfo.initLeft = e.srcElement.offsetLeft
      this.rotateBarInfo.initX = e.clientX
      this.rotateBarInfo.isMove = true
      e.stopImmediatePropagation()
      e.stopPropagation()
      e.preventDefault()
    },
    rotate(angle) {
      renderingEngine = getRenderingEngine(this.renderingEngineId)
      viewport = renderingEngine.getViewport(this.viewportId)
      const camera = viewport.getCamera()
      const { viewUp, position, focalPoint } = camera
      const [cx, cy, cz] = focalPoint
      const [ax, ay, az] = [0, 0, 1]
      const newPosition = [0, 0, 0]
      const newFocalPoint = [0, 0, 0]
      const newViewUp = [0, 0, 0]

      const transform = mat4.identity(new Float32Array(16))
      mat4.translate(transform, transform, [cx, cy, cz])
      mat4.rotate(transform, transform, angle, [ax, ay, az])
      mat4.translate(transform, transform, [-cx, -cy, -cz])
      vec3.transformMat4(newPosition, position, transform)
      vec3.transformMat4(newFocalPoint, focalPoint, transform)

      mat4.identity(transform)
      mat4.rotate(transform, transform, angle, [ax, ay, az])
      vec3.transformMat4(newViewUp, viewUp, transform)

      viewport.setCamera({
        position: newPosition,
        viewUp: newViewUp,
        focalPoint: newFocalPoint
      })

      viewport.render()
    },
    clickRotate(e) {
      // console.log('clickRotate')
      const container = document.getElementById('rotateBar')
      const containerWidth = container.offsetWidth
      const slider = document.getElementById('rotateSlider')
      const sliderWidth = slider.offsetWidth
      const x = Math.trunc(e.offsetX)
      const deltaX = x - this.rotateBarLeft
      const angle = Math.sin((deltaX * (360 / (containerWidth - sliderWidth))) * Math.PI / 180)
      this.rotate(angle)
      this.rotateBarLeft = x
    },
    async scroll(index) {
      renderingEngine = getRenderingEngine(this.renderingEngineId)
      viewport = renderingEngine.getViewport(this.viewportId)
      const actorEntries = viewport.getActors()

      if (!actorEntries) {
        return
      }
      // const delta = index - this.seriesInfo.imageIdIndex
      await utilities.jumpToSlice(viewport.element, {
        imageIndex: index,
      });
      // toolsUtilities.scroll(viewport, {
      //   delta,
      //   volumeId: actorEntries.uid
      // })
      renderingEngine.render()
    },
    rotateBarMouseup(e) {
      this.rotateBarInfo.isMove = false
    },
    sliderMouseup(e) {
      this.sliderInfo.isMove = false
    },
    setAnnotation(imageId, element) {
      this.measureDatas.forEach(item => {
        if (item.OtherMeasureData) {
          var { metadata, annotationUID } = item.OtherMeasureData
          var { referencedImageId } = metadata
          console.log(annotationUID, annotation.state.getAnnotation(annotationUID))
          if (!annotation.state.getAnnotation(annotationUID) && referencedImageId === imageId) {
            annotation.state.addAnnotation(item.OtherMeasureData, element)
          }
        }
      })
    },
    setPreset(presetName) {
      this.presetName = presetName
    },
    renderColorBar(presetName) {
      var colorMap = null
      if (presetName === 'hsv') {
        colorMap = vtkColorMaps.getPresetByName(presetName)
      } else {
        colorMap = getColormap(presetName)
      }
      const rgbPoints = colorMap.RGBPoints
      const canvas = this.$refs.colorBarCanvas
      if (!canvas) return
      const ctx = canvas.getContext('2d')
      const canvasWidth = 160
      const canvasHeight = 5
      const rectWidth = 160
      const rectHeight = canvasHeight
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      const gradient = ctx.createLinearGradient(0, 0, rectWidth, 0)
      for (let i = 0; i < rgbPoints.length; i += 4) {
        let position = 0
        if (rgbPoints[0] === -1) {
          position = (rgbPoints[i] + 1) / 2
        } else {
          position = rgbPoints[i]
        }
        const color = `rgb(${parseInt(rgbPoints[i + 1] * 255)}, ${parseInt(rgbPoints[i + 2] * 255)}, ${parseInt(rgbPoints[i + 3] * 255)})`
        gradient.addColorStop(position, color)
      }
      ctx.fillStyle = gradient
      ctx.fillRect(0, 0, rectWidth, rectHeight)
    },
    setColorMap(presetName) {
      const renderingEngine = getRenderingEngine(this.renderingEngineId)
      const viewport = renderingEngine.getViewport(this.viewportId)
      let volumeId = `cornerstoneStreamingImageVolume:PT_VOLUME_ID`
      viewport.setProperties({ colormap: { name: presetName } }, volumeId)
      viewport.render()
    },
    setWwWc() {
      let properties = viewport.getProperties()
      if (this.index === 3) {
        properties = viewport.getProperties(`cornerstoneStreamingImageVolume:PT_VOLUME_ID2`)
      }
      if (properties && properties.voiRange) {
        var { lower, upper } = properties.voiRange
        // console.log(lower, upper)
        // const windowWidth = upper - lower
        // const windowCenter = (upper + lower) / 2
        const { windowWidth, windowCenter } = utilities.windowLevel.toWindowLevel(
          lower,
          upper
        )
        this.imageInfo.wwwc = `${Math.round(windowWidth)}/${Math.round(windowCenter)}`
        // 当为PT或融合视口或MIP视口时，触发外部联动 (排除纯CT视口)
        if (this.index !== 1) {
          this.$emit('upperRangeChange', Math.round(upper))
        }
      }
    },
    async getScreenshots() {
      const divForDownloadViewport = document.querySelector(
        `div[data-viewport-uid="FUSION_AXIAL"]`
      )
      // const divForDownloadViewport = document.querySelector(
      //   '.viewport_container'
      // )

      var canvas = await html2canvas(divForDownloadViewport)
      var pictureBaseStr = canvas.toDataURL('image/png', 1)
      return pictureBaseStr
    }
  }
}
</script>
<style lang="scss" scoped>
.viewport_container{
  width:100%;
  height: 100%;
  .seriesInfo_wrapper {
    position: absolute;
    left: 10px;
    top: 10px;
    text-align: left;
    font-size: 12px;
    z-index: 1;
    .taskInfo_container{
      color:#f44336;
      padding: 5px 0px;
      margin: 0;
    }
  }
  .descInfo_wrapper{
    position: absolute;
    right: 20px;
    top: 10px;
    text-align: right;
    font-size: 12px;
    z-index: 1;
  }
  .imageInfo_wrapper_l{
    position: absolute;
    left: 10px;
    bottom: 5px;
    text-align: left;
    font-size: 12px;
    z-index: 1;
  }
  .imageInfo_wrapper_r{
    position: absolute;
    right: 40px;
    bottom: 5px;
    text-align: right;
    font-size: 12px;
    z-index: 1;
  }
  .slider_box{
    position: absolute;
    right: 1px;
    height: calc(100% - 120px);
    transform: translateY(-50%);
    top: calc(50% - 30px);
    width: 10px;
    background: #333;
    cursor: pointer;
    .box{
      z-index:10;
      background: #9e9e9e;
      height: 20px;
      width: 100%;
      position: absolute;
      top: 0;
      cursor: move
    }
  }
  .color_bar{

    position: absolute;

    // transform:translateY(-50%);
    transform: rotate(-90deg);
    transform-origin: right;
    left: -150px;
    top: 30%;
    // transform-origin: top left;
    z-index: 1;
    // background: #f44336;
  }
  .rotate_slider_box{
    position: absolute;
    width: 380px;
    height: 10px;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    cursor: pointer;
    .box{
      z-index:10;
      background: #9e9e9e;
      height: 100%;
      width: 20px;
      position: absolute;
      top: 0;
      cursor: move
    }
  }
  // .my_slider_box:after{
  //   content: '';
  //   position: absolute;
  //   bottom: -20px;
  //   left: 0;
  //   height: 20px;
  //   width: 100%;
  //   background: #333;
  // }
}
</style>
