<template>
  <div v-loading="loading" class="img-container">
    <el-card class="box-card left">
      <div v-if="otherInfo && otherInfo.IsReadingShowSubjectInfo" class="title" style="text-align:center">
        <span>{{ otherInfo.SubjectCode }} </span>
        <span>({{ otherInfo.TaskBlindName }})</span>
      </div>
      <div style="height: 100%;" class="left-content">
        <!-- 检查层级 -->
        <div v-for="(study,i) in studyList" :key="study.CodeView">
          <div class="study-desc">
            <span>{{ study.CodeView }}</span>
            <span style="margin:0 5px">{{ study.Modality }}</span>
            <span>{{ getBodyPart(study.BodyPart) }}</span>
          </div>
          <!-- 文件层级 -->
          <div v-if="study.NoneDicomStudyFileList.length === 0" class="empty-text">
            <slot name="empty">暂无数据</slot>
          </div>
          <div v-else id="imgList" style="height:100%;">
            <div
              v-for="(item,j) in study.NoneDicomStudyFileList"
              :id="`img${item.Id}`"
              :key="item.Id"
              :class="{
                'is-boxActive': item.Id === currentFileId
              }"
              class="img-box"
              @click="selected(item,i,j,true)"
            >
              {{ `${j+1}. ${item.FileName}` }}
            </div>

          </div>
        </div>
      </div>

    </el-card>
    <!-- 预览图像 -->
    <el-card class="box-card right">
      <div style="width:100%;height: 100%;">
        <NoneDicomsViewer
          v-if="previewImage.imgList.length > 0"
          ref="previewImage"
          style="width:100%;"
          :preview-image="previewImage"
          :value="currentStudyFileIndex"
          :reading-task-state="readingTaskState"
          @selectedImg="selectedImg"
        />
      </div>

    </el-card>
  </div>

</template>

<script>
import { getReadingImageFile } from '@/api/trials'
import { changeURLStatic } from '@/utils/history.js'
import store from '@/store'
import NoneDicomsViewer from './components/NoneDicomsViewer'
export default {
  name: 'VisitReview',
  components: {
    NoneDicomsViewer
  },
  data() {
    return {
      activeName: 'first',
      currentFileId: '',
      currentStudyIndex: 0,
      currentStudyFileIndex: 0,
      pageSize: 0, // 一页展示的图片数
      previewImage: {
        imgList: [],
        index: 0, // 当前点击的图片的索引
        infinite: true, // 是否可以循环切换
        popup: true, // 弹窗的显示隐藏
        studyCode: '',
        modality: '',
        bodyPart: '',
        studyId: ''
      },
      previewVisible: false,
      studyList: [],
      loading: false,
      isRenderAssocicatedTasks: false,
      associatedList: [],
      currentTaskId: '',
      otherInfo: null,
      isReadingShowPreviousResults: false,
      trialId: '',
      subjectId: '',
      subjectCode: '',
      visistTaskId: '',
      taskBlindName: '',
      readingTaskState: 2
    }
  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.trialId = this.$router.currentRoute.query.trialId
    this.subjectCode = this.$router.currentRoute.query.subjectCode
    this.subjectId = this.$router.currentRoute.query.subjectId
    this.visitTaskId = this.$router.currentRoute.query.visitTaskId
    this.taskBlindName = this.$router.currentRoute.query.visitTaskId
    this.readingTaskState = this.$router.currentRoute.query.readingTaskState ? parseInt(this.$router.currentRoute.query.readingTaskState) : 2
    // this.trialId = '4c430000-3e2c-0016-1b56-08da66260729'
    // this.subjectCode = 'T001'
    // this.subjectId = '883c0000-3e2c-0016-ffcc-08da662bd5f3'
    // this.visitTaskId = 'b8320000-3e2c-0016-a8db-08da73a6db3e'
    // this.taskBlindName = 'B020'
    this.getNoneDicomList()
  },
  methods: {
    // 获取非Dicom检查信息
    getNoneDicomList() {
      this.loading = true
      var param = {
        subjectId: this.subjectId,
        trialId: this.trialId,
        visistTaskId: this.visitTaskId
      }
      getReadingImageFile(param).then(res => {
        this.otherInfo = res.OtherInfo
        if (res.Result.length > 0) {
          this.studyList = res.Result
          const studyIndex = this.studyList.findIndex(item => {
            return item.NoneDicomStudyFileList.length > 0
          })
          if (studyIndex > -1) {
            var fileObj = this.studyList[studyIndex]['NoneDicomStudyFileList']
            this.selected(fileObj[0], studyIndex, 0, true)
          }
        }
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    selected(file, studyIndex, fileIndex, isChangeSub = false) {
      this.currentFileId = file.Id
      this.currentStudyIndex = studyIndex
      this.previewImage.imgList = this.studyList[studyIndex].NoneDicomStudyFileList
      this.currentStudyFileIndex = fileIndex
      this.previewImage.index = fileIndex
      this.previewImage.studyCode = this.studyList[studyIndex].CodeView
      this.previewImage.bodyPart = this.studyList[studyIndex].BodyPart
      this.previewImage.modality = this.studyList[studyIndex].Modality
      this.previewImage.studyId = this.studyList[studyIndex].Id
      this.$nextTick(() => {
        if (isChangeSub) {
          this.$refs['previewImage'].selected(fileIndex)
        }
      })
    },
    selectedImg(fileIndex) {
      if (this.studyList.length > 0) {
        this.currentStudyFileIndex = fileIndex
        this.currentFileId = this.studyList[this.currentStudyIndex].NoneDicomStudyFileList[fileIndex].Id
        this.previewImage.index = fileIndex
        this.previewImage.studyCode = this.studyList[this.currentStudyIndex].CodeView
        this.previewImage.bodyPart = this.studyList[this.currentStudyIndex].BodyPart
        this.previewImage.modality = this.studyList[this.currentStudyIndex].Modality
        this.$nextTick(() => {
          const target = document.getElementById(`img${this.currentFileId}`)
          const parent = document.getElementsByClassName('left-content')[0]
          parent.scrollTop = target.offsetTop - parent.offsetTop
        })
      }
    },
    preview() {
      this.previewVisible = true
    },
    getBodyPart(bodyPart) {
      if (!bodyPart) return ''
      var separator = ','
      if (bodyPart.indexOf('|') > -1) {
        separator = '|'
      } else if (bodyPart.indexOf(',') > -1) {
        separator = ','
      } else if (bodyPart.indexOf('，') > -1) {
        separator = '，'
      }
      var arr = bodyPart.split(separator)
      var newArr = arr.map(i => {
        return this.$fd('Bodypart', i.trim())
      })
      return newArr.join(' | ')
    }
  }
}
</script>

<style lang="scss" scoped>
.img-container{
  flex: 1;
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  /deep/ .el-card__body{
    padding: 0px;
  }
}
.study-desc{
  padding: 10px 5px;
  line-height: 1;
  background-color: #ebebeb;
  font-weight: 500;
}
.left{
  width:240px;
  height: 100%;

  /deep/ .el-card__body{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .title{
    height: 40px;
    line-height: 40px;
    border: 1ppx solid;
    border: 1px solid #ebe7e7;
    padding-left: 10px;
    background-color: #4e4e4e;
    color: #ffffff;
  }
  .left-content{
    flex: 1;
    overflow-y: auto;
  }
/deep/ .el-tabs{
    height: 100%;
    display:flex;

    flex-direction: column;
  }
  /deep/ .el-tabs__header{
    height: 40px;
    padding: 0 5px;
    margin-bottom: 5px;
  }
  /deep/ .el-tabs__content{
    flex: 1;
    overflow-y: auto;
    padding: 0 5px;
  }
  .img-box{
    // position: relative;
    display: inline-block;
    box-sizing: border-box;
    border-bottom: 2px solid #f3f3f3;
    width: 180px;
    height: 50px;
    line-height: 50px;
    cursor: pointer;
    // margin-bottom: 5px;
    padding-left: 5px;
  }
  .img-box:nth-last-child(1){
    margin-bottom: 0px;
  }
  .is-boxActive {
    // border-color: #409eff;
    color: #409eff;
  }
  .is-boxActiv:after {
    opacity: 0;
  }
}
.right{
  flex: 1;
  height: 100%;
  margin-left: 10px;
  /deep/ .el-card__body{
    height: 100%;
    width: 100%;
  }
}

</style>
