<template>
  <div v-loading="loading" class="preview-wrapper">
    <div class="left-wrapper">
      <div class="basic-info">
        <span v-if="otherInfo.SubjectCode">{{ `${otherInfo.SubjectCode}` }}</span>
        <span v-if="otherInfo.ReadingNameOrTaskBlindName">({{ `${otherInfo.ReadingNameOrTaskBlindName}` }})</span>
      </div>
      <div v-if="cdList.length>0" class="basic-content">
        <div v-for="item in cdList" :key="item.Id" class="cd-wrapper">
          <div class="cd-name-wrapper">{{ item.ClinicalDataSetName }}</div>
          <template v-if="item.ClinicalUploadType===1">
            <div
              v-for="file in item.FileList"
              :key="file.Id"
              class="cd-item"
              :class="{activeBtn:file.Id === selected.id}"
              @click.prevent="preview(file,1)"
            >
              {{ file.FileName }}
            </div>
          </template>
          <div v-else class="cd-item" :class="{activeBtn:item.Id === selected.id}" @click.prevent="preview(item,0)">
            <!-- 表格 -->
            {{ $t('trials:uploadClinicalData:title:table') }}
          </div>
        </div>
      </div>
      <div v-else class="basic-content-empty">
        <span>{{ $t('trials:clinicaldara:title:nodata') }}</span>
      </div>
    </div>
    <div class="right-wrapper">
      <div v-if="selected.type===1" class="right-content">
        <iframe :src="`/static/pdfjs/web/viewer.html?file=${selected.filePath}`" width="100%" height="100%" frameborder="0" />
      </div>
      <div
        v-else-if="selected.type===0"
        style="padding:10px;overflow-y: auto;"
        class="right-content"
      >
        <!-- 既往放疗史 -->
        <h4>{{ $t('trials:uploadClinicalData:title:pastTreatment') }}</h4>
        <el-table
          :data="selected.clinicalTableData.PreviousHistoryList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <!-- 放疗部位 -->
          <el-table-column
            prop="Position"
            :label="$t('trials:uploadClinicalData:table:bodyPart')"
            width="180"
          />
          <!-- 开始日期 -->
          <el-table-column
            prop="StartTime"
            :label="$t('trials:uploadClinicalData:table:beginDate')"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.StartTime?moment(scope.row.StartTime).format('YYYY-MM-DD'):'' }}
            </template>
          </el-table-column>
          <!-- 结束日期 -->
          <el-table-column
            prop="EndTime"
            :label="$t('trials:uploadClinicalData:table:endDate')"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.EndTime?moment(scope.row.EndTime).format('YYYY-MM-DD'):'' }}
            </template>
          </el-table-column>
          <!-- 病灶是否PD -->
          <el-table-column
            prop="IsPD"
            :label="$t('trials:uploadClinicalData:table:isPD')"
            width="180"
          >
            <template slot-scope="scope">
              {{ $fd('IsPdEnum', scope.row.IsPD) }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 既往手术史 -->
        <h4>{{ $t('trials:uploadClinicalData:title:pastSurgery') }}</h4>
        <el-table
          :data="selected.clinicalTableData.PreviousSurgeryList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <!-- 手术名称 -->
          <el-table-column
            prop="OperationName"
            :label="$t('trials:uploadClinicalData:table:surgeryName')"
            width="180"
          />
          <!-- 手术日期 -->
          <el-table-column
            prop="OperationTime"
            :label="$t('trials:uploadClinicalData:table:surgeryDate')"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.OperationTime?moment(scope.row.OperationTime).format('YYYY-MM-DD'):'' }}
            </template>
          </el-table-column>
        </el-table>
        <!-- 既往其他治疗史 -->
        <h4>{{ $t('trials:uploadClinicalData:title:others') }}</h4>
        <el-table
          :data="selected.clinicalTableData.PreviousOtherList"
          style="width: 100%"
        >
          <el-table-column
            type="index"
            width="50"
          />
          <!-- 治疗类型 -->
          <el-table-column
            prop="TreatmentType"
            :label="$t('trials:uploadClinicalData:table:treatmentType')"
            width="180"
          />
          <!-- 开始日期 -->
          <el-table-column
            prop="StartTime"
            :label="$t('trials:uploadClinicalData:table:treatmentbeginDate')"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.StartTime?moment(scope.row.StartTime).format('YYYY-MM-DD'):'' }}
            </template>
          </el-table-column>
          <!-- 结束日期 -->
          <el-table-column
            prop="EndTime"
            :label="$t('trials:uploadClinicalData:table:treatmentendDate')"
            width="180"
          >
            <template slot-scope="scope">
              {{ scope.row.EndTime?moment(scope.row.EndTime).format('YYYY-MM-DD'):'' }}
            </template>
          </el-table-column>
        </el-table>

      </div>
    </div>
  </div>
</template>
<script>
import { getReadingOrTaskClinicalDataList } from '@/api/trials'
import store from '@/store'
import { changeURLStatic } from '@/utils/history.js'
import moment from 'moment'
export default {
  name: 'MultipleNoneDicom',
  data() {
    return {
      selected: {
        id: '',
        type: null, // 0:格式化录入；1：pdf; 2:其他
        fileName: '',
        filePath: '',
        clinicalTableData: []
      },
      cdList: [],
      otherInfo: {},
      moment,
      loading: false
    }
  },
  mounted() {
    if (this.$router.currentRoute.query.TokenKey) {
      store.dispatch('user/setToken', this.$router.currentRoute.query.TokenKey)
      changeURLStatic('TokenKey', '')
    }
    this.getList()
  },
  methods: {
    // 获取非Dicom检查信息
    getList() {
      this.loading = true
      var param = {
        subjectId: this.$router.currentRoute.query.subjectId,
        trialId: this.$router.currentRoute.query.trialId,
        readingId: this.$router.currentRoute.query.readingId ? this.$router.currentRoute.query.readingId : '',
        visitTaskId: this.$router.currentRoute.query.visitTaskId ? this.$router.currentRoute.query.visitTaskId : '',
        readingClinicalDataId: this.$router.currentRoute.query.readingClinicalDataId ? this.$router.currentRoute.query.readingClinicalDataId : ''
      }
      getReadingOrTaskClinicalDataList(param).then(res => {
        this.cdList = res.Result
        this.otherInfo = res.OtherInfo
        this.loading = false
        if (this.cdList.length > 0) {
          var type = this.cdList[0].ClinicalUploadType === 1 ? 1 : 0
          var obj = type === 1 ? this.cdList[0].FileList[0] : this.cdList[0]
          this.preview(obj, type)
        }
      }).catch(() => { this.loading = false })
    },
    preview(obj, type) {
      this.$set(this.selected, 'id', obj.Id)
      this.$set(this.selected, 'type', type)
      if (type === 1) {
        // PDF
        this.$set(this.selected, 'fileName', obj.FileName)
        this.$set(this.selected, 'filePath', obj.Path)
      } else {
        // 格式化录入
        this.$set(this.selected, 'clinicalTableData', obj.ClinicalTableData)
      }
    }
  }
}
</script>
<style lang="scss">
.preview-wrapper{
  display: flex;
  flex-direction: row !important;
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }
  .left-wrapper{
    box-sizing: border-box;
    margin-right: 10px;
    height: 100%;
    width: 300px;
    border: 1px solid #ddd;

    .basic-info{
      height: 50px;
      line-height: 40px;
      padding: 5px 10px;
      font-size: 20px;
      font-weight: bold;
      background-color: #4e4e4e;
      color: #fbfbfb;
    }
    .activeBtn{
      color: #00bca0;
      border-color: #00bca0;
    }
    .basic-content{
      height: 100%;
      overflow: auto;
    }
    .basic-content-empty{
      padding: 5px;
      font-size: 16px;
    }
    .cd-wrapper{
      padding: 5px;

    }
    .cd-name-wrapper{
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      font-size: 15px;
      font-weight: bold;
      background-color: #eee;
    }
    .cd-item{
      box-sizing: border-box;
      border-bottom: 2px solid #f3f3f3;
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      padding-left: 5px;
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    border: 1px solid #ddd;
  }
  .right-content{
    height:100%;
  }

}
</style>
