<template>
  <div>
    <el-tabs type="border-card" v-model="activeName">
      <!-- <el-tab-pane :label="$t('trials:study:tabpane:notBind')" name="notBind">
        <notBindStudyList
          activeName="notBind"
          v-if="activeName === 'notBind'"
        />
      </el-tab-pane> -->
      <el-tab-pane
        :label="$t('trials:study:tabpane:notSubmit')"
        name="notSubmit"
      >
        <studyList activeName="notSubmit" v-if="activeName === 'notSubmit'" />
      </el-tab-pane>
      <el-tab-pane
        :label="$t('trials:consistencyCheck:title:submitted')"
        name="submit"
      >
        <studyList activeName="submit" v-if="activeName === 'submit'" />
      </el-tab-pane>
    </el-tabs>

    <base-model :config="share_model">
      <template slot="dialog-body">
        <div>
          <i style="color: #428bca" class="el-icon-success" />
          <span>成功创建分享链接</span>
        </div>
        <div style="margin: 10px 0">
          链接：<el-input v-model="shareLink" readonly style="width: 420px" />
        </div>
        <div style="margin-bottom: 20px">
          提取码：
          <el-input v-model="extractionCode" style="width: 100px" readonly />
        </div>
        <div>
          <el-button type="primary" round @click="copyCode"
            >复制链接及提取码</el-button
          >
        </div>
      </template>
    </base-model>

    <!-- 预览非Dicom影像 -->
    <el-dialog
      v-if="previewNonDicomVisible"
      :visible.sync="previewNonDicomVisible"
      :title="$t('trials:studyList:dialogTitle:view')"
      :fullscreen="true"
      append-to-body
      custom-class="base-dialog-wrapper"
    >
      <div
        class="base-modal-body"
        style="border: 2px solid #ccc; padding: 10px"
      >
        <NonDicomPreview
          v-if="previewNonDicomVisible"
          :none-dicom-id="rowData.Id"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getTrialSiteSelect,
  getSeriesList,
  getTrialVisitStageSelect,
  getNoneDicomStudyFileList,
} from "@/api/trials";
import { createImageShare } from "@/api/share";
import BaseModel from "@/components/BaseModel";
import NonDicomPreview from "./components/nonDicomPreview";
import moment from "moment";
import { getToken } from "@/utils/auth";
import studyList from "./components/list.vue";
import notBindStudyList from "./components/not-bind-study.vue";
export default {
  name: "StudyList",
  components: {
    BaseModel,
    NonDicomPreview,
    studyList,
    notBindStudyList,
  },
  data() {
    return {
      siteOptions: [],
      visitPlanOptions: [],
      seriesList: [],
      nonDicomfilesList: [],
      rowData: {},
      userTypeEnumInt: zzSessionStorage.getItem("userTypeEnumInt") * 1,
      share_model: {
        visible: false,
        title: "影像分享",
        showClose: true,
        width: "500px",
      },
      shareLink: "",
      extractionCode: "",
      moment,
      filesLoading: "",
      seriesLoading: "",
      previewNonDicomVisible: false,
      trialId: this.$route.query.trialId,
      tokenKey: getToken(),
      openWindow: null,

      activeName: "notSubmit", // notSubmit 未提交  submit 提交  notBind 未绑定
    };
  },
  mounted() {
    // this.getSite();
    this.getVisitPlanOptions();
  },
  methods: {
    // 获取某个Dicom检查下的序列信息
    handleGetseriesList(row) {
      this.seriesLoading = true;
      this.seriesList = [];
      getSeriesList(row.Id)
        .then((res) => {
          this.seriesLoading = false;
          this.seriesList = res.Result;
        })
        .catch(() => {
          this.seriesLoading = false;
        });
    },
    // 获取某个非Dicom检查下的文件
    handleGetFilesList(id) {
      this.filesLoading = true;
      getNoneDicomStudyFileList(id)
        .then((res) => {
          this.nonDicomfilesList = res.Result;
          this.filesLoading = false;
        })
        .catch(() => {
          this.filesLoading = false;
        });
    },
    // 预览当前检查下的影像
    handleViewStudy(row) {
      if (this.openWindow) {
        this.openWindow.close();
      }
      if (row.IsDicom) {
        const routeData = this.$router.resolve({
          path: `/showdicom?studyId=${row.Id}&TokenKey=${this.tokenKey}&type=Study`,
        });
        this.openWindow = window.open(routeData.href, "_blank");
      } else {
        // this.rowData = { ...row }
        // this.previewNonDicomVisible = true
        const routeData = this.$router.resolve({
          path: `/showNoneDicoms?subjectVisitId=${row.SubjectVisitId}&studyId=${row.Id}&TokenKey=${this.tokenKey}`,
        });
        this.openWindow = window.open(routeData.href, "_blank");
      }
    },
    handlePreviewNonDicom(row) {
      if (this.openWindow) {
        this.openWindow.close();
      }
      const routeData = this.$router.resolve({
        path: `/showNoneDicoms?subjectVisitId=${row.SubjectVisitId}&studyId=${row.Id}&TokenKey=${this.tokenKey}`,
      });
      this.openWindow = window.open(routeData.href, "_blank");
    },
    // 预览
    handlePreview(row) {
      if (this.openWindow) {
        this.openWindow.close();
      }
      this.openWindow = window.open(row.FullFilePath, "_blank");
    },
    // 格式化状态码
    studyStatusFormatter(StudyStatus) {
      if (StudyStatus === 5) return "Uploaded";
      else if (StudyStatus === 1) return "Uploading";
      else if (StudyStatus === 7) return "QA Requested";
      else if (StudyStatus === 10) return "In QA";
      else if (StudyStatus === 25) return "QA-Passed";
      else if (StudyStatus === 26) return "QA-Failed";
      else if (StudyStatus === 28) return "Anonymizing";
      else if (StudyStatus === 30) return "Anonymized";
      else if (StudyStatus === 32) return "Anonymizing Failed";
      else if (StudyStatus === 34) return "Forwarding";
      else if (StudyStatus === 36) return "Forwarded";
      else if (StudyStatus === 38) return "Forwarding Failed";
      else return "";
    },
    // 获取site下拉框数据
    getSite() {
      getTrialSiteSelect(this.trialId).then((res) => {
        this.siteOptions = res.Result;
      });
    },
    // 获取visit下拉框数据
    getVisitPlanOptions() {
      getTrialVisitStageSelect(this.trialId).then((res) => {
        this.visitPlanOptions = res.Result;
      });
    },
    // 分享影像链接
    handleShareImage(row) {
      this.shareLink = "";
      this.extractionCode = "";
      const params = {
        TrialId: row.TrialId,
        SiteId: row.SiteId,
        SubjectId: row.SubjectId,
        StudyId: row.Id,
      };
      this.loading = true;
      createImageShare(params)
        .then((res) => {
          this.loading = false;
          if (res.IsSuccess) {
            // this.shareLink = `${window.location.origin}${window.location.pathname}#/imagesShare?id=${res.Result.ResourceId}`
            this.shareLink = `${window.location.origin}/imagesShare?id=${res.Result.ResourceId}`;
            this.extractionCode = res.Result.Password;
            this.share_model.visible = true;
          }
        })
        .catch(() => {
          this.loading = false;
        });
    },
    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(" | ");
    },
    // 复制
    copyCode() {
      this.$copyText(`链接: ${this.shareLink} 提取码: ${this.extractionCode}`)
        .then((res) => {
          this.$message.success("复制成功");
        })
        .catch(() => {
          this.$alert("复制失败");
        });
    },
    onCopyError() {
      this.$alert("复制失败");
    },
  },
};
</script>
