<template>
  <div class="preview-clinical-data">
    <el-table v-if="data.ClinicalUploadType === 1" v-loading="loading" :data="data.FileList" stripe style="width: 100%"
      height="500">
      <el-table-column type="index" width="40" />
      <!-- 文件名称 -->
      <el-table-column prop="FileName" :label="$t('trials:readingPeriod:cd:table:fileName')" />

      <el-table-column :label="$t('common:action:action')">
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button circle :title="$t('trials:readingPeriod:cd:action:viewFile')" icon="el-icon-view"
            @click="handlePreview(scope.row)" />
          <!-- 删除 -->
          <el-button v-if="(!data.IsSign && !data.IsCRCUpload)" circle
            :title="$t('trials:readingPeriod:cd:action:deleteFile')" icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <div v-else>
      <!-- 既往放疗史 -->
      <h4>{{ $t('trials:uploadClinicalData:title:pastTreatment') }}</h4>
      <el-table :data="data.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="data.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="data.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>
</template>
<script>
import { deleteReadingClinicalDataPDF } from '@/api/trials'
import moment from 'moment'
export default {
  name: 'PreviewCD',
  props: {
    data: {
      type: Object,
      default() { return {} }
    }
  },
  data() {
    return {
      loading: false,
      moment
    }
  },
  methods: {
    handlePreview(row) {
      if (row.Path) {
        window.open(row.Path, '_blank')
      }
    },
    handleDelete(index, row) {
      this.$confirm(this.$t('trials:readingPeriod:cd:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true
      })
        .then(() => {
          this.loading = true
          deleteReadingClinicalDataPDF(row.Id).then(res => {
            this.fileList.splice(index, 1)
            this.$emit('getList')
            this.loading = false
            this.$message.success(this.$t('common:message:deletedSuccessfully'))
          }).catch(() => { this.loading = false })
        }).catch(() => { })
    }
  }
}
</script>
