<template>
  <div v-loading="loading" class="preview-wrapper">
    <div class="left-wrapper">
      <div class="basic-info">
        <span v-if="otherInfo.SubjectCode && isReadingShowSubjectInfo">{{ `${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>
          <template v-else-if="item.ClinicalUploadType===2">
            <div
              v-for="from in item.ClinicalFromList"
              :key="from.Id"
              class="cd-item"
              :class="{activeBtn:from.ClinicalFormId === selected.id}"
              @click.prevent="preview(from,2, item)"
            >
              {{ from.CheckDate ? from.CheckDate.split(' ')[0] : $t('trials:uploadNonDicoms:title:CustomizeClinicalData') }}
            </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=${OSSclientConfig.basePath}${selected.filePath}?userName=${currentUser}&COMPANY=${COMPANY}`" width="100%" height="100%" frameborder="0" />
      </div>
      <div v-else-if="selected.type===2" class="right-content" style="padding: 10px">
        <clinicalDataQuestions
          v-if="isShow"
          :data="selected"
          :trial-clinical-id="selected.ClinicalDataTrialSetId"
          :is-viewer="false"
          :visit-id="selected.VisitId"
          :subject-id="selected.SubjectId"
          :trial-id="selected.TrialId"
          :reading-id="selected.ReadingId"
          :clinical-form-id="selected.ClinicalFormId"
          :open-type="'look'"
        />
      </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 clinicalDataQuestions from '@/components/clinicalDataQuestions'
import moment from 'moment'
export default {
  name: 'MultipleNoneDicom',
  components: { clinicalDataQuestions },
  props: {
    trialId: {
      type: String,
      required: true
    },
    subjectId: {
      type: String,
      required: true
    },
    visitTaskId: {
      type: String,
      required: true
    },
    isReadingShowSubjectInfo: {
      type: Boolean,
      required: true
    }
  },
  data() {
    return {
      isShow: false,
      selected: {
        id: '',
        type: null, // 0:格式化录入；1：pdf; 2:其他
        fileName: '',
        filePath: '',
        clinicalTableData: []
      },
      cdList: [],
      otherInfo: {},
      moment,
      loading: false,
      currentUser: zzSessionStorage.getItem('userName'),
      COMPANY:process.env.VUE_APP_COMPANY_NAME
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 获取非Dicom检查信息
    getList() {
      this.loading = true
      var param = {
        subjectId: this.subjectId,
        trialId: this.trialId,
        visitTaskId: this.visitTaskId,
        readingClinicalDataId: '',
        readingId: ''
      }
      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 : this.cdList[0].ClinicalUploadType === 2 ? 2 : 0
          var obj = type === 1 ? this.cdList[0].FileList[0] : this.cdList[0]
          if (type === 2) {
            obj = this.cdList[0].ClinicalFromList[0]
          }
          this.preview(obj, type, this.cdList[0])
        }
      }).catch(() => { this.loading = false })
    },
    preview(obj, type, item) {
      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 if (type === 2) {
        // 自定义表单
        this.isShow = false
        console.log(item, obj)
        this.$set(this.selected, 'id', obj.ClinicalFormId)
        this.$set(this.selected, 'ClinicalDataTrialSetId', item.ClinicalDataTrialSetId)
        this.$set(this.selected, 'ClinicalFormId', obj.ClinicalFormId)
        this.$set(this.selected, 'VisitId', item.VisitId)
        this.$set(this.selected, 'SubjectId', item.SubjectId)
        this.$set(this.selected, 'TrialId', item.TrialId)
        this.$set(this.selected, 'ReadingId', item.ReadingId)
        this.$nextTick(() => {
          this.isShow = true
        })
      } else {
        // 格式化录入
        this.$set(this.selected, 'clinicalTableData', obj.ClinicalTableData)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.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;
    display: flex;
    flex-direction: column;

    .basic-info{
      height: 50px;
      line-height: 40px;
      padding: 5px 10px;
      font-size: 20px;
      font-weight: bold;
      background-color: #4e4e4e;
      color: #fbfbfb;
    }
    .activeBtn{
      color: #428bca;
      border-color: #428bca;
    }
    .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;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .right-wrapper{
    flex: 1;
    height: 100%;
    border: 1px solid #ddd;
  }
  .right-content{
    height:100%;
  }

}
</style>
