<template>
  <div class="read-page-container">
    <!-- 检查列表 -->
    <div class="left-panel">
      <div class="study-info">
        <study-list ref="studyList" :isComparison="isComparison" @selectFile="selectFile" />
      </div>
    </div>

    <!-- 图像 -->
    <div class="middle-panel">

      <file-viewer ref="fileViewer" :isComparison.sync="isComparison" @toggleImage="toggleImage"
        @selectFile="selectFile" @replaceImage="replaceImage" />
    </div>
  </div>
</template>

<script>
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
import StudyList from './components/study-list'
import FileViewer from './components/file-viewer'
export default {
  name: 'NoneDicoms',
  components: {
    StudyList,
    FileViewer
  },
  data() {
    return {
      isComparison: false
    }
  },

  mounted() {
    if (this.$route.query.TokenKey) {
      store.dispatch('user/setToken', this.$route.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
  },
  methods: {
    toggleImage(obj) {
      this.$refs['studyList'].activeImage(obj)
    },
    selectFile(obj) {
      if (obj.fileInfo && obj.fileList && obj.studyId) {
        this.$refs['fileViewer'].setActiveCanvasImages(obj)
        return
      }
    },
    replaceImage(obj) {
      this.$refs['studyList'].replaceImage(obj)
    }
  }
}
</script>

<style lang="scss" scoped>
.read-page-container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  background-color: #444;
  padding: 5px;

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

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

  .left-panel {
    display: flex;
    width: 230px;
    border: 1px solid #727272;
    color: #fff;

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

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

    .study-info {
      width: 100%;
      border-left: 1px solid #727272;
    }
  }

  .middle-panel {
    flex: 1;
    border: 1px solid #727272;
    margin: 0 5px;
  }

  // .right-panel {
  //   width: 400px;
  //   border: 1px solid #727272;
  //   padding: 0 10px;
  //   overflow-y: auto;

  //   .text-info {
  //     display: flex;
  //     align-items: center;
  //     justify-content: space-between;
  //     color: #ddd;
  //   }
  // }

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

  ::v-deep .el-dialog__body {
    padding: 20px 20px 0 20px;
    height: calc(100% - 70px);
  }

  .el-dialog__header {
    position: relative;
  }

  .full-dialog-container {
    ::v-deep .is-fullscreen .el-dialog__body {
      height: calc(100% - 70px);
    }
  }
}
</style>
