<template>
  <div class="study-info">
    <div class="functions" style="text-align: right">
      <!-- 预览 -->
      <el-button
        type="primary"
        size="small"
        :disabled="studyList.length === 0"
        icon="el-icon-view"
        @click="handlePreviewAllFiles"
      >
        {{ $t('trials:audit:action:preview') }}
      </el-button>
    </div>
    <el-table
      v-loading="studyLoading"
      :data="studyList"
      style="width: 100%"
      height="300"
      :row-class-name="tableRowClassName"
      @selection-change="handleSelectionChange"
      :default-sort="{ prop: 'UploadedTime', order: 'ascending' }"
    >
      <!-- 检查编号 -->
      <el-table-column
        prop="StudyCode"
        :label="$t('trials:audit:table:studyId')"
        min-width="80"
        show-overflow-tooltip
        sortable
      />
      <!--      &lt;!&ndash; 检查类型 &ndash;&gt;-->
      <!--      <el-table-column-->
      <!--        prop="Modalities"-->
      <!--        :label="$t('trials:audit:table:modality')"-->
      <!--        min-width="80"-->
      <!--        show-overflow-tooltip-->
      <!--      />-->
      <!--      &lt;!&ndash; 检查部位 &ndash;&gt;-->
      <!--      <el-table-column-->
      <!--        prop="BodyPartExamined"-->
      <!--        :label="$t('trials:audit:table:bodyPart')"-->
      <!--        min-width="100"-->
      <!--        show-overflow-tooltip-->
      <!--      >-->
      <!--        <template slot-scope="scope">-->
      <!--          {{ getBodyPart(scope.row.BodyPartExamined) }}-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      &lt;!&ndash; 检查类型 &ndash;&gt;-->
      <!-- 检查名称 -->
      <el-table-column
        v-if="relationInfo.IsShowStudyName"
        prop="StudyName"
        :label="$t('trials:audit:table:StudyName')"
        sortable
      />
      <el-table-column
        prop="ModalityForEdit"
        :label="$t('trials:audit:table:modality')"
        sortable
      />
      <!-- 检查类型 -->
      <el-table-column
        prop="Modalities"
        :label="$t('trials:audit:table:modality1')"
        sortable
      />
      <!-- 检查部位 -->
      <el-table-column
        prop="BodyPartForEdit"
        :label="$t('trials:uploadedDicoms:table:bodyPart')"
        min-width="100"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">
          {{ getBodyPart(scope.row.BodyPartForEdit, scope.row.BodyPartForEditOther) }}
        </template>
      </el-table-column>
      <!-- 序列数量 -->
      <el-table-column
        prop="SeriesCount"
        :label="$t('trials:audit:table:seriesCount')"
        min-width="100"
        show-overflow-tooltip
        sortable
      />
      <!-- 图像数量 -->
      <el-table-column
        prop="InstanceCount"
        :label="$t('trials:audit:table:instanceCount')"
        min-width="100"
        show-overflow-tooltip
        sortable
      />
      <!-- 检查日期 -->
      <el-table-column
        prop="StudyTime"
        :label="$t('trials:audit:table:studyDate')"
        min-width="120"
        show-overflow-tooltip
        sortable
      >
        <template slot-scope="scope">
          {{ moment(scope.row.StudyTime).format('YYYY-MM-DD') }}
        </template>
      </el-table-column>
      <!-- 更新时间 -->
      <el-table-column
        prop="UpdateTime"
        :label="$t('trials:audit:table:studyUpdateTime')"
        min-width="80"
        show-overflow-tooltip
        sortable
      />
      <!-- 上传时间 -->
      <el-table-column
        prop="UploadedTime"
        :label="$t('trials:audit:table:studyUploadTime')"
        min-width="80"
        show-overflow-tooltip
        sortable
      />
      <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:audit:action:preview')"
            circle
            @click="handleViewStudy(scope.row)"
          />
          <!-- 预览PET-CT数据 -->
          <el-button
            icon="el-icon-folder"
            :title="$t('trials:audit:tab:clinicalData')"
            v-if="
              ['PT、CT', 'CT、PT', 'PET-CT'].includes(scope.row.Modalities) &&
              relationInfo.IsHaveStudyClinicalData
            "
            circle
            :disabled="scope.row.IsDeleted"
            @click="handlePreviewClinicalData(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--pet-ct临床数据预览-->
    <el-dialog
      v-if="petVisible"
      :show-close="true"
      :visible.sync="petVisible"
      append-to-body
    >
      <uploadPetClinicalData
        :subject-visit-id="data.Id"
        :data="data"
        :studyData="rowData"
        :allow-add-or-edit="false"
      />
    </el-dialog>
  </div>
</template>
<script>
import { getSubjectVisitUploadedStudyList, deleteStudyList } from '@/api/trials'
import { getToken } from '@/utils/auth'
import uploadPetClinicalData from '@/views/trials/trials-panel/visit/crc-upload/components/uploadPetClinicalData.vue'
import moment from 'moment'
export default {
  name: 'StudyInfo',
  components: { uploadPetClinicalData },
  props: {
    data: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      userTypeEnumInt: zzSessionStorage.getItem('userTypeEnumInt') * 1,
      deleteArr: [],
      studyLoading: false,
      studyList: [],
      trialId: this.$route.query.trialId,
      moment,
      // pet-ct临床数据
      petVisible: false,
      rowData: {},
      relationInfo: {},
      bp: [],
    }
  },
  async mounted() {
    this.getStudyInfo()
    this.bp = await this.$getBodyPart(this.$route.query.trialId)
  },
  methods: {
    // 预览临床数据
    handlePreviewClinicalData(row) {
      this.rowData = row
      this.petVisible = true
    },
    getStudyInfo() {
      this.studyLoading = true
      getSubjectVisitUploadedStudyList(this.data.Id)
        .then((res) => {
          this.studyList = res.Result
          this.relationInfo = res.OtherInfo
          this.studyLoading = false
        })
        .catch(() => {
          this.studyLoading = false
        })
    },
    // 批量删除
    handleBatchDelete() {
      this.$confirm(this.$t('trials:qcCheck:message:delete'), {
        type: 'warning',
        distinguishCancelAndClose: true,
      })
        .then(() => {
          this.studyLoading = true
          deleteStudyList(this.trialId, this.data.Id, this.deleteArr)
            .then((res) => {
              if (res.IsSuccess) {
                this.getStudyInfo()
                this.$emit('getList')
                this.$message.success(
                  this.$t('trials:qcCheck:message:deletedSuccessfully')
                )
              }
            })
            .catch(() => {
              this.studyLoading = true
            })
        })
        .catch(() => {})
    },
    // 预览所有影像
    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')
    },
    // 预览影像
    handleViewStudy(row) {
      var token = getToken()
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${row.StudyId}&TokenKey=${token}&type=Study`,
      })
      window.open(routeData.href, '_blank')
    },
    getBodyPart(bodyPart, other) {
      if (!bodyPart && !other) 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(), 'Code', this.BodyPart, 'Name')
      })
      if (other) {
        newArr.push(other)
      }
      newArr = newArr.filter(Boolean)
      return newArr.join(' | ')
    },
    // 获取勾选项
    handleSelectionChange(val) {
      this.deleteArr = []
      val.forEach((item) => {
        this.deleteArr.push(item.StudyId)
      })
    },
    // 设置已删除行勾选状态
    hasDeleted(row) {
      if (row.IsDeleted) {
        return false
      } else {
        return true
      }
    },
    // 设置已删除序列行样式
    tableRowClassName({ row, rowIndex }) {
      if (row.IsDeleted) {
        return 'delete-row'
      } else {
        return ''
      }
    },
  },
}
</script>
<style lang="scss">
.study-info {
  .delete-row {
    text-decoration-line: line-through;
    color: #c0c4cc;
  }
}
</style>
