<template>
  <div v-loading="loading" class="clinical-data-wrapper">
    <el-tabs type="border-card">
      <!-- 既往局部治疗史 -->
      <el-tab-pane
        v-for="cd in clinicalDatas"
        :key="cd.ClinicalDataTrialSetId"
        :label="cd.ClinicalDataSetName"
      >
        <div v-if="cd.ClinicalUploadType*1 === 0">
          <!-- 既往放疗史 -->
          <h4>{{ $t('trials:uploadClinicalData:title:pastTreatment') }}</h4>
          <el-table
            :data="cd.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="cd.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="cd.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 v-if="cd.ClinicalUploadType*1 === 1">
          <el-table
            :data="cd.PDFFileList"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              width="50"
            />
            <!-- 文件名称 -->
            <el-table-column
              prop="FileName"
              :label="$t('trials:uploadClinicalData:table:fileName')"
              width="250"
            />
            <!-- 上传时间 -->
            <el-table-column
              prop="CreateTime"
              :label="$t('trials:uploadClinicalData:table:uploadedTime')"
              width="200"
            />
            <el-table-column
              :label="$t('common:action:action')"
              width="200"
            >
              <template slot-scope="scope">
                <!-- 预览 -->

                <el-button
                  type="text"
                  size="small"
                  @click.native.prevent="preview(scope.row)"
                >
                  {{ $t('trials:uploadClinicalData:action:preview') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="cd.ClinicalUploadType*1 === 2">
          <clinicalDataQuestions
            :data="cd"
            :trial-clinical-id="cd.ClinicalDataTrialSetId"
            :is-viewer="false"
            :visit-id="cd.VisitId"
            :subject-id="cd.SubjectId"
            :trial-id="cd.TrialId"
            :reading-id="cd.ReadingId"
            :clinical-form-id="cd.ClinicalFromList[0].ClinicalFormId"
            :open-type="'look'"
            @close=""
          />
        </div>
      </el-tab-pane>
    </el-tabs>
    <!-- 预览文件 -->
    <el-dialog
      v-if="previewObj.visible"
      :visible.sync="previewObj.visible"
      :title="previewObj.fileName"
      :fullscreen="true"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <div class="base-modal-body" style="border:2px solid #ccc;padding: 10px">
        <PreviewFile v-if="previewObj.visible" :file-path="previewObj.filePath" :file-type="previewObj.fileType" />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getCRCClinicalData } from '@/api/trials'
import clinicalDataQuestions from '@/components/clinicalDataQuestions'
import moment from 'moment'
import PreviewFile from '@/components/PreviewFile/index'


export default {
  name: 'ClinicalData',
  components: { clinicalDataQuestions, PreviewFile },
  props: {
    subjectVisitId: {
      type: String,
      required: true
    },
    enumType: {
      type: Number,
      default: 0
    },
    subjectId: {
      type: String,
      required: true
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    },
    subjectClinicalData: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      loading: false,
      // PreviousHistoryList: this.subjectClinicalData.PreviousHistoryList,
      // PreviousSurgeryList: this.subjectClinicalData.PreviousSurgeryList,
      // PreviousOtherList: this.subjectClinicalData.PreviousOtherList,
      // PreviousPDFList: this.subjectClinicalData.PreviousPDFList,
      moment,
      previewObj:{visible:false,filePath:'',fileType:''},
      clinicalDatas: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // 文件预览
    preview(row) {
      if (!row.FileName) return
      this.previewObj.fileName = row.FileName
      this.previewObj.filePath = row.Path
      this.previewObj.fileType ='pdf'
      this.previewObj.visible = true
      // window.open(this.OSSclientConfig.basePath + path, '_blank')
    },
    getList() {
      this.loading = true
      var param = {
        subjectVisitId: this.subjectVisitId,
        trialId: this.$route.query.trialId,
        subjectId: this.subjectId,
        isBaseLine: this.data.IsBaseLine
      }
      getCRCClinicalData(param).then(res => {
        this.clinicalDatas = res.Result
        this.loading = false
      }).catch(() => { this.loading = false })
    },
    // getList() {
    //   this.loading = true
    //   getSubjectClinicalData(this.subjectVisitId).then(res => {
    //     this.PreviousHistoryList = res.Result.PreviousHistoryList
    //     this.PreviousSurgeryList = res.Result.PreviousSurgeryList
    //     this.PreviousOtherList = res.Result.PreviousOtherList
    //     this.PreviousPDFList = res.Result.PreviousPDFList
    //     this.loading = false
    //   }).catch(() => { this.loading = false })
    // },

    // 文件预览
    // preview(path) {
    //   if (!path) return
    //   window.open(this.OSSclientConfig.basePath + path, '_blank')
    // }
  }
}
</script>

