<template>
  <div class="dicom-viewer-wrapper">
    <div class="dicom-viewer-container">
      <div class="dicom-tools">
        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:layout')}`" placement="bottom">
          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
            <div class="dropdown">
              <div class="icon">
                <svg-icon icon-class="layout" class="svg-icon" />
                <i class="el-icon-arrow-down" style="color: #fff" />
              </div>
              <!-- 布局 -->
              <!-- <div class="text">{{ $t('trials:reading:button:layout') }}<i class="el-icon-caret-bottom" /></div> -->
              <div class="dropdown-content layout-content">
                <ul style="width: 50px">
                  <li class="flex_row" @click.stop="changeLayout('A')">
                    <div class="layout_box_1_1">A</div>
                  </li>
                  <li class="flex_row" @click.stop="changeLayout('A|A')">
                    <div class="layout_box_1_1">A</div>
                    <div class="layout_box_1_1">A</div>
                  </li>
                  <li v-if="isReadingTaskViewInOrder === 1" class="flex_row" @click.stop="changeLayout('A|B')">
                    <div class="layout_box_1_1">A</div>
                    <div class="layout_box_1_1">B</div>
                  </li>

                  <li class="flex_column" @click.stop="changeLayout('A|A|A|A')">
                    <div style="flex: 1; display: flex; width: 100%">
                      <div class="layout_box_1_2">A</div>
                      <div class="layout_box_1_2">A</div>
                    </div>
                    <div style="flex: 1; display: flex; width: 100%">
                      <div class="layout_box_1_2">A</div>
                      <div class="layout_box_1_2">A</div>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:wwwc')}`" placement="bottom">
          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
            <div class="dropdown">
              <div class="icon" data-tool="Wwwc" :class="[activeTool === 'Wwwc' ? 'tool_active' : '']"
                @click.prevent="setToolActive('Wwwc', false)">
                <svg-icon icon-class="reverse" class="svg-icon" />
                <i class="el-icon-arrow-down" style="color: #fff" />
              </div>
              <!-- 调窗 -->
              <!-- <div class="text">{{ $t('trials:reading:button:wwwc') }}<i class="el-icon-caret-bottom" /></div> -->
              <div class="dropdown-content">
                <ul style="width: 165px; padding: 0 10px">
                  <li v-for="item in wwwcArr" :key="item.label">
                    <a href="#" @click.prevent="setDicomCanvasWwwc(item)">
                      <div v-if="item.wc" style="
                          display: flex;
                          flex-direction: row;
                          justify-content: space-between;
                        ">
                        <div>{{ item.label }}</div>
                        <div>{{ item.ww }}/{{ item.wc }}</div>
                      </div>
                      <div v-else style="text-align: left">
                        {{ item.label }}
                      </div>
                    </a>
                    <!-- <div
                    v-if="item.val === 1"
                    class="divider"
                  >
                    W/L {{ $t('trials:reading:title:preset') }}
                  </div> -->
                    <el-divider v-if="item.val === 1" class="divider" content-position="center">{{ `
                      ${$t('trials:reading:title:preset')}` }}</el-divider>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-tooltip>

        <!-- <div class="tool-wrapper">

          <div
            class="icon"
            data-tool="WwwcRegion"
            :class="[activeTool==='WwwcRegion'?'tool_active':'']"

            @click.prevent="setToolActive('WwwcRegion',false)"
          >
            <svg-icon icon-class="wwwcRegion" class="svg-icon" />
          </div>
          <div class="text">区域调窗</div>

        </div> -->
        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:reverseColor')}`"
          placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" :class="[activeTool === 'reversecolor' ? 'tool_active' : '']"
              @click.prevent="toggleInvert">
              <svg-icon icon-class="reversecolor" class="svg-icon" />
            </div>
            <!-- 反色 -->
            <!-- <div class="text">{{ $t('trials:reading:button:reverseColor') }}</div> -->
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:zoom')}`" placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" :class="[activeTool === 'Zoom' ? 'tool_active' : '']" data-tool="Zoom"
              @click.prevent="setToolActive('Zoom', false)">
              <svg-icon icon-class="magnifier" class="svg-icon" />
            </div>
            <!-- 缩放 -->
            <div class="text">{{ $t('trials:reading:button:zoom') }}</div>
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:move')}`" placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" :class="[activeTool === 'Pan' ? 'tool_active' : '']" data-tool="Pan"
              @click.prevent="setToolActive('Pan', false)">
              <svg-icon icon-class="move" class="svg-icon" />
            </div>
            <!-- 移动 -->
            <div class="text">{{ $t('trials:reading:button:move') }}</div>
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:rotate')}`" placement="bottom">
          <div class="tool-wrapper" @click.stop="showPanel($event)" @mouseleave="handleMouseout">
            <!-- @click.prevent="setToolActive('Rotate',false)" -->
            <div class="dropdown">
              <div class="icon" data-tool="Rotate" :class="[activeTool === 'Rotate' ? 'tool_active' : '']">
                <svg-icon icon-class="rotate" class="svg-icon" />
                <i class="el-icon-arrow-down" style="color: #fff" />
              </div>
              <!-- 旋转 -->
              <div class="text">
                {{ $t('trials:reading:button:rotate')
                }}<i class="el-icon-caret-bottom" />
              </div>
              <div class="dropdown-content">
                <ul style="width: 100px; padding: 0 10px">
                  <li v-for="rotate in rotateArr" :key="rotate.label" style="text-align: left">
                    <a href="#" @click.prevent="setDicomCanvasRotate(rotate.val)">{{ rotate.label }}</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="fitType === 1
          ? `${$t('trials:reading:button:fitWindow')}`
          : `${$t('trials:reading:button:fitImage')}`
          " placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" @click.prevent="
              fitToType(fitType === 1 ? 'fitToWindow' : 'fitToImage')
              ">
              <svg-icon v-if="fitType === 1" icon-class="fitToWindow" class="svg-icon" />
              <svg-icon v-else icon-class="fitToImage" class="svg-icon" />
            </div>
            <div class="text">
              {{
                fitType === 1
                  ? $t('trials:reading:button:fitWindow')
                  : $t('trials:reading:button:fitImage')
              }}
            </div>
          </div>
        </el-tooltip>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:imageIndexSync')}`"
          placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" :class="[isScrollSync ? 'tool_active' : '']" @click.prevent="setImageIndexSync">
              <i v-if="isScrollSync" class="el-icon-lock svg-icon" />
              <i v-else class="el-icon-unlock svg-icon" />
            </div>
            <!-- 同步 -->
            <div class="text">
              {{ $t('trials:reading:button:imageIndexSync') }}
            </div>
          </div>
        </el-tooltip>
        <!--
        <div class="tool-wrapper">
          <div
            class="icon"
            @click.prevent="fitToType('fitToImage')"
          >
            <svg-icon icon-class="fitToImage" class="svg-icon" />
          </div>
          <div class="text">适应图像</div>
        </div> -->
        <el-tooltip class="item" effect="dark" :content="`${$t('trials:reading:button:screenShot')}`"
          placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" @click.prevent="saveImage">
              <svg-icon icon-class="image" class="svg-icon" />
            </div>
            <!-- 截屏 -->
            <div class="text">{{ $t('trials:reading:button:screenShot') }}</div>
          </div>
        </el-tooltip>

        <div v-for="tool in measuredTools" :key="tool.toolName">
          <el-tooltip class="item" effect="dark" placement="bottom">
            <div slot="content">
              <div v-if="tool.disabledReason">
                <h4 style="margin: 0; padding-bottom: 2px">{{ tool.text }}</h4>
                <br />{{ tool.disabledReason }}
              </div>
              <div v-else>{{ tool.text }}</div>
            </div>
            <div class="tool-wrapper">
              <div class="icon" :class="[activeTool === tool.toolName ? 'tool_active' : '']"
                :style="{ cursor: tool.isDisabled ? 'not-allowed' : 'pointer' }" :data-tool="tool.toolName"
                @click.prevent="setToolActive(tool.toolName, true, $event)" @mouseenter="enter($event, tool.toolName)">
                <svg-icon :icon-class="tool.icon" class="svg-icon" />
              </div>
              <div class="text">{{ tool.text }}</div>
            </div>
          </el-tooltip>
          <!-- <div v-else class="tool-wrapper">
            <div
              class="icon"
              :class="[activeTool===tool.toolName?'tool_active':'']"
              :style="{cursor:tool.isDisabled?'not-allowed':'pointer'}"
              :data-tool="tool.toolName"
              @click.prevent="setToolActive(tool.toolName,true,$event)"
              @mouseenter="enter($event,tool.toolName)"
            >
              <svg-icon :icon-class="tool.icon" class="svg-icon" />
            </div>
            <div class="text">{{ tool.text }}</div>
          </div> -->
        </div>

        <el-tooltip class="item" effect="dark" :content="`${$t('trials:dicom-show:Eraser')}`" placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" :class="[activeTool === 'Eraser' ? 'tool_active' : '']" data-tool="Zoom"
              @click.prevent="setToolActive('Eraser', false)">
              <svg-icon icon-class="clear" class="svg-icon" />
            </div>
            <!-- 缩放 -->
            <div class="text">{{ $t('trials:dicom-show:Eraser') }}</div>
          </div>
        </el-tooltip>
        <div class="tool-frame">
          <!-- 第一帧 -->
          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:firstframe')" placement="bottom">
            <div class="icon" @click.prevent="scrollPage(-99999)">
              <svg-icon icon-class="firstframe" class="svg-icon" />
            </div>
          </el-tooltip>
          <!-- 上一帧 -->
          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:previousframe')" placement="bottom">
            <div class="icon" @click.prevent="scrollPage(-1)">
              <svg-icon icon-class="previousframe" class="svg-icon" />
            </div>
          </el-tooltip>
          <!-- 播放/暂停 -->
          <el-tooltip class="item" effect="dark" :content="clipPlaying
            ? $t('trials:dicom-show:stop')
            : $t('trials:dicom-show:play')
            " placement="bottom">
            <div v-if="clipPlaying" class="icon" @click.prevent="toggleClipPlay(false)">
              <svg-icon icon-class="stop" class="svg-icon" />
            </div>
            <div v-else class="icon" @click.prevent="toggleClipPlay(true)">
              <svg-icon icon-class="play" class="svg-icon" />
            </div>
          </el-tooltip>
          <!-- 下一帧 -->
          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:nextframe')" placement="bottom">
            <div class="icon" @click.prevent="scrollPage(1)">
              <svg-icon icon-class="nextframe" class="svg-icon" />
            </div>
          </el-tooltip>
          <!-- 最后一帧 -->
          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:lastframe')" placement="bottom">
            <div class="icon" @click.prevent="scrollPage(99999)">
              <svg-icon icon-class="lastframe" class="svg-icon" />
            </div>
          </el-tooltip>

          <el-tooltip class="item" effect="dark" :content="$t('trials:dicom-show:speed')" placement="bottom">
            <select v-model="fps" class="select-wrapper" :disabled="clipPlaying" @change="setDicomCanvasfps($event)">
              <option :value="5">5</option>
              <option :value="10">10</option>
              <option :value="15">15</option>
              <option :value="20">20</option>
              <option :value="25">25</option>
              <option :value="30">30</option>
            </select>
          </el-tooltip>
        </div>
        <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:reset')" placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" @click.prevent="resetViewport">
              <svg-icon icon-class="refresh" class="svg-icon" />
            </div>
            <div class="text">{{ $t('trials:reading:button:reset') }}</div>
          </div>
        </el-tooltip>
        <el-tooltip v-if="
          trialCriterion.ImageUploadEnum > 0 && currentReadingTaskState < 2
        " v-hasPermi="['role:ir']" class="item" effect="dark" :content="$t('trials:reading:button:upload')"
          placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" @click.prevent="openUploadImage('upload')">
              <i class="el-icon-upload2 svg-icon" />
            </div>
            <div class="text">{{ $t('trials:reading:button:upload') }}</div>
          </div>
        </el-tooltip>
        <el-tooltip v-if="trialCriterion.ImageDownloadEnum > 0" v-hasPermi="[
          'role:ir',
          'role:mim',
          'role:mc',
          'role:pm',
          'role:apm',
          'role:ea',
          'role:qa',
        ]" class="item" effect="dark" :content="$t('trials:reading:button:download')" placement="bottom">
          <div class="tool-wrapper">
            <div class="icon" @click.prevent="openUploadImage('download')">
              <i class="el-icon-download svg-icon" />
            </div>
            <div class="text">{{ $t('trials:reading:button:download') }}</div>
          </div>
        </el-tooltip>

        <div style="margin-left: auto">
          <div style="padding: 5px">
            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:handbooks')" placement="bottom"
              v-if="(isExistsManual || isHaveKeyFile) && currentReadingTaskState < 2">
              <div class="tool-wrapper">
                <div class="icon" @click.prevent="previewManuals()">
                  <svg-icon icon-class="constitution" class="svg-icon" />
                </div>
                <div class="text">{{ $t('trials:reading:button:handbooks') }}</div>
              </div>
            </el-tooltip>
            <!-- 临床数据 -->
            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:clinicalData')"
              placement="bottom" v-if="isExistsClinicalData">
              <div class="tool-wrapper">
                <div class="icon" @click.prevent="previewCD">
                  <svg-icon icon-class="documentation" class="svg-icon" />
                </div>
                <div class="text">{{ $t('trials:reading:button:clinicalData') }}</div>
              </div>
            </el-tooltip>
            <!-- 个性化配置 -->
            <el-tooltip class="item" effect="dark" :content="$t('trials:reading:button:customCfg')" placement="bottom">
              <div class="tool-wrapper">
                <div class="icon" @click.prevent="previewConfig">
                  <svg-icon icon-class="individuation" class="svg-icon" />
                </div>
                <div class="text">{{ $t('trials:reading:button:customCfg') }}</div>
              </div>
            </el-tooltip>
          </div>
        </div>
      </div>
      <div class="dicom-viewers">
        <div ref="container" class="viewer-container" :class="['box', `box_${layoutRow}_${layoutCol}`]">
          <div v-for="i in maxCanvas" :key="i" :class="[
            'item',
            i - 1 === currentDicomCanvasIndex ? 'item_active' : '',
          ]" :data-index="i - 1" :style="i - 1 === currentDicomCanvasIndex ? cornerstoneStyle : {}"
            @click="activateDicomCanvas(i - 1)">
            <dicom-canvas v-if="canvasW" :ref="`dicomCanvas${i - 1}`"
              :style="{ width: fullScreenIndex === i - 1 ? fullScreenWidth : canvasW, height: fullScreenIndex === i - 1 ? fullScreenHeight : canvasH }"
              :canvas-index="i - 1" :is-active="i - 1 === currentDicomCanvasIndex" :is-scroll-sync="isScrollSync"
              :is-reading-show-subject-info="isReadingShowSubjectInfo"
              :is-reading-task-view-in-order="isReadingTaskViewInOrder"
              :current-dicom-canvas-index="currentDicomCanvasIndex" :custom-wwc-tpl="customWwcTpl"
              @setMeasureData="setMeasureData" @modifyMeasureData="modifyMeasureData" @scrollSync="scrollSync"
              @selectViewCanvas="selectViewCanvas" @setCornerstoneStyle="setCornerstoneStyle(i - 1)"
              @moveMeasureData="moveMeasureData" />
          </div>
        </div>
        <div ref="form-container" class="form-container">
          <!-- 激活canvas测量数据 -->
          <MeasurementList ref="measurementList" :ise-c-r-f-show-in-dicom-reading="IseCRFShowInDicomReading"
            :is-reading-show-subject-info="isReadingShowSubjectInfo" @handleReadingChart="handleReadingChart" />
        </div>
      </div>
    </div>

    <el-dialog v-if="customWwc.visible" :visible.sync="customWwc.visible" :close-on-click-modal="false"
      :title="customWwc.title" width="400px" custom-class="base-dialog-wrapper">
      <CustomWwwcForm @close="customWwc.visible = false" @setWwwc="setWwwc" />
    </el-dialog>

    <el-dialog v-if="personalConfigDialog.visible" :visible.sync="personalConfigDialog.visible"
      :close-on-click-modal="false" :title="personalConfigDialog.title" width="600px">
      <el-tabs v-model="activeName" class="personal_config">
        <el-tab-pane :label="$t('trials:reading:tab:hotkeys')" name="1">
          <Hotkeys v-if="activeName === '1'" :reading-tool="0" @reset="resetHotkeyList" />
        </el-tab-pane>
        <el-tab-pane :label="$t('trials:reading:tab:wlTemplate')" name="2">
          <WL v-if="activeName === '2'" @getWwcTpl="getWwcTpl" />
        </el-tab-pane>
        <el-tab-pane :label="$t('trials:reading:tab:others')" name="3">
          <Others v-if="activeName === '3'" />
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <el-dialog v-if="manualsDialog.visible" :visible.sync="manualsDialog.visible" :custom-class="isFullscreen
      ? 'manuals-full-dialog-container'
      : 'manuals-dialog-container'
      " :show-close="false" :close-on-click-modal="false" :fullscreen="isFullscreen">
      <span slot="title" class="dialog-footer">
        <span>{{ $t('trials:reading:button:handbooks') }}</span>
        <span style="position: absolute; right: 20px; font-size: 20px">
          <svg-icon :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'"
            style="margin-right: 10px; cursor: pointer" @click="isFullscreen = !isFullscreen" />
          <svg-icon icon-class="close" style="cursor: pointer" @click="manualsDialog.visible = false" />
        </span>
      </span>
      <div style="height: 100%; margin: 0">
        <Manuals :trial-id="trialId" :justKeyDoc="manualsDialog.justKeyDoc" />
        <div slot="footer" style="text-align:right;" v-if="openManuals && !ManualsClose">
          <!-- 确认 -->
          <el-button type="primary" size="mini" @click="handleSubmitKeyDoc">
            {{ $t('common:button:confirm') }}</el-button>
        </div>
      </div>
    </el-dialog>
    <!--    <button :title="$t('trials:dicom-show:Eraser')" class="btn-link" data-tool="Eraser" @click="setToolActive($event,'Eraser')">-->
    <!--      <svg-icon icon-class="clear" style="font-size:20px;" />-->
    <!--    </button>-->
    <!-- <upload-image
      v-if="uploadImageVisible"
      :visible.sync="uploadImageVisible"
      :subject-id="subjectId"
      :criterion="trialCriterion"
      :status="uploadStatus"
    /> -->
    <upload-dicom-and-nonedicom v-if="uploadImageVisible" :SubjectId="uploadSubjectId" :SubjectCode="uploadSubjectCode"
      :Criterion="uploadTrialCriterion" :visible.sync="uploadImageVisible" :VisitTaskId="taskId"
      :isReadingTaskViewInOrder="isReadingTaskViewInOrder" />
    <download-dicom-and-nonedicom v-if="downloadImageVisible" :SubjectId="uploadSubjectId"
      :SubjectCode="uploadSubjectCode" :Criterion="uploadTrialCriterion" :TaskId="taskId"
      :visible.sync="downloadImageVisible" />
  </div>
</template>
<script>
import * as cornerstone from 'cornerstone-core'
import * as cornerstoneMath from 'cornerstone-math'
import * as cornerstoneTools from 'cornerstone-tools'
import Hammer from 'hammerjs'
cornerstoneTools.external.cornerstone = cornerstone
cornerstoneTools.external.Hammer = Hammer
cornerstoneTools.external.cornerstoneMath = cornerstoneMath

// import DicomCanvas from './DicomCanvas'
import DicomCanvas from '@/views/trials/trials-panel/reading/dicoms/customize/CustomizeDicomCanvas.vue'
import MeasurementList from './CustomizeMeasurementList'
import CustomWwwcForm from './CustomWwwcForm'
import Manuals from './Manuals'
import Hotkeys from './Hotkeys'
import WL from './WL'
import Others from './Others'
import DicomEvent from './../components/DicomEvent'
import { mapGetters } from 'vuex'
import store from '@/store'
import { getDoctorShortcutKey, getUserWLTemplateList } from '@/api/user'
import uploadDicomAndNonedicom from '@/components/uploadDicomAndNonedicom'
import downloadDicomAndNonedicom from '@/components/downloadDicomAndNonedicom'
import { getCriterionReadingInfo, setReadKeyFile } from '@/api/trials'
export default {
  name: 'DicomViewer',
  components: {
    DicomCanvas,
    CustomWwwcForm,
    Hotkeys,
    WL,
    Others,
    Manuals,
    MeasurementList,
    'download-dicom-and-nonedicom': downloadDicomAndNonedicom,
    'upload-dicom-and-nonedicom': uploadDicomAndNonedicom,
  },
  props: {
    isExistsClinicalData: {
      type: Boolean,
      default: false,
    },
    isExistsNoDicomFile: {
      type: Boolean,
      default: false,
    },
    isExistsManual: {
      type: Boolean,
      required: true,
    },
    isReadKeyFile: {
      type: Boolean,
      required: true
    },
    isHaveKeyFile: {
      type: Boolean,
      required: false
    },
    isReadingShowSubjectInfo: {
      type: Boolean,
      required: true,
    },
    isReadingTaskViewInOrder: {
      type: Number,
      required: true,
    },
    IseCRFShowInDicomReading: {
      type: Boolean,
      required: true,
    },
    subjectId: {
      type: String,
      required: true,
      default: '',
    },
    trialReadingCriterionId: {
      type: String,
      required: true,
      default: '',
    },
    trialId: {
      type: String,
      required: true,
      default: '',
    },
  },
  data() {
    return {
      cornerstoneStyle: {},
      layouts: [
        { index: 0, row: 1, col: 1, name: 'A' },
        { index: 1, row: 1, col: 2, name: 'A|A' },
        { index: 2, row: 1, col: 2, name: 'A|B' },
        { index: 3, row: 2, col: 2, name: 'A|A|A|A' },
        // { index: 2, row: 2, col: 1 },
        // { index: 3, row: 2, col: 2 }
      ],
      rotateArr: [
        { label: this.$t('trials:reading:button:rotateDefault'), val: 1 }, // 默认值
        { label: this.$t('trials:reading:button:rotateVertical'), val: 2 }, // 垂直翻转
        { label: this.$t('trials:reading:button:rotateHorizontal'), val: 3 }, // 水平翻转
        { label: this.$t('trials:reading:button:rotateTurnLeft'), val: 4 }, // 左转90度
        { label: this.$t('trials:reading:button:rotateTurnRight'), val: 5 }, // 右转90度
      ],
      maxCanvas: 1,
      layoutRow: 1,
      layoutCol: 1,
      currentDicomCanvasIndex: 0,
      currentDicomCanvas: {
        toolState: {
          clipPlaying: false,
        },
      },
      colormapsList: [],
      rotateList: [],
      colorList: [],
      wwwcList: [],
      canvasW: null,
      canvasH: null,
      activeTool: '',
      CriterionType: 0,
      measuredTools: [
        // 直径测量
        {
          toolName: 'Length',
          text: this.$t('trials:reading:button:length'),
          icon: 'length',
          isDisabled: false,
          disabledReason: '',
        },
        // 长短径测量
        {
          toolName: 'Bidirectional',
          text: this.$t('trials:reading:button:bidirectional'),
          icon: 'bidirection',
          isDisabled: false,
          disabledReason: '',
        },
        // 矩形工具
        {
          toolName: 'RectangleRoi',
          text: this.$t('trials:reading:button:rectangle'),
          icon: 'rectangle',
          isDisabled: false,
          disabledReason: '',
        },
        // 圆形工具
        {
          toolName: 'CircleRoi',
          text: this.$t('trials:reading:button:elliptical'),
          icon: 'oval',
          isDisabled: false,
          disabledReason: '',
        },
        // 箭头工具
        {
          toolName: 'ArrowAnnotate',
          text: this.$t('trials:reading:button:arrowAnnotate'),
          icon: 'arrow',
          isDisabled: false,
          disabledReason: '',
        },
      ],

      fitType: 0,
      isDisabledTool: false,
      canvasObj: {},
      wwwcArr: [],
      defaultWwwc: [
        {
          label: this.$t('trials:reading:button:wwwcDefault'),
          val: -1,
          ww: null,
          wc: null,
        }, // 默认值
        {
          label: this.$t('trials:reading:button:wwwcCustom'),
          val: 0,
          ww: null,
          wc: null,
        }, // 自定义
        {
          label: this.$t('trials:reading:button:wwwcRegion'),
          val: 1,
          ww: null,
          wc: null,
        }, // 区域窗宽
        { label: 'CT Brain', wc: 40, ww: 80 },
        { label: 'CT Lungs', wc: -400, ww: 1500 },
        { label: 'CT Abdomen', wc: 60, ww: 400 },
        { label: 'CT Liver', wc: 40, ww: 400 },
        { label: 'CT Bone', wc: 300, ww: 1500 },
      ],
      activeSeries: {},
      seriesStack: [],
      // trialId: "",
      isScrollSync: false,
      imageIndexSync: {
        sourceCanvas: '',
        targetCanvas: [],
      },
      isFirstRender: false,
      customWwc: { visible: false, title: null }, // 自定义调窗
      personalConfigDialog: {
        visible: false,
        title: this.$t('trials:reading:button:customCfg'),
      }, // 个性化配置
      layout: '',
      isFirstNotLinked: false,
      hotKeyList: [],
      activeName: '1',
      customWwcTpl: [],
      isFullscreen: false,
      manualsDialog: { visible: false, justKeyDoc: false },
      clipPlaying: false,
      fps: 15,
      trialCriterion: {},
      // 上传
      downloadImageVisible: false,
      uploadImageVisible: false,
      uploadSubjectId: null,
      uploadSubjectCode: null,
      uploadTrialCriterion: {},
      uploadStatus: 'upload',
      taskId: '',
      fullScreenIndex: -1,
      fullScreenWidth: window.innerWidth - 570 + 'px',
      fullScreenHeight: window.innerHeight - 128 + 'px',

      ManualsClose: false
    }
  },

  computed: {
    ...mapGetters(['visitTaskList', 'currentReadingTaskState']),
    openManuals() {
      return !this.isReadKeyFile && this.isHaveKeyFile
    }
  },
  watch: {
    openManuals: {
      handler() {
        if (this.openManuals) this.previewManuals(true)
      },
      immediate: true
    },
    currentReadingTaskState: {
      immediate: true,
      handler(val) {
        if (
          val &&
          this.currentDicomCanvasIndex &&
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`]
        ) {
          this.canvasObj[this.currentDicomCanvasIndex].readingTaskState = val
          if (this.activeTool) {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolEnabled(this.activeTool)
            this.activeTool = ''
          }
        }
      },
    },
    currentDicomCanvasIndex: {
      immediate: true,
      handler(v) {
        if (
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`] &&
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
        ) {
          this.clipPlaying =
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].toolState.clipPlaying
        } else {
          this.clipPlaying = false
          this.fps = 15
        }
      },
    },
  },
  mounted() {
    this.getTrialCriterion()
    this.getHotKeys()
    this.getWwcTpl()
    // cornerstone.imageCache.setMaximumSizeBytes(0)

    // const maximumSizeInBytes = 1024 * 1024 * 1024 * 3 // 1 GB
    // const maximumSizeInBytes = 1024 * 1024 * 500
    // cornerstone.imageCache.setMaximumSizeBytes(maximumSizeInBytes)
    this.customWwc = {
      visible: false,
      title: this.$t('trials:reading:dagTitle:wwwcCustom'),
    }
    this.CriterionType = parseInt(localStorage.getItem('CriterionType'))
    if (this.CriterionType === 10) {
      this.measuredTools = [
        {
          toolName: 'ArrowAnnotate',
          text: this.$t('trials:reading:button:arrowAnnotate'),
          icon: 'arrow',
          isDisabled: false,
          disabledReason: '',
        },
        {
          toolName: 'RectangleRoi',
          text: this.$t('trials:reading:button:rectangle'),
          icon: 'rectangle',
          isDisabled: false,
          disabledReason: '',
        },
      ]
    } else if (this.CriterionType === 17) {
      this.measuredTools = [
        {
          toolName: 'Length',
          text: this.$t('trials:reading:button:length'),
          icon: 'length',
          isDisabled: false,
          disabledReason: '',
        },
        {
          toolName: 'RectangleRoi',
          text: this.$t('trials:reading:button:rectangle'),
          icon: 'rectangle',
          isDisabled: false,
          disabledReason: '',
        },
        {
          toolName: 'ArrowAnnotate',
          text: this.$t('trials:reading:button:arrowAnnotate'),
          icon: 'arrow',
          isDisabled: false,
          disabledReason: '',
        },
      ]
    }
    this.rotateList[0] = '1'
    this.colorList[0] = ''
    this.wwwcList[0] = '1'
    this.colormapsList = cornerstone.colors.getColormapsList()
    this.currentDicomCanvas = this.$refs['dicomCanvas0']
      ? this.$refs['dicomCanvas0'][0]
      : ''
    // this.trialId = this.$router.currentRoute.query.trialId;
    this.setCanvasStyle()
    window.addEventListener('resize', this.setCanvasStyle)

    // DicomEvent.$on('updateImage', (instanceId) => {

    //   for (let i = 0; i < this.maxCanvas; i++) {
    //     var stack = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
    //     if (stack.studyId) {
    //       this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].updateImage(instanceId)
    //     }
    //   }
    // })
    DicomEvent.$on('getMeasureData', () => {
      for (let i = 0; i < this.maxCanvas; i++) {
        var stack = this.$refs[`dicomCanvas${i}`][0].stack
        if (stack.visitTaskId) {
          this.$refs[`dicomCanvas${i}`][0].getMeasureData()
        }
      }
      console.log('getMeasureData')
    })

    DicomEvent.$on('getScreenshots', (callback) => {
      var base64Str =
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].getScreenshots()
      callback(base64Str)
      console.log('getScreenshots')
    })
    DicomEvent.$on('imageLocation', (measuredData) => {
      if (!measuredData) return
      this.imageLocation(measuredData)
      console.log('imageLocation')
    })
    DicomEvent.$on('setReadingState', (readingTaskState) => {
      this.canvasObj[this.currentDicomCanvasIndex].readingTaskState =
        readingTaskState
      if (this.activeTool) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].setToolEnabled(this.activeTool)
        this.activeTool = ''
      }
    })
    DicomEvent.$on('PGWC3Active', (res) => {
      this.setToolActive('ArrowAnnotate', true, null, 'open')
    })
    DicomEvent.$on('loadImageStacks', (seriesList) => {
      this.loadImageStacks(seriesList)
      console.log('loadImageStacks')
    })
    DicomEvent.$on('loadLinkedImageStack', (seriesInfo) => {
      this.loadLinkedImageStack(seriesInfo)
      console.log('loadLinkedImageStack')
    })
  },
  beforeDestroy() {
    DicomEvent.$off('updateImage')
    DicomEvent.$off('getMeasureData')
    DicomEvent.$off('imageLocation')
    DicomEvent.$off('setReadingState')
    DicomEvent.$off('loadImageStacks')
    DicomEvent.$off('loadLinkedImageStack')
  },
  methods: {
    handleReadingChart(e) {
      this.$emit('handleReadingChart', e)
    },
    async handleSubmitKeyDoc() {
      try {
        let data = {
          TrialCriterionId: this.$router.currentRoute.query.TrialReadingCriterionId,
        }
        let res = await setReadKeyFile(data)
        if (res.IsSuccess) {
          this.manualsDialog.visible = false
          this.ManualsClose = true
        }
      } catch (err) {
        console.log(err)
      }
    },
    getTrialCriterion() {
      getCriterionReadingInfo({
        TrialId: this.trialId,
        TrialReadingCriterionId: this.trialReadingCriterionId,
      })
        .then((res) => {
          this.trialCriterion = res.Result
        })
        .catch(() => { })
    },
    openUploadImage(status) {
      const idx = this.visitTaskList.findIndex((i) => i.IsCurrentTask)
      if (idx > -1) {
        this.taskId = this.visitTaskList[idx].VisitTaskId
      }
      this.uploadSubjectCode = localStorage.getItem("subjectCode")
      this.uploadSubjectId = localStorage.getItem("subjectId")
      this.uploadTrialCriterion = this.trialCriterion
      this.uploadStatus = status
      this[`${status}ImageVisible`] = true
    },
    async getWwcTpl() {
      // const loading = this.$loading({ fullscreen: true })
      try {
        let res = await getUserWLTemplateList()
        this.customWwcTpl = []
        res.Result.map((i) => {
          this.customWwcTpl.push({
            label: i.TemplateName,
            wc: i.WL,
            ww: i.WW,
          })
        })
        this.wwwcArr = [...this.defaultWwwc, ...this.customWwcTpl]
      } catch (e) {
        console.log(e)
      }
    },
    async getHotKeys() {
      // const loading = this.$loading({ fullscreen: true })
      try {
        let res = await getDoctorShortcutKey({ imageToolType: 0 })
        res.Result.map((item) => {
          this.hotKeyList.push({
            id: item.Id,
            altKey: item.AltKey,
            ctrlKey: item.CtrlKey,
            shiftKey: item.ShiftKey,
            metaKey: item.MetaKey,
            key: item.Keyboardkey,
            code: item.Code,
            text: item.Text,
            shortcutKeyEnum: item.ShortcutKeyEnum,
          })
        })
        this.bindHotKey()
      } catch (e) {
        console.log(e)
      }
    },
    resetHotkeyList(arr) {
      this.hotKeyList = []

      arr.map((item) => {
        this.hotKeyList.push({
          id: item.id,
          altKey: item.keys.controlKey.altKey,
          ctrlKey: item.keys.controlKey.ctrlKey,
          shiftKey: item.keys.controlKey.shiftKey,
          metaKey: item.keys.controlKey.metaKey,
          key: item.keys.controlKey.key,
          code: item.keys.controlKey.code,
          text: item.keys.text,
          shortcutKeyEnum: item.label,
        })
      })

      // const loading = this.$loading({ fullscreen: true })
      // getDoctorShortcutKey({ imageToolType: 0 }).then(res => {
      //   res.Result.map(item => {
      //     this.hotKeyList.push({ id: item.Id, altKey: item.AltKey, ctrlKey: item.CtrlKey, shiftKey: item.ShiftKey, metaKey: item.MetaKey, key: item.Keyboardkey, code: item.Code, text: item.Text, shortcutKeyEnum: item.ShortcutKeyEnum })
      //   })
      //   loading.close()
      // }).catch(() => {
      //   loading.close()
      // })
    },
    bindHotKey() {
      var container = this.$refs['container']
      // window.addEventListener
      container.addEventListener('keydown', (event) => {
        console.log(event)
        event.preventDefault()
        var idx = this.hotKeyList.findIndex(
          (i) =>
            i.code === event.code &&
            i.ctrlKey === event.ctrlKey &&
            i.shiftKey === event.shiftKey &&
            i.altKey === event.altKey
        )
        if (idx === -1) return
        var shortcutKeyEnum = this.hotKeyList[idx].shortcutKeyEnum
        console.log(shortcutKeyEnum)
        if (shortcutKeyEnum === 1) {
          // 前一图像视口
          this.selectViewCanvas(-1)
        } else if (shortcutKeyEnum === 2) {
          // 后一图像视口
          this.selectViewCanvas(1)
        } else if (shortcutKeyEnum === 3) {
          // 上一个序列
          const series =
            this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].series
          DicomEvent.$emit('selectSeries', {
            seriesId: series.seriesId,
            studyId: series.studyId,
            offset: -1,
          })
        } else if (shortcutKeyEnum === 4) {
          // 下一个序列
          const series =
            this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].series
          DicomEvent.$emit('selectSeries', {
            seriesId: series.seriesId,
            studyId: series.studyId,
            offset: 1,
          })
        } else if (shortcutKeyEnum === 5) {
          // 上一张图像
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].scrollPage(-1)
        } else if (shortcutKeyEnum === 6) {
          // 下一张图像
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].scrollPage(1)
        } else if (shortcutKeyEnum === 7) {
          // 向左旋转
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
            false,
            false,
            -90,
            4
          )
        } else if (shortcutKeyEnum === 8) {
          // 向右旋转
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
            false,
            false,
            90,
            5
          )
        } else if (shortcutKeyEnum === 9) {
          // 水平翻转
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
            true,
            false,
            0,
            3
          )
        } else if (shortcutKeyEnum === 10) {
          // 垂直翻转
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
            false,
            true,
            0,
            2
          )
        } else if (shortcutKeyEnum === 11) {
          // 放大
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setZoomScale(1)
        } else if (shortcutKeyEnum === 12) {
          // 缩小
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setZoomScale(0)
        } else if (shortcutKeyEnum === 13) {
          // 适应图像
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].fitToImage()
        } else if (shortcutKeyEnum === 14) {
          // 适应窗口
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].fitToWindow()
        } else if (shortcutKeyEnum === 15) {
          // 截图
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].saveImage()
        } else if (shortcutKeyEnum === 16) {
          // 反色
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].toggleInvert()
        } else if (shortcutKeyEnum === 17) {
          // 窗宽/窗位
          var wwwcArrIdx =
            this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
              .wwwcArrIdx
          var wwwcArr =
            this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].wwwcArr
          if (wwwcArrIdx + 1 === wwwcArr.length) {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].wwwcArrIdx = 0
          } else {
            ++this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
              .wwwcArrIdx
          }
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(
            wwwcArr[wwwcArrIdx].ww,
            wwwcArr[wwwcArrIdx].wc
          )
        } else if (shortcutKeyEnum === 18) {
          // 重置
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].resetViewport()
        } else if (shortcutKeyEnum === 19) {
          // 显示或隐藏标记
          if (
            this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
              .readingTaskState < 2
          ) {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setMeasureDataVisible()
          }
        }
      })
    },
    resetViewport() {
      this.$refs[
        `dicomCanvas${this.currentDicomCanvasIndex}`
      ][0].resetViewport()
    },
    previewConfig() {
      this.activeName = '1'
      this.personalConfigDialog.visible = true
    },
    setCornerstoneStyle(i) {
      if (this.layoutCol === 1 && this.layoutRow === 1) {
        this.fullScreenIndex = -1
        return
      }
      if (this.cornerstoneStyle.position) {
        this.cornerstoneStyle = {}
        this.setCanvasStyle()
        this.fullScreenIndex = -1
      } else {
        this.cornerstoneStyle = {
          position: 'absolute',
          top: '70px',
          left: '205px',
          right: '350px',
          zIndex: 10,
        }
        this.fullScreenIndex = this.currentDicomCanvasIndex
      }
      this.$nextTick(() => {
        for (var i = 0; i < this.maxCanvas; i++) {
          this.$refs[`dicomCanvas${i}`][0].reloadCanvas()
        }
      })
    },
    loadImageStacks(seriesList) {
      if (seriesList.length === 0) {
        const idx = this.visitTaskList.findIndex((i) => i.IsCurrentTask)
        if (idx > -1) {
          store.dispatch(
            'reading/setLastCanvasTaskId',
            this.visitTaskList[idx].VisitTaskId
          )
        }

        return
      }
      var l = seriesList.length > 1 ? 'A|B' : 'A'
      this.layout = l
      var i = this.layouts.findIndex((i) => i.name === l)
      var layout = this.layouts[i]
      this.layoutRow = layout.row
      this.layoutCol = layout.col
      this.setCanvasStyle()
      this.maxCanvas = layout.row * layout.col
      this.$nextTick(() => {
        const elements = document.querySelectorAll('.cornerstone-element')
        Array.from(elements).forEach((element) => {
          cornerstone.enable(element)
          cornerstone.resize(element)
        })
        seriesList.map((series, index) => {
          this.canvasObj[index] = series
          if (series.isCurrentTask) {
            this.currentDicomCanvasIndex = index
            this.activeSeries = series

            // this.$refs['measurementList'].initPage(series)
            store.dispatch('reading/setActiveSeries', series)
            store.dispatch('reading/setLastCanvasTaskId', series.visitTaskId)
          }
          let s = Object.assign({}, series)
          this.$refs[`dicomCanvas${index}`][0].loadImageStack(s)

          if (this.activeTool) {
            if (series.isCurrentTask && series.readingTaskState < 2) {
              this.$nextTick(() => {
                this.$refs[`dicomCanvas${index}`][0].setToolPassive(
                  this.activeTool
                )
              })
            } else {
              this.$nextTick(() => {
                this.$refs[`dicomCanvas${index}`][0].setToolEnabled(
                  this.activeTool
                )
              })
            }
            this.activeTool = ''
          }
        })
      })
    },
    loadImageStack(dicomSeries) {
      this.clipPlaying = false
      this.fps = 15
      this.canvasObj[this.currentDicomCanvasIndex] = dicomSeries
      if (this.activeTool) {
        // dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2
        if (dicomSeries.isCurrentTask) {
          this.$nextTick(() => {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolPassive(this.activeTool)
          })
        } else {
          this.$nextTick(() => {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolEnabled(this.activeTool)
          })
        }
        this.activeTool = ''
      }
      this.$nextTick(() => {
        this.activeSeries = dicomSeries
        let s = Object.assign({}, dicomSeries)
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].loadImageStack(s)
        // this.$refs['measurementList'].initPage(dicomSeries)
        store.dispatch('reading/setActiveSeries', dicomSeries)
        if (this.currentDicomCanvasIndex === this.maxCanvas - 1) {
          store.dispatch('reading/setLastCanvasTaskId', dicomSeries.visitTaskId)
        }
      })
    },
    loadLinkedImageStack(dicomSeries) {
      this.currentDicomCanvasIndex = dicomSeries.canvasIndex
      var canvasIndex = dicomSeries.canvasIndex
      this.canvasObj[canvasIndex] = dicomSeries
      if (this.activeTool) {
        if (dicomSeries.isCurrentTask && dicomSeries.readingTaskState < 2) {
          this.$nextTick(() => {
            this.$refs[`dicomCanvas${canvasIndex}`][0].setToolPassive(
              this.activeTool
            )
          })
        } else {
          this.$nextTick(() => {
            this.$refs[`dicomCanvas${canvasIndex}`][0].setToolEnabled(
              this.activeTool
            )
          })
        }
        this.activeTool = ''
      }
      this.$nextTick(() => {
        this.activeSeries = dicomSeries
        let s = Object.assign({}, dicomSeries)
        this.$refs[`dicomCanvas${canvasIndex}`][0].loadImageStack(s)

        store.dispatch('reading/setActiveSeries', dicomSeries)
        if (this.currentDicomCanvasIndex === this.maxCanvas - 1) {
          store.dispatch('reading/setLastCanvasTaskId', dicomSeries.visitTaskId)
        }
      })
    },
    // 给显示的画布设置显示的序列信息
    async getSeriesShowInCanvas(layout) {
      var activeSeries = Object.assign({}, this.activeSeries)
      const loading = this.$loading({ fullscreen: true })
      if (layout.name === 'A') {
        // 判断当前激活窗口是否有序列信息
        if (activeSeries) {
          this.seriesStack = [activeSeries]
          this.currentDicomCanvasIndex = 0
          store.dispatch(
            'reading/setLastCanvasTaskId',
            activeSeries.visitTaskId
          )
          await this.setCanvas(this.seriesStack)
          loading.close()
        }
      } else if (layout.name === 'A|A') {
        if (activeSeries) {
          this.seriesStack = [activeSeries, activeSeries]
          this.currentDicomCanvasIndex = 1
          store.dispatch(
            'reading/setLastCanvasTaskId',
            activeSeries.visitTaskId
          )
          await this.setCanvas(this.seriesStack)
          loading.close()
        }
      } else if (layout.name === 'A|B') {
        if (activeSeries) {
          const idx = this.visitTaskList.findIndex(
            (i) => i.VisitTaskId === activeSeries.visitTaskId
          )
          const visitTaskNum =
            idx > -1 ? this.visitTaskList[idx].VisitTaskNum : -1
          if (visitTaskNum > 0 && this.visitTaskList.length > 1) {
            var visitTaskId = ''
            if (this.CriterionType === 10) {
              const i = this.visitTaskList.findIndex(
                (i) => i.VisitTaskNum === visitTaskNum - 1
              )
              visitTaskId = this.visitTaskList[i].VisitTaskId
            } else {
              const i = this.visitTaskList.findIndex((i) => i.IsBaseLineTask)
              visitTaskId = this.visitTaskList[i].VisitTaskId
            }
            this.getFirstSeries(activeSeries, visitTaskId).then(
              async (baseSerires) => {
                this.seriesStack = [baseSerires, activeSeries]
                this.currentDicomCanvasIndex = 1
                store.dispatch(
                  'reading/setLastCanvasTaskId',
                  activeSeries.visitTaskId
                )
                await this.setCanvas(this.seriesStack)
                loading.close()
              }
            )
          } else {
            this.seriesStack = [activeSeries, activeSeries]
            this.currentDicomCanvasIndex = 1
            store.dispatch(
              'reading/setLastCanvasTaskId',
              activeSeries.visitTaskId
            )
            await this.setCanvas(this.seriesStack)
            loading.close()
          }
        }
      } else if (layout.name === 'A|A|A|A') {
        if (activeSeries) {
          this.seriesStack = [
            activeSeries,
            activeSeries,
            activeSeries,
            activeSeries,
          ]
          this.currentDicomCanvasIndex = 3
          store.dispatch(
            'reading/setLastCanvasTaskId',
            activeSeries.visitTaskId
          )
          await this.setCanvas(this.seriesStack)
          loading.close()
        }
      }
    },
    // 设置画布序列信息
    setCanvas(seriesStack) {
      return new Promise((resolve) => {
        var promiseArr = []
        for (let i = 0; i < this.maxCanvas && i < seriesStack.length; i++) {
          this.canvasObj[i] = seriesStack[i]
          let s = Object.assign({}, seriesStack[i])
          promiseArr.push(this.$refs[`dicomCanvas${i}`][0].loadImageStack(s))
        }
        Promise.all(promiseArr)
          .then(() => {
            // this.activateDicomCanvas(this.currentDicomCanvasIndex)
            resolve()
          })
          .catch(() => {
            resolve()
          })
      })
    },
    // 根据病灶标识定位图像

    // 最后一个窗口显示当前访视下病灶所在的影像序列
    // 其他窗口显示该病灶第一次出现的序列信息
    async imageLocation(obj) {
      var loading = null
      var loadImagePromises = []
      var isScrollSync = this.isScrollSync
      if (this.isScrollSync) {
        // 取消滚动同步
        this.isScrollSync = false
      }

      var activeCanvasTaskId = obj.visitTaskId

      var index = this.visitTaskList.findIndex(
        (i) => i.VisitTaskId === activeCanvasTaskId
      )
      if (index === -1) return

      var firstAddSeries = null
      var currentAddSeries = null
      if (this.isReadingTaskViewInOrder === 1) {
        // 有序
        // 获取病灶第一次出现的访视序列
        var firstAddVisitTaskId = null
        var idx = this.visitTaskList[index].MeasureData.findIndex((item) => {
          return item.OrderMarkName === obj.lesionName
        })
        if (idx > -1) {
          firstAddVisitTaskId =
            this.visitTaskList[index].MeasureData[idx].FristAddTaskId
        }
        if (firstAddVisitTaskId) {
          var taskIdx = this.visitTaskList.findIndex(
            (i) => i.VisitTaskId === firstAddVisitTaskId
          )
          if (taskIdx > -1 && !this.visitTaskList[taskIdx].IsInit) {
            loading = this.$loading({ fullscreen: true })
            if (!this.visitTaskList[taskIdx].measureDataInit) {
              await store.dispatch(
                'reading/getMeasuredData',
                this.visitTaskList[taskIdx].VisitTaskId
              )
            }
            if (!this.visitTaskList[taskIdx].studyListInit) {
              await store.dispatch('reading/getStudyInfo', {
                trialId: this.trialId,
                subjectVisitId: this.visitTaskList[taskIdx].VisitId,
                visitTaskId: this.visitTaskList[taskIdx].VisitTaskId,
                taskBlindName: this.visitTaskList[taskIdx].TaskBlindName,
              })
            }
            if (!this.visitTaskList[taskIdx].readingQuestionsInit) {
              await store.dispatch('reading/getReadingQuestionAndAnswer', {
                trialId: this.trialId,
                visitTaskId: this.visitTaskList[taskIdx].VisitTaskId,
              })
            }
            if (!this.visitTaskList[taskIdx].questionsInit) {
              await store.dispatch('reading/getDicomReadingQuestionAnswer', {
                trialId: this.trialId,
                visitTaskId: this.visitTaskList[taskIdx].VisitTaskId,
              })
            }

            await store.dispatch('reading/setStatus', {
              visitTaskId: this.visitTaskList[taskIdx].VisitTaskId,
            })
          }
          firstAddSeries = this.getSeriesInfoByMark(firstAddVisitTaskId, obj)
        }

        // 获取当前访视病灶所在的序列
        currentAddSeries = this.getSeriesInfoByMark(activeCanvasTaskId, obj)
        if (!firstAddSeries && currentAddSeries) {
          // 存在首次出现的病灶及当前病灶
          firstAddSeries = currentAddSeries
        } else if (!firstAddSeries && !currentAddSeries) {
          // 当前新病灶，且未画标记则显示当前的序列信息，不做处理
          loading && loading.close()
          return
        } else if (firstAddSeries && !currentAddSeries) {
          // 当前访视序列与首次出现病灶的序列对齐
          currentAddSeries = this.getLinkedSeries(
            firstAddSeries,
            activeCanvasTaskId
          )
          if (!currentAddSeries) {
            // 未找到对齐的，则就显示当前最后一个窗口现实的序列信息
            currentAddSeries =
              this.$refs[`dicomCanvas${this.maxCanvas - 1}`][0].series
          }
        }
      } else {
        // 无序
        currentAddSeries = this.getSeriesInfoByMark(activeCanvasTaskId, obj)
        if (!currentAddSeries) {
          // 未找到对齐的，则就显示当前最后一个窗口现实的序列信息
          currentAddSeries =
            this.$refs[`dicomCanvas${this.maxCanvas - 1}`][0].series
        }
        firstAddSeries = currentAddSeries
      }

      for (let i = 0; i < this.maxCanvas; i++) {
        if (i === this.maxCanvas - 1) {
          let s = Object.assign({}, currentAddSeries)
          loadImagePromises.push(
            this.$refs[`dicomCanvas${i}`][0].loadImageStack(s)
          )
          this.currentDicomCanvasIndex = i
          this.activeSeries = currentAddSeries
          store.dispatch('reading/setActiveSeries', currentAddSeries)
        } else {
          let s = Object.assign({}, firstAddSeries)
          loadImagePromises.push(
            this.$refs[`dicomCanvas${i}`][0].loadImageStack(s)
          )
        }
      }
      Promise.all(loadImagePromises).then(() => {
        this.isScrollSync = isScrollSync
      })
      if (loading) {
        loading.close()
      }
    },
    selectViewCanvas(offset) {
      var canvasIndex = this.currentDicomCanvasIndex + offset
      if (canvasIndex < 0 || canvasIndex >= this.maxCanvas) return
      this.activateDicomCanvas(canvasIndex)
    },
    // 根据标记获取标记所在的序列信息
    getSeriesInfoByMark(visitTaskId, obj) {
      var seriesInfo = null
      // 根据任务ID测量病灶信息
      var index = this.visitTaskList.findIndex(
        (i) => i.VisitTaskId === visitTaskId
      )

      if (index > -1) {
        var idx = -1
        if (this.CriterionType === 10) {
          idx = this.visitTaskList[index].MeasureData.findIndex(
            (item) => item.OrderMarkName === obj.lesionName
          )
        } else {
          idx = this.visitTaskList[index].MeasureData.findIndex(
            (item) =>
              item.QuestionId === obj.questionId &&
              item.RowIndex === obj.rowIndex
          )
        }
        if (
          idx > -1 &&
          this.visitTaskList[index].MeasureData[idx].MeasureData
        ) {
          var studyList = this.visitTaskList[index].StudyList
          var studyId = this.visitTaskList[index].MeasureData[idx].StudyId
          var seriesId = this.visitTaskList[index].MeasureData[idx].SeriesId
          var instanceId = this.visitTaskList[index].MeasureData[idx].InstanceId
          var studyIdx = studyList.findIndex(
            (study) => study.StudyId === studyId
          )
          if (studyIdx > -1) {
            var seriesIdx = studyList[studyIdx].SeriesList.findIndex(
              (s) => s.seriesId === seriesId
            )
            if (seriesIdx > -1) {
              var series = studyList[studyIdx].SeriesList[seriesIdx]
              let frame =
                this.visitTaskList[index].MeasureData[idx].MeasureData.frame
              // let filterStr = series.isExistMutiFrames
              //   ? `frame=${frame}&instanceId=${instanceId}`
              //   : `instanceId=${instanceId}`
              let filterStr = ''
              let n = series.instanceInfoList.findIndex(k => k.Id === instanceId)
              if (n > -1 && series.isExistMutiFrames) {
                if (series.instanceInfoList[n].NumberOfFrames > 0) {
                  filterStr = `frame=${frame}&instanceId=${instanceId}`
                } else {
                  filterStr = `instanceId=${instanceId}`
                }
              } else {
                filterStr = `instanceId=${instanceId}`
              }
              var instanceIdx = series.imageIds.findIndex((imageId) =>
                imageId.includes(filterStr)
              )
              // var instanceIdx = series.instanceList.findIndex(
              //   (imageId) => !!~imageId.indexOf(instanceId)
              // );
              if (instanceIdx > -1) {
                series.imageIdIndex = instanceIdx
                seriesInfo = series
              }
            }
          }
        }
      }
      return seriesInfo
    },
    getLinkedSeries(baseSeries, visitTaskId) {
      var index = this.visitTaskList.findIndex(
        (i) => i.VisitTaskId === visitTaskId
      )
      var visitTaskInfo = this.visitTaskList[index]
      var obj = null
      var studyList = visitTaskInfo.StudyList
      // 查找筛选描述一致
      var seriesList = studyList.map((s) => s.SeriesList).flat()
      var similarArr = seriesList.map((i, index) => {
        return {
          similar: this.strSimilarity2Percent(
            i.description,
            baseSeries.description
          ),
          index,
        }
      })
      similarArr = similarArr.sort((a, b) => {
        return b.similar - a.similar
      })
      const i =
        similarArr[0] && similarArr[0].similar > 0.85 ? similarArr[0].index : -1
      if (i > -1) {
        obj = seriesList[i]
      }
      // if (!obj) {
      //   // 描述不一致,则筛选层厚一致
      //   const idx = seriesList.findIndex(series => series.sliceThickness === baseSeries.sliceThickness)
      //   idx > -1 ? obj = seriesList[idx] : ''
      // }
      // if (!obj) {
      //   // 层厚不一致,则筛选图像数量一致
      //   const idx = seriesList.findIndex(series => series.instanceCount === baseSeries.instanceCount)
      //   idx > -1 ? obj = seriesList[idx] : ''
      // }

      if (obj) {
        const index = Math.floor(
          obj.imageIds.length *
          ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
        )
        obj.imageIdIndex = index > 0 ? index - 1 : 0
      }
      return obj
    },
    strSimilarity2Number(s, t) {
      var n = s.length
      var m = t.length
      var d = []
      var i, j, s_i, t_j, cost
      if (n === 0) return m
      if (m === 0) return n
      for (i = 0; i <= n; i++) {
        d[i] = []
        d[i][0] = i
      }
      for (j = 0; j <= m; j++) {
        d[0][j] = j
      }
      for (i = 1; i <= n; i++) {
        s_i = s.charAt(i - 1)
        for (j = 1; j <= m; j++) {
          t_j = t.charAt(j - 1)
          if (s_i === t_j) {
            cost = 0
          } else {
            cost = 1
          }
          d[i][j] = this.Minimum(
            d[i - 1][j] + 1,
            d[i][j - 1] + 1,
            d[i - 1][j - 1] + cost
          )
        }
      }
      return d[n][m]
    },
    // 两个字符串的相似程度，并返回相似度百分比
    strSimilarity2Percent(s, t) {
      var l = s.length > t.length ? s.length : t.length
      var d = this.strSimilarity2Number(s, t)
      return Number((1 - d / l).toFixed(4))
    },
    Minimum(a, b, c) {
      return a < b ? (a < c ? a : c) : b < c ? b : c
    },
    // 获取某个任务下可对齐的序列信息
    async getFirstSeries(baseSeries, visitTaskId) {
      var index = this.visitTaskList.findIndex(
        (i) => i.VisitTaskId === visitTaskId
      )
      if (!this.visitTaskList[index].studyListInit) {
        await store.dispatch('reading/getStudyInfo', {
          trialId: this.trialId,
          subjectVisitId: this.visitTaskList[index].VisitId,
          visitTaskId: this.visitTaskList[index].VisitTaskId,
          taskBlindName: this.visitTaskList[index].TaskBlindName,
        })

        await store.dispatch(
          'reading/getMeasuredData',
          this.visitTaskList[index].VisitTaskId
        )
      }
      var visitTaskInfo = this.visitTaskList[index]
      var obj = null
      var studyList = visitTaskInfo.StudyList
      // 查找筛选描述一致
      var seriesList = studyList.map((s) => s.SeriesList).flat()
      var similarArr = seriesList.map((i, index) => {
        return {
          similar: this.strSimilarity2Percent(
            i.description,
            baseSeries.description
          ),
          index,
        }
      })
      similarArr = similarArr.sort((a, b) => {
        return b.similar - a.similar
      })
      const i =
        similarArr[0] && similarArr[0].similar > 0.85 ? similarArr[0].index : -1
      if (i > -1) {
        obj = seriesList[i]
      }
      // if (!obj) {
      //   // 描述不一致,则筛选层厚一致
      //   const idx = seriesList.findIndex(series => series.sliceThickness === baseSeries.sliceThickness)
      //   idx > -1 ? obj = seriesList[idx] : ''
      // }
      // if (!obj) {
      //   // 层厚不一致,则筛选图像数量一致
      //   const idx = seriesList.findIndex(series => series.instanceCount === baseSeries.instanceCount)
      //   idx > -1 ? obj = seriesList[idx] : ''
      // }
      if (!obj) {
        // 都不符合要求， 判断是否存在层厚为5的序列，否则显示第一个检查的第一个序列
        const idx = seriesList.findIndex(
          (series) => series.isDicom && parseInt(series.instanceCount) === 5
        )
        idx > -1 ? (obj = seriesList[idx]) : (obj = seriesList[0])
      }

      if (obj) {
        const index = Math.floor(
          obj.imageIds.length *
          ((baseSeries.imageIdIndex + 1) / baseSeries.instanceCount)
        )
        obj.imageIdIndex = index > 0 ? index - 1 : 0
      }
      return obj
    },

    // 设置画布大小
    setCanvasStyle() {
      this.canvasW = (window.innerWidth - 570) / this.layoutCol + 'px'
      this.canvasH = (window.innerHeight - 130) / this.layoutRow + 'px'
    },
    // 切换布局
    changeLayout(name) {
      this.fullScreenIndex = -1
      if (this.activeTool) {
        if (
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
            .isCurrentTask &&
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
            .readingTaskState < 2
        ) {
          this.$nextTick(() => {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolPassive(this.activeTool)
          })
        } else {
          this.$nextTick(() => {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolEnabled(this.activeTool)
          })
        }
        this.activeTool = ''
      }
      this.isScrollSync = false
      this.activeSeries =
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
      this.layout = name
      var i = this.layouts.findIndex((i) => i.name === name)
      var layout = this.layouts[i]
      this.layoutRow = layout.row
      this.layoutCol = layout.col
      this.setCanvasStyle()
      this.maxCanvas = layout.row * layout.col
      this.$nextTick(() => {
        const elements = document.querySelectorAll('.cornerstone-element')
        Array.from(elements).forEach((element) => {
          cornerstone.enable(element)
          cornerstone.resize(element)
        })
        this.getSeriesShowInCanvas(layout)
        this.cornerstoneStyle = {}
        this.setCanvasStyle()
      })
    },
    // 更新画布
    updateCanvas(measureData) {
      for (let i = 0; i < this.maxCanvas; i++) {
        var stack =
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
        if (stack.studyId) {
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].removeToolState(measureData)
        }
      }
    },
    // 旋转
    setDicomCanvasRotate(value) {
      const type = parseInt(value)
      if (type === 1) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].resetRotate()
      } else if (type === 2) {
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
          false,
          true,
          0,
          type
        )
      } else if (type === 3) {
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
          true,
          false,
          0,
          type
        )
      } else if (type === 4) {
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
          false,
          false,
          -90,
          type
        )
      } else if (type === 5) {
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setRotate(
          false,
          false,
          90,
          type
        )
      }
    },
    // 激活画布
    activateDicomCanvas(index) {
      console.log('激活画布')

      if (index !== this.currentDicomCanvasIndex) {
        this.currentDicomCanvasIndex = index
        // var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
        var dicomSeries =
          this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
        this.activeSeries = dicomSeries
        for (let i = 0; i < this.maxCanvas; i++) {
          if (this.activeTool) {
            var series = this.$refs[`dicomCanvas${i}`][0].stack
            // series.isCurrentTask && series.readingTaskState < 2
            if (series.isCurrentTask) {
              this.$refs[`dicomCanvas${i}`][0].setToolPassive(this.activeTool)
            } else {
              this.$refs[`dicomCanvas${i}`][0].setToolEnabled(this.activeTool)
            }
          }
        }
        this.activeTool = ''
        this.isScrollSync = false
        this.currentDicomCanvasIndex = index
        this.currentDicomCanvas = this.$refs[`dicomCanvas${index}`]
        this.currentDicomCanvas.tabIndex = 0
        if (!this.rotateList[this.currentDicomCanvasIndex]) {
          this.rotateList[this.currentDicomCanvasIndex] = '1'
        }
        if (!this.colorList[this.currentDicomCanvasIndex]) {
          this.colorList[this.currentDicomCanvasIndex] = ''
        }
        if (!this.wwwcList[this.currentDicomCanvasIndex]) {
          this.wwwcList[this.currentDicomCanvasIndex] = '1'
        }
        // var stack = this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].stack
        this.$refs['container'].focus()
        // if (stack.studyId) {
        //   DicomEvent.$emit('toggleVisitList', stack)
        // }
        store.dispatch('reading/setActiveSeries', dicomSeries)
      }
    },
    // 鼠标移入测量工具时，判断工具是否可激活
    enter(e, toolName) {
      var i = this.measuredTools.findIndex((item) => item.toolName === toolName)
      if (i === -1) return
      var isCurrentTask =
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
          .isCurrentTask
      var readingTaskState =
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0]
          .readingTaskState
      if (!isCurrentTask) {
        this.measuredTools[i].isDisabled = true
        e.target.style.cursor = 'not-allowed'
        if (this.activeTool) {
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setToolEnabled(toolName)
          this.activeTool = ''
        }
      } else {
        this.measuredTools[i].isDisabled = false
        e.target.style.cursor = 'pointer'
      }
    },
    // 设置测量工具启用(不会对输入作出反应)
    setToolActive(toolName, isMeasuredTool, e, type) {
      console.log('setToolActive', toolName)
      if (isMeasuredTool) {
        // var i = this.measuredTools.findIndex(item => item.toolName === toolName)
        // if (i === -1 && this.measuredTools[i].isDisabled) return

        var toolObj = this.measuredTools.find((i) => i.toolName === toolName)
        if (!toolObj || toolObj.isDisabled) return
        var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
        if (
          dicomSeries.isCurrentTask &&
          isMeasuredTool &&
          dicomSeries.readingTaskState < 2
        ) {
          if (this.activeTool && !type) {
            this.measuredTools.forEach((item) => {
              this.$refs[
                `dicomCanvas${this.currentDicomCanvasIndex}`
              ][0].setToolPassive(item.toolName)
            })
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolPassive(toolName)
            // this.activeTool = ''
            this.activeTool = toolName
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolActive(toolName)
          } else {
            this.measuredTools.forEach((item) => {
              this.$refs[
                `dicomCanvas${this.currentDicomCanvasIndex}`
              ][0].setToolPassive(item.toolName)
            })
            this.activeTool = toolName
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolActive(toolName)
          }
        } else if (
          dicomSeries.isCurrentTask &&
          isMeasuredTool &&
          dicomSeries.readingTaskState >= 2
        ) {
          if (this.activeTool === toolName) {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolEnabled(toolName)
            this.activeTool = ''
          } else {
            this.activeTool = toolName
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolActive(toolName)
          }
        } else {
          if (!this.activeTool) return
          this.measuredTools.forEach((item) => {
            this.$refs[
              `dicomCanvas${this.currentDicomCanvasIndex}`
            ][0].setToolEnabled(item.toolName)
          })
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setToolEnabled(toolName)
          this.activeTool = ''
        }
      } else {
        if (this.activeTool === toolName) {
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setToolEnabled(toolName)
          this.activeTool = ''
        } else {
          this.activeTool = toolName
          this.$refs[
            `dicomCanvas${this.currentDicomCanvasIndex}`
          ][0].setToolActive(toolName)
        }
      }
    },
    // 设置测量工具禁用(不会对输入作出反应)
    setToolEnabled() {
      var dicomSeries = this.canvasObj[this.currentDicomCanvasIndex]
      if (!dicomSeries.isCurrentTask) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].setToolEnabled(this.activeTool)
        this.activeTool = ''
        return
      }
      if (this.activeTool) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].setToolEnabled(this.activeTool)
        this.activeTool = ''
      }
    },
    // 影像适应图像/适应窗口
    fitToType(toolName) {
      if (
        this.activeTool !== 'fitToWindow' &&
        this.activeTool !== 'fitToImage'
      ) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].setToolPassive(this.activeTool)
      }
      if (toolName === 'fitToWindow') {
        this.fitType = 0
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].fitToWindow()
      } else if (toolName === 'fitToImage') {
        this.fitType = 1
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].fitToImage()
      }
      this.activeTool = toolName
    },
    // 切换帧
    scrollPage(i) {
      // 获取影像是否下载完成
      const isLoaded = this.getSeriesLoadStatus()
      if (!isLoaded) return
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].scrollPage(i)
    },
    // 播放/暂停
    toggleClipPlay(isPlay) {
      // 获取影像是否下载完成
      const isLoaded = this.getSeriesLoadStatus()
      if (!isLoaded) return
      this.clipPlaying = isPlay
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(
        this.fps
      )
      this.$refs[
        `dicomCanvas${this.currentDicomCanvasIndex}`
      ][0].toggleClipPlay(isPlay)
    },
    getSeriesLoadStatus() {
      const index = this.visitTaskList.findIndex(
        (i) => i.VisitTaskId === this.activeSeries.visitTaskId
      )
      if (index === -1) return false
      const loadStatus =
        this.visitTaskList[index].StudyList[this.activeSeries.studyIndex]
          .SeriesList[this.activeSeries.seriesIndex].loadStatus
      return loadStatus
    },
    setDicomCanvasfps(event) {
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setFps(
        event.target.value
      )
    },
    // 添加标记
    setMeasureData(data) {
      this.$refs['measurementList'].setMeasuredData(data)
      this.activeTool = ''
    },
    // 修改标记
    modifyMeasureData(data) {
      data.temporary = this.readingTaskState >= 2 && !data.Id
      this.$refs['measurementList'].modifyMeasuredData(data)
      this.activeTool = ''
    },
    // 删除标记
    moveMeasureData(data) {
      this.$confirm(
        this.$t('trials:trials-list:table:isDeleted') +
        data.questionInfo.MeasureData.data.remark +
        '?'
      ).then(() => {
        this.$refs['measurementList'].moveMeasureData(data)
      })
    },
    saveImage() {
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].saveImage()
    },
    // 设置窗宽/窗位
    setDicomCanvasWwwc(v) {
      if (v.val === -1) {
        // 默认值
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetWwwc()
      } else if (v.val === 0) {
        // 自定义
        this.setCustomWwwc()
      } else if (v.val === 1) {
        // 区域窗宽
        // this.setToolActive('WwwcRegion', false)
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].setToolActive('WwwcRegion')
      } else if (v.val === 8) {
        this.$refs[
          `dicomCanvas${this.currentDicomCanvasIndex}`
        ][0].toggleInvert()
      } else {
        this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(
          v.ww,
          v.wc
        )
      }
    },
    setCustomWwwc() {
      this.customWwc.visible = true
    },
    setWwwc(v) {
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].setWwwc(
        v.ww,
        v.wc
      )
      this.customWwc.visible = false
    },
    toggleInvert() {
      // if (this.activeTool === 'reversecolor') {
      //   this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].resetWwwc()
      //   this.activeTool = ''
      // } else {
      //   this.activeTool = 'reversecolor'
      //   this.$refs[
      //     `dicomCanvas${this.currentDicomCanvasIndex}`
      //   ][0].toggleInvert()
      // }
      this.$refs[`dicomCanvas${this.currentDicomCanvasIndex}`][0].toggleInvert()
    },
    setImageIndexSync() {
      this.isScrollSync = !this.isScrollSync
    },
    scrollSync(obj) {
      for (var i = 0; i < this.maxCanvas; i++) {
        if (i !== this.currentDicomCanvasIndex) {
          this.$refs[`dicomCanvas${i}`][0].scrollPage(obj.offset)
        }
      }
    },
    showPanel(e) {
      e.currentTarget.firstChild.lastChild.style.display = 'block'
    },
    handleMouseout(e) {
      e.currentTarget.firstChild.lastChild.style.display = 'none'
    },
    // 预览临床数据
    previewCD() {
      this.$emit('previewCD')
    },
    previewNoneDicoms() {
      this.$emit('previewNoneDicoms')
    },
    previewManuals(justKeyDoc = false) {
      this.isFullscreen = false
      this.manualsDialog.visible = true
      this.manualsDialog.justKeyDoc = justKeyDoc
    },
  },
}
</script>
<style lang="scss" scoped>
.dicom-viewer-wrapper {
  height: 100%;
  padding: 5px 0px 5px 5px;
  box-sizing: border-box;

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 10px 0;
    // background-color: #383838;
    // color: #fff;
    // background-color: #DCDFE6;
  }

  .el-divider__text {
    padding: 0 10px;
    color: #fff;
    background-color: #383838;
    font-size: 12px;
    width: 80px;
  }

  .dicom-viewer-container {
    display: flex;
    flex-direction: column;
    height: 100%;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

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

  .dicom-tools {
    box-sizing: border-box;
    width: 100%;
    height: 80px;
    padding: 0 5px;
    border: 1px solid #727272;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;

    .tool-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-right: 20px;

      .icon {
        padding: 5px;
        border: 1px solid #404040;
        cursor: pointer;
        text-align: center;

        .svg-icon {
          font-size: 20px;
          color: #ddd;
        }
      }

      .text {
        position: relative;
        font-size: 12px;
        margin-top: 5px;
        color: #d0d0d0;
        display: none;
      }
    }

    .tool-frame {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      margin-right: 20px;
      border: 1px solid #404040;

      .icon {
        padding: 5px;
        border-right: 1px solid #404040;
        cursor: pointer;
        text-align: center;

        .svg-icon {
          font-size: 20px;
          color: #ddd;
        }
      }

      .select-wrapper {
        width: 60px;
        background-color: black;
        color: #ddd;
        border: none;
        font-size: 13px;
        outline: none;
      }

      .text {
        position: relative;
        font-size: 12px;
        margin-top: 5px;
        color: #d0d0d0;
        display: none;
      }
    }

    .tool_active {
      background-color: #607d8b;
    }

    .tool_disabled {
      cursor: not-allowed;
    }

    .icon:hover {
      background-color: #607d8b;
    }

    .dropdown {
      position: relative;
      display: inline-block;

      .text {
        text-align: center;
      }
    }

    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #383838;
      color: #fff;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 9999;
      font-size: 12px;

      ul {
        list-style: none;
        margin: 0;
        padding: 0;
        text-align: center;

        li {
          a {
            display: block;
            padding: 5px 0px;
          }
        }
      }

      ul li:hover a {
        background-color: #727272;
      }
    }

    // .dropdown:hover .dropdown-content {
    //   display: block;

    // }
    .layout-content ul li {
      border-top: 1px solid #ddd;
      border-left: 1px solid #ddd;
    }

    .layout-content ul .flex_row {
      // border: 1px solid #ddd;
      display: flex;
      justify-content: space-between;
      flex-direction: row;
      align-items: center;
      // padding: 2px;
      margin-bottom: 2px;
    }

    .layout-content ul .flex_column {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      align-items: center;
      margin-bottom: 2px;
    }

    .layout_box_1_1 {
      flex: 1;
      // border: 1px solid #ddd;
      line-height: 30px;
      font-size: 12px;
      text-align: center;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      // padding: 0 5px;
    }

    .layout_box_1_2 {
      flex: 1;
      // border: 1px solid #ddd;
      line-height: 15px;
      font-size: 10px;
      text-align: center;
      border-bottom: 1px solid #ddd;
      border-right: 1px solid #ddd;
      // padding: 0 5px;
    }

    .layout-content li .layout_box_1_1 :last-child {
      color: red;
    }

    // .layout_li:last-child{
    //   .layout_box{
    //     border-bottom: none;
    //   }
    // }
    .layout-content li:hover {
      cursor: pointer;
      background-color: #727272;
    }
  }

  .dicom-viewers {
    box-sizing: border-box;
    flex: 1;
    // width: 100%;
    margin-top: 5px;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;

    .form-container {
      // box-sizing: border-box;
      width: 350px;
      height: 100%;
      border: 1px solid #727272;
      // overflow-y: auto;
    }

    .viewer-container {
      box-sizing: border-box;
      flex: 1;
      height: 100%;
      border: 1px solid #727272;
    }

    .measurement-container {
      // height: 100%;
      overflow-y: auto;
    }

    .box {
      display: grid;
      box-sizing: border-box;
      height: 100%;
      padding: 0;

      .item {
        box-sizing: border-box;
        position: relative;
        border: 1px solid rgba(255, 255, 255, 0.21);
        position: relative;

        &_active {
          // border: 2px solid #ffeb3b;
          border: 1px dashed #428bca;
        }
      }
    }

    .box_1_1 {
      grid-template-columns: repeat(1, 100%); //1列，占100%
      grid-template-rows: repeat(1, 100%); //1行，占100%
    }

    .box_1_2 {
      grid-template-columns: repeat(2, 50%); //1列，占50%
      grid-template-rows: repeat(1, 100%); //1行，占100%
    }

    .box_2_1 {
      grid-template-columns: repeat(1, 100%); //1列，占100%
      grid-template-rows: repeat(2, 50%); //1行，占50%
    }

    .box_2_2 {
      grid-template-columns: repeat(2, 50%); //1列，占50%
      grid-template-rows: repeat(2, 50%); //1行，占50%
    }

    // .box_3_1{
    //   grid-template-columns: repeat(3, 100%); //1列，占100%
    //   grid-template-rows: repeat(3, 33.33%); //1行，占100%
    // }
    // .box_3_2{
    //   grid-template-columns: repeat(3, 50%); //1列，占100%
    //   grid-template-rows: repeat(3, 50%); //1行，占100%
    // }
    // .box_3_3{
    //   grid-template-columns: repeat(3, 33.33%); //1列，占100%
    //   grid-template-rows: repeat(3, 33.33%); //1行，占100%
    // }
  }

  .personal_config {
    ::v-deep .el-tabs__content {
      height: 450px;
      overflow-y: auto;
    }
  }

  ::v-deep .manuals-dialog-container {
    margin-top: 50px !important;
    width: 75%;
    height: 80%;

    .el-dialog__body {
      padding: 10px;
      height: calc(100% - 50px) !important;
    }

    .el-dialog__header {
      position: relative;
    }
  }

  ::v-deep .manuals-full-dialog-container {
    .el-dialog__body {
      padding: 10px;
      height: calc(100% - 50px) !important;
    }

    .el-dialog__header {
      position: relative;
    }
  }
}
</style>
