<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:uploadedDicoms:action:preview") }}
      </el-button>
    </div>
    <el-table
      v-loading="studyLoading"
      :data="studyList"
      style="width: 100%"
      v-adaptive="{ bottomOffset: 60 }"
      height="300"
      :default-sort="{ prop: 'StudyTime', order: 'descending' }"
    >
      <!-- 患者编号 -->
      <el-table-column
        prop="PatientIdStr"
        :label="$t('trials:uploadDicomList:table:pId')"
        min-width="80"
        show-overflow-tooltip
        sortable
      />
      <!-- 患者姓名 -->
      <el-table-column
        prop="PatientName"
        :label="$t('trials:uploadDicomList:table:patientName')"
        min-width="80"
        show-overflow-tooltip
        sortable
      />
      <!-- 检查编号 -->
      <el-table-column
        prop="StudyCode"
        :label="$t('trials:uploadedDicoms:table:studyId')"
        min-width="80"
        show-overflow-tooltip
        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
        align="center"
        prop="Description"
        :label="$t('trials:inspection:table:studyDescription')"
        show-overflow-tooltip
        min-width="100"
        sortable
      ></el-table-column>
      <!-- 序列数量 -->
      <el-table-column
        prop="SeriesCount"
        :label="$t('trials:uploadedDicoms:table:seriesCount')"
        min-width="100"
        show-overflow-tooltip
        sortable
      />
      <!-- 图像数量 -->
      <el-table-column
        prop="InstanceCount"
        :label="$t('trials:uploadedDicoms:table:instanceCount')"
        min-width="100"
        show-overflow-tooltip
        sortable
      />
      <!-- 检查日期 -->
      <el-table-column
        prop="StudyTime"
        :label="$t('trials:uploadedDicoms: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="UploadedTime"
        :label="$t('trials:uploadedDicoms:table:uploadedTime')"
        min-width="80"
        sortable
        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)"
          />
          <!-- 诊断报告 -->
          <el-button
            icon="el-icon-document"
            v-hasPermi="['trials:trials-panel:hirVisit:result']"
            disabled
            :title="$t('trials:inspection:button:diagnosticReport')"
            circle
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getSubjectVisitUploadedStudyList } from "@/api/trials";
import moment from "moment";
import { getToken } from "@/utils/auth";
export default {
  name: "StudyInfo",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      studyForm: {
        StudyCode: "",
        IsDicomData: true,
        Modalities: "",
        BodyPartForEdit: [],
        SeriesCount: null,
        StudyTime: "",
      },
      deleteArr: [],
      studyLoading: false,
      studyList: [],
      trialId: this.$route.query.trialId,
      moment,
      relationInfo: null,
      trialBodyPartTypes: [],
      trialModalitys: [],
      btnLoading: false,
    };
  },
  mounted() {
    this.getStudyInfo();
  },
  methods: {
    getStudyInfo() {
      this.studyLoading = true;
      getSubjectVisitUploadedStudyList(this.data.SubjectVisitId)
        .then((res) => {
          this.studyList = res.Result;
          this.studyLoading = false;
          this.relationInfo = res.OtherInfo;
          this.trialBodyPartTypes = this.relationInfo.BodyPartTypes
            ? this.relationInfo.BodyPartTypes.split("|")
            : [];
          this.trialModalitys = this.relationInfo.Modalitys
            ? this.relationInfo.Modalitys.split("|")
            : [];
        })
        .catch(() => {
          this.studyLoading = false;
        });
    },
    // 预览所有影像
    handlePreviewAllFiles() {
      var tokenKey = getToken();
      const routeData = this.$router.resolve({
        path: `/showvisitdicoms?trialId=${this.data.TrialId}&visitInfo=${this.data.VisitName}(${this.data.VisitNum})&subjectVisitId=${this.data.SubjectVisitId}&TokenKey=${tokenKey}`,
      });
      var newWindow = window.open(routeData.href, "_blank");
      this.$emit("setOpenWindow", newWindow);
      this.$setOpenWindow(newWindow);
    },
    // 预览影像
    handleViewStudy(row) {
      var token = getToken();
      const routeData = this.$router.resolve({
        path: `/showdicom?studyId=${row.StudyId}&TokenKey=${token}&type=Study`,
      });
      var newWindow = window.open(routeData.href, "_blank");
      this.$emit("setOpenWindow", newWindow);
      this.$setOpenWindow(newWindow);
    },
    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(" | ");
    },
  },
};
</script>
<style lang="scss" scoped>
.study-info {
  .delete-row {
    text-decoration-line: line-through;
    color: #c0c4cc;
  }
}
</style>
