<template>
  <div class="ad_review_wrapper">
    <div style="text-align: left">
      <el-button v-if="auditInfo.IsExistsClinicalData" type="text" @click="previewCD">
        {{ $t("trials:adReview:title:clinicalData") }}
      </el-button>
    </div>
    <el-table :data="adInfo.VisitInfoList" style="width: 100%">
      <!-- 访视名称 -->
      <el-table-column prop="VisitName" :label="$t('trials:adReview:table:visitName')" show-overflow-tooltip
        width="150" />

      <!-- 评估结果 -->
      <el-table-column v-for="j in judgeQuestion" :key="j.armEnum" :label="$fd('ArmEnum', j.armEnum)" align="center"
        prop="" show-overflow-tooltip>
        <template>
          <el-table-column v-for="(qs, i) in j.judgeQuestionList" :key="i" prop="" :label="qs" show-overflow-tooltip
            width="150">
            <template slot-scope="scope">
              <span v-if="
                scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                  .QuestionType === 1
              ">
                <span v-if="
                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                    .DictionaryCode
                ">{{
                  $fd(
                    scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                      .DictionaryCode,
                    parseInt(
                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[
                        i
                      ].Answer
                    )
                  )
                }}</span>
                <span v-else>{{
                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                    .Answer
                }}</span>
              </span>
              <span v-else-if="
                scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                  .QuestionType === 2
              ">
                <div v-if="
                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                    .Answer
                ">
                  <span>{{
                    $fd(
                      "YesOrNo",
                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                        .Answer
                    )
                  }}</span>
                  <!-- 查看详情 -->
                  <el-button type="text" style="margin-left: 5px" @click="
                    handleViewDetail(
                      scope.row.VisitTaskInfoList[j.index].GlobalVisitTaskId
                    )
                    ">
                    {{ $t("trials:adReview:table:view") }}
                  </el-button>
                </div>

                <div v-else>
                  {{
                    $fd(
                      "YesOrNo",
                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                        .Answer
                    )
                  }}
                </div>
              </span>
              <span v-else>
                {{
                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i]
                    .Answer
                }}
              </span>
              <span>
                {{
                  scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].ValueType == 2 ? '%' :
                    scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].CustomUnit ?
                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].CustomUnit :
                      scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Unit ? $fd("Unit",
                        scope.row.VisitTaskInfoList[j.index].JudgeQuestionList[i].Unit) : ''
                }}
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <!-- 查看详情 -->
      <el-table-column :label="$t('trials:adReview:table:view')" width="200" :fixed="isFixed ? 'right' : false">
        <template slot-scope="scope">
          <!-- 查看R1详情 -->
          <el-button type="text" :title="$t('trials:adReview:table:viewR1')" @click="handleView(scope.row, 1)">
            R1
          </el-button>
          <!-- 查看R2详情 -->
          <el-button type="text" :title="$t('trials:adReview:table:viewR2')" @click="handleView(scope.row, 2)">
            R2
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <h3>{{ $t("trials:adReview:title:adResult") }}</h3>
    <el-form ref="adForm" :model="adForm" style="width: 800px" label-width="100">
      <!-- 选择阅片人 -->
      <el-form-item :label="$t('trials:adReview:title:choseReader')" prop="judgeResultTaskId">
        <el-radio-group v-model="adForm.judgeResultTaskId" disabled>
          <el-radio v-for="t in visitTaskArmList" :key="t.VisitTaskId" :label="t.VisitTaskId">
            {{ $fd("ArmEnum", t.ArmEnum) }}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 裁判原因 -->
      <el-form-item :label="$t('trials:adReview:title:adReason')" prop="judgeResultRemark">
        <el-input v-model="adForm.judgeResultRemark" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" disabled />
      </el-form-item>
      <!-- 截图说明 -->
      <el-form-item :label="$t('trials:adReview:title:screenShot')">
        <el-upload action=".png,.jpg,.jpeg" list-type="picture-card" :file-list="fileList" disabled class="disabled">
          <i slot="default" class="el-icon-plus" />
          <div slot="file" slot-scope="{ file }" style="width: 100%; height: 100%">
            <viewer :ref="file.url" :images="images" style="
                display: flex;
                align-items: center;
                justify-content: center;
                width: 100%;
                height: 100%;
              ">
              <img class="el-upload-list__item-thumbnail" :src="OSSclientConfig.basePath + file.url" alt=""
                crossorigin="anonymous" style="max-width: 100%; max-height: 100%" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in" />
                </span>
              </span>
            </viewer>
          </div>
        </el-upload>
        <el-dialog append-to-body :visible.sync="imgVisible" width="600px">
          <!-- <img width="100%" :src="imageUrl" alt="图片未找到"> -->
          <el-image :src="imageUrl" width="100%" crossorigin="anonymous">
            <!-- <div slot="placeholder" class="image-slot">
              {{ $t('trials:adReview:title:loading') }}<span class="dot">...</span>
            </div> -->
          </el-image>
        </el-dialog>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  name: "AReview",
  props: {
    auditInfo: {
      type: Object,
      default() {
        return {};
      },
    },
    rowData: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      adInfo: {},
      adForm: {},
      imgVisible: false,
      imageUrl: "",
      fileList: [],
      visitTaskArmList: [],
      judgeQuestion: [],
      isFixed: false,
    };
  },
  mounted() {
    this.initPage();
  },
  methods: {
    initPage() {
      var JudgeInfo = this.auditInfo.JudgeInfo;
      var judgeQS = [];
      if (JudgeInfo.VisitInfoList.length > 0) {
        JudgeInfo.VisitInfoList[0].VisitTaskInfoList.map((v, index) => {
          var qsObj = {
            armEnum: v.ArmEnum,
            judgeQuestionList: [],
            index: index,
          };
          v.JudgeQuestionList.map((q) => {
            if (q.QuestionType === 1) {
              qsObj.judgeQuestionList.push(q.QuestionName);
            } else {
              qsObj.judgeQuestionList.push(
                this.$fd("JudgeReadingQuestionType", q.QuestionType)
              );
            }
          });
          judgeQS.push(qsObj);
        });
      }
      this.judgeQuestion = judgeQS;
      this.isFixed =
        this.judgeQuestion.length > 0 &&
        this.judgeQuestion[0].judgeQuestionList.length > 4;

      this.adInfo = JudgeInfo;
      this.adForm.judgeResultTaskId = JudgeInfo.JudgeResultTaskId;

      this.adForm.judgeResultRemark = JudgeInfo.JudgeResultRemark;
      this.fileList = [];
      if (JudgeInfo.JudgeResultImagePathList) {
        JudgeInfo.JudgeResultImagePathList.map((url) => {
          if (url) {
            this.fileList.push({ name: "", url: url });
          }
        });
        this.adForm.judgeResultImagePathList =
          JudgeInfo.JudgeResultImagePathList;
      }
      this.visitTaskArmList = JudgeInfo.VisitTaskArmList;
    },
    handlePictureCardPreview(file) {
      this.images = this.fileList.map(
        (f) => this.OSSclientConfig.basePath + f.url
      );
      this.$refs[file.url].$viewer.show();
    },
    handleViewDetail(visitTaskId) {
      console.log(this.rowData);
      var trialId = this.$route.query.trialId;
      var token = getToken();
      var criterionType = this.rowData.CriterionType;
      var readingTool = this.rowData.ReadingTool;
      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;

      var path = "";
      if (readingTool === 0 || readingTool === 2|| readingTool === 3) {
        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode
          }&subjectId=${this.rowData.SubjectId
          }&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
      } else {
        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode
          }&subjectId=${this.rowData.SubjectId
          }&visitTaskId=${visitTaskId}&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
      }
      var routeData = this.$router.resolve({ path });
      window.open(routeData.href, "_blank");
    },
    handleView(row, armEnum) {
      var task = row.VisitTaskInfoList.find((item) => item.ArmEnum === armEnum);
      var trialId = this.$route.query.trialId;
      var token = getToken();
      var criterionType = this.rowData.CriterionType;
      var readingTool = this.rowData.ReadingTool;
      readingTool = isNaN(parseInt(readingTool)) ? null : parseInt(readingTool);
      var isReadingTaskViewInOrder = this.rowData.IsReadingTaskViewInOrder;
      var trialReadingCriterionId = this.rowData.TrialReadingCriterionId;

      var path = "";
      if (readingTool === 0 || readingTool === 2|| readingTool === 3) {
        path = `/readingDicoms?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode
          }&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId
          }&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
      } else {
        path = `/noneDicomReading?TrialReadingCriterionId=${trialReadingCriterionId}&trialId=${trialId}&subjectCode=${this.rowData.SubjectCode
          }&subjectId=${this.rowData.SubjectId}&visitTaskId=${task.VisitTaskId
          }&isReadingTaskViewInOrder=${isReadingTaskViewInOrder}&criterionType=${criterionType}&readingTool=${readingTool}&TokenKey=${token}&key=${new Date().getTime()}`;
      }
      var routeData = this.$router.resolve({ path });
      window.open(routeData.href, "_blank");
    },
    previewCD() {
      var token = getToken();
      var trialId = this.$route.query.trialId;
      const routeData = this.$router.resolve({
        path: `/clinicalData?subjectId=${this.auditInfo.SubjectId}&trialId=${trialId}&visitTaskId=${this.auditInfo.VisitTaskId}&TokenKey=${token}`,
      });
      window.open(routeData.href, "_blank");
    },
  },
};
</script>
<style lang="scss" scoped>
.ad_review_wrapper {
  .disabled {
    ::v-deep .el-upload--picture-card {
      display: none;
    }
  }

  ::v-deep .el-upload-list__item {
    transition: none !important;
  }

  ::v-deep .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
  }
}
</style>
