<template>
  <div>
    <el-divider content-position="left">{{ $t('trials:readingPeriod:title:study') }}</el-divider>
    <el-table
    v-loading="btnLoading"
    :data="studyList"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    max-height="250"
    >
    <!-- 检查编号 -->
    <el-table-column
      prop="StudyCode"
      :label="$t('trials:uploadedDicoms:table:studyId')"
      min-width="80"
      show-overflow-tooltip
    />
    <!-- 检查类型 -->
    <el-table-column
      prop="ModalityForEdit"
      :label="$t('trials:audit:table:modality')"
    />
    <!-- 检查设备 -->
    <el-table-column
      prop="Modalities"
      :label="$t('trials:audit:table:modality1')"
    />
    <!-- 检查部位 -->
    <el-table-column
      prop="BodyPartForEdit"
      :label="$t('trials:uploadedDicoms:table:bodyPart')"
      min-width="100"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        {{ getBodyPart(scope.row.BodyPartForEdit)}}
      </template>
    </el-table-column>
    <!-- 序列数量 -->
    <el-table-column
      prop="SeriesCount"
      :label="$t('trials:uploadedDicoms:table:seriesCount')"
      min-width="100"
      show-overflow-tooltip
    />
    <!-- 图像数量 -->
    <el-table-column
      prop="InstanceCount"
      :label="$t('trials:uploadedDicoms:table:instanceCount')"
      min-width="100"
      show-overflow-tooltip
    />
    <!-- 检查日期 -->
    <el-table-column
      prop="StudyTime"
      :label="$t('trials:uploadedDicoms:table:studyDate')"
      min-width="120"
      show-overflow-tooltip
    >
<!--      <template slot-scope="scope">-->
<!--        {{ scope.row.StudyTime ? moment(scope.row.StudyTime).format('YYYY-MM-DD'):'' }}-->
<!--      </template>-->
    </el-table-column>
    <!-- 上传时间 -->
    <el-table-column
      prop="UploadedTime"
      :label="$t('trials:uploadedDicoms:table:uploadedTime')"
      min-width="80"
      show-overflow-tooltip
    />
    <el-table-column :label="$t('common:action:action')" min-width="100" fixed="right">
      <template slot-scope="scope">
        <!-- 预览 -->
        <el-button
          icon="el-icon-view"
          :disabled="scope.row.SeriesCount === 0 || scope.row.IsDeleted"
          :title="$t('trials:uploadedDicoms:action:preview')"
          circle
          @click="handleViewStudy(scope.row)"
        />
      </template>
    </el-table-column>
    </el-table>
    <el-divider content-position="left">{{ $t('trials:readingPeriod:title:series') }}</el-divider>
    <el-table
      :data="seriesList"
      v-loading="btnLoading"
      :row-class-name="tableRowClassName"
    >
      <!-- 序列号 -->
      <el-table-column
        prop="SeriesNumber"
        :label="$t('trials:audit:table:seriesId')"
      />
      <!-- 检查编号 -->
      <el-table-column
        prop="StudyCode"
        :label="$t('trials:audit:table:seriesOfStudyId')"
      />
      <!-- 检查类型 -->
      <el-table-column
        prop="Modality"
        :label="$t('trials:audit:table:seriesModality')"

        show-overflow-tooltip
      />
      <!-- 检查部位 -->
      <el-table-column
        prop="BodyPartForEdit"
        :label="$t('trials:uploadedDicoms:table:bodyPart')"
        min-width="100"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ getBodyPart(scope.row.BodyPartForEdit)}}
        </template>
      </el-table-column>
      <!-- 图像数量 -->
      <el-table-column
        prop="InstanceCount"
        :label="$t('trials:audit:table:seriesOfInstanceCount')"
      />
      <!-- 检查日期 -->
      <el-table-column
        prop="SeriesTime"
        :label="$t('trials:audit:table:seriesOfStudyDate')"

        show-overflow-tooltip
      >
        <template slot-scope="scope">
          {{ scope.row.StudyTime ? moment(scope.row.StudyTime).format('YYYY-MM-DD') : '' }}
        </template>
      </el-table-column>
      <!-- 是否阅片 -->
      <el-table-column
        prop="IsReading"
        :label="$t('trials:audit:table:isReading')"
      >
        <template slot-scope="scope">
          <el-switch
            :disabled="scope.row.IsConfirmed"
            v-model="scope.row.IsReading"
          />
        </template>
      </el-table-column>
      <el-table-column
        :label="$t('common:action:action')"
      >
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button
            icon="el-icon-view"
            :title="$t('trials:audit:action:seriesPreview')"
            circle
            :disabled="scope.row.IsDeleted"
            @click="handlePreviewInstance(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer" v-if="!this.seriesList.find(v => v.IsConfirmed)" style="text-align: right;margin-top: 20px">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="save(false)">
        {{ $t('common:button:save') }}
      </el-button>
      <el-button :loading="btnLoading" size="small" type="primary" @click="save(true)">
        {{ $t('common:button:confirm') }}
      </el-button>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getSubjectCriteriaEvaluationList, batchAddOrUpdateSubjectCriteriaEvaluation, getSubjectCriteriaEvaluationVisitFilterList, getHaveGeneratedTaskList, batchGenerateTask, getVisitStudyAndSeriesList, batchAddSubjectCriteriaEvaluationVisitStudyFilter } from '@/api/trials/subject'
import moment from 'moment'

export default {
  name: "subjectStudy",
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      btnLoading: false,
      studyLoading: false,
      studyList: [],
      seriesList: [],
      moment,
      trialId: this.$route.query.trialId,
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    save(IsConfirmed) {
      var params = this.seriesList.map(v => {
        return {
          Id: v.Id,
          TrialReadingCriterionId: v.TrialReadingCriterionId,
          SubjectVisitId: v.SubjectVisitId,
          StudyId: v.StudyId,
          SeriesId: v.SeriesId,
          IsConfirmed: IsConfirmed,
          IsReading: v.IsReading
        }
      })
      if (!IsConfirmed) {
        this.btnLoading = true
        batchAddSubjectCriteriaEvaluationVisitStudyFilter(params).then(res => {
          this.$message.success(this.$t('common:message:savedSuccessfully'))
          this.getList()
          this.btnLoading = false
        }).catch(() => {this.btnLoading = false})
      } else {
        this.$confirm(this.$t('trials:readingPeriod:confirm:Images')).then(() => {
          this.btnLoading = true
          batchAddSubjectCriteriaEvaluationVisitStudyFilter(params).then(res => {
            this.$message.success(this.$t('trials:readingPeriod:confirm:SuccessfulScreening'))
            this.getList()
            this.btnLoading = false
            this.$emit('getList')
            this.$emit('close')
          }).catch(() => {this.btnLoading = false})
        })
      }
    },
    handlePreviewInstance(row) {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showdicom?trialId=${this.trialId}&studyId=${row.StudyId}&studyCode=${row.StudyCode}&modality=${row.Modality}&description=${row.Description}&seriesId=${row.SeriesId}&seriesNumber=${row.SeriesNumber}&showDelete=0&subjectVisitId=${row.SubjectVisitId}&TokenKey=${token}&type=Series`
      })
      this.open = window.open(routeData.href, '_blank')
    },
    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(' | ')
    },
    getList() {
      var params = {
        TrialReadingCriterionId: this.data.TrialReadingCriterionId,
        SubjectId: this.data.SubjectId,
        SubjectVisitId: this.data.SubjectVisitId,
      }
      this.btnLoading = true
      getVisitStudyAndSeriesList(params).then(res => {
        this.studyList = res.Result.StudyList
        this.seriesList = res.Result.SeriesList
        this.btnLoading = false
        console.log(res.Result)
      }).catch(() => {  this.btnLoading = false })
    },
    // 设置已删除序列行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.IsDeleted) {
        return 'delete-row'
      } else {
        return ''
      }
    },
    // 预览单个检查影像
    handleViewStudy(row) {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${row.StudyId}&TokenKey=${token}&type=Study`
      })
      window.open(routeData.href, '_blank')
    },
    // 预览所有影像
    handlePreviewAllFiles() {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showvisitdicoms?trialId=${this.data.TrialId}&visitInfo=${this.data.VisitName}(${this.data.VisitNum})&subjectVisitId=${this.data.Id}&TokenKey=${token}`
      })
      window.open(routeData.href, '_blank')
    },
  }
}
</script>

<style scoped>

</style>
