<template>
  <BaseContainer
    v-loading="loading"
    style="height: 100%; background-color: #fff"
  >
    <el-tabs
      v-if="TrialReadingCriterionId"
      v-model="TrialReadingCriterionId"
      type="border-card"
    >
      <el-tab-pane
        v-for="item of trialCriterionList"
        :key="item.TrialReadingCriterionId"
        :label="item.TrialReadingCriterionName"
        :name="item.TrialReadingCriterionId"
      >
        <div
          v-if="
            (isReadingTaskViewInOrder === 1 ||
              isReadingTaskViewInOrder === 2) &&
            TrialReadingCriterionId === item.TrialReadingCriterionId
          "
        >
          <div slot="search-container">
            <el-form :inline="true">
              <!-- 受试者编号 -->
              <el-form-item
                :label="$t('trials:pendingReadingTasks:table:subjectCode')"
              >
                <el-input
                  v-model="searchData.SubjectCode"
                  style="width: 130px"
                  clearable
                />
              </el-form-item>

              <el-form-item>
                <!-- 查询 -->
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  @click="handleSearch"
                >
                  {{ $t("common:button:search") }}
                </el-button>
                <!-- 重置 -->
                <el-button
                  type="primary"
                  icon="el-icon-refresh-left"
                  @click="handleReset"
                >
                  {{ $t("common:button:reset") }}
                </el-button>
              </el-form-item>
            </el-form>
          </div>
          <div slot="main-container">
            <el-table
              v-adaptive="{ bottomOffset: 75 }"
              :data="list"
              stripe
              height="100"
              @sort-change="handleSortChange"
            >
              <el-table-column type="index" width="40" align="left" />
              <el-table-column
                prop="IsUrgent"
                :label="$t('trials:consistencyCheck:table:isUrgent')"
                show-overflow-tooltip
                min-width="100"
              >
                <template slot-scope="scope">
                  <el-tag
                    :type="
                      scope.row.UrgentColor === 1
                        ? 'danger'
                        : scope.row.UrgentColor === 2
                        ? 'warning'
                        : 'primary'
                    "
                    >{{ $fd("YesOrNo", scope.row.IsUrgent) }}</el-tag
                  >
                </template>
              </el-table-column>
              <!-- 受试者编号 -->
              <el-table-column
                prop="SubjectCode"
                min-width="100"
                :label="$t('trials:pendingReadingTasks:table:subjectCode')"
                show-overflow-tooltip
                sortable="custom"
              />
              <!-- 剩余阅片量 -->
              <el-table-column
                prop="UnReadCanReadTaskCount"
                min-width="100"
                :label="
                  $t('trials:pendingReadingTasks:table:remainingReadingVolume')
                "
                show-overflow-tooltip
                sortable="custom"
              />
              <el-table-column
                prop="UrgentCount"
                :label="$t('trials:sysDocBeSigned:table:UrgentCount')"
                show-overflow-tooltip
                min-width="100"
                sortable="custom"
              >
                <template slot-scope="scope">
                  <span
                    :style="{
                      color:
                        scope.row.UrgentColor === 1
                          ? '#F56C6C'
                          : scope.row.UrgentColor === 2
                          ? '#E6A23C'
                          : '#409EFF',
                    }"
                    >{{ scope.row.UrgentCount }}</span
                  >
                </template>
              </el-table-column>
              <!--              &lt;!&ndash; 未读任务数量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="UnReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="未读任务数量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!--              &lt;!&ndash; 可读任务量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="UnReadCanReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="可读任务量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!--              &lt;!&ndash; 已签名任务量 &ndash;&gt;-->
              <!--              <el-table-column-->
              <!--                prop="HaveReadTaskCount"-->
              <!--                min-width="100"-->
              <!--                label="已签名任务量"-->
              <!--                show-overflow-tooltip-->
              <!--              />-->
              <!-- 建议完成时间 -->
              <el-table-column
                prop="SuggesteFinishedTime"
                min-width="100"
                :label="
                  $t('trials:pendingReadingTasks:table:suggestedCompletionTime')
                "
                show-overflow-tooltip
                sortable="custom"
              >
                <template slot-scope="scope">
                  {{ scope.row.SuggesteFinishedTime.split(":")[0] + ":00:00" }}
                </template>
              </el-table-column>
              <el-table-column
                :label="$t('common:action:action')"
                width="250"
                fixed="right"
              >
                <template slot-scope="scope">
                  <!-- 阅片 -->
                  <el-button
                    :disabled="scope.row.ExistReadingApply"
                    circle
                    :title="
                      scope.row.ExistReadingApply
                        ? $t(
                            'trials:pendingReadingTasks:button:ExistReadingApply'
                          )
                        : $t('trials:pendingReadingTasks:button:review')
                    "
                    icon="el-icon-edit-outline"
                    @click="handleReadImage(scope.row)"
                  />
                  <!-- 上传 -->
                  <el-button
                    v-hasPermi="['role:ir']"
                    v-if="item.CriterionType === 0 && item.ImageUploadEnum > 0"
                    circle
                    icon="el-icon-upload2"
                    :title="$t('trials:pendingReadingTasks:button:upload')"
                    @click="openUploadImage(scope.row, item, 'upload')"
                  />
                  <!-- 下载 -->
                  <el-button
                    v-hasPermi="['role:ir']"
                    v-if="
                      item.CriterionType === 0 && item.ImageDownloadEnum > 0
                    "
                    circle
                    icon="el-icon-download"
                    :title="$t('trials:pendingReadingTasks:button:download')"
                    @click="openUploadImage(scope.row, item, 'download')"
                  />
                </template>
              </el-table-column>
            </el-table>
            <pagination
              class="page"
              :total="total"
              :page.sync="searchData.PageIndex"
              :limit.sync="searchData.PageSize"
              @pagination="getList"
            />
          </div>
        </div>
        <div
          v-else-if="
            isReadingTaskViewInOrder === 0 &&
            TrialReadingCriterionId === item.TrialReadingCriterionId
          "
        >
          <el-descriptions :column="2" border style="width: 800px">
            <!-- 剩余任务量 -->
            <el-descriptions-item
              :label="
                $t('trials:pendingReadingTasks:table:remainingTaskVolume')
              "
              :label-style="{ width: '200px' }"
            >
              <el-tag size="small" type="danger">{{
                randomReadInfo.UnReadTaskCount
              }}</el-tag>
            </el-descriptions-item>
            <!-- 剩余裁判量 -->
            <el-descriptions-item
              :label="
                $t('trials:pendingReadingTasks:table:amountOfJudgesRemaining')
              "
              :label-style="{ width: '200px' }"
            >
              <el-tag size="small" type="danger">{{
                randomReadInfo.UnReadJudgeTaskCount
              }}</el-tag>
            </el-descriptions-item>
            <!-- 已完成任务量 -->
            <el-descriptions-item
              :label="
                $t('trials:pendingReadingTasks:table:amountOfCompletedTasks')
              "
              :label-style="{ width: '200px' }"
            >
              <el-tag size="small">{{ randomReadInfo.FinishTaskCount }}</el-tag>
            </el-descriptions-item>
            <!-- 已完成裁判量 -->
            <el-descriptions-item
              :label="
                $t('trials:pendingReadingTasks:table:numberOfJudgesCompleted')
              "
              :label-style="{ width: '200px' }"
            >
              <el-tag size="small">{{
                randomReadInfo.FinishJudgeTaskCount
              }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <!-- 开始随机阅片 -->
              <el-button
                type="primary"
                size="small"
                :disabled="
                  randomReadInfo.UnReadTaskCount +
                    randomReadInfo.UnReadJudgeTaskCount ===
                  0
                "
                @click="handleOutOfOrderReading"
              >
                {{ $t("trials:pendingReadingTasks:button:beginRandomReview") }}
              </el-button>
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <!-- <template v-else-if="!isReadingTaskViewInOrder && isRender">
          <el-tabs v-model="TrialReadingCriterionId" type="border-card">
            <el-tab-pane v-for="i of trialCriterionList" :key="i.TrialReadingCriterionName" :label="i.TrialReadingCriterionName" :name="i.TrialReadingCriterionId">
              <el-descriptions :column="2" border style="width:800px">
                <el-descriptions-item label="剩余任务量" :label-style="{'width':'200px'}">
                  <el-tag size="small" type="danger">{{ randomReadInfo.UnReadTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="剩余裁判量" :label-style="{'width':'200px'}">
                  <el-tag size="small" type="danger">{{ randomReadInfo.UnReadJudgeTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="已完成任务量" :label-style="{'width':'200px'}">
                  <el-tag size="small">{{ randomReadInfo.FinishTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="已完成裁判量" :label-style="{'width':'200px'}">
                  <el-tag size="small">{{ randomReadInfo.FinishJudgeTaskCount }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                  <el-button
                    type="primary"
                    size="small"
                    :disabled="randomReadInfo.UnReadTaskCount+randomReadInfo.UnReadJudgeTaskCount ===0"
                    @click="handleOutOfOrderReading"
                  >
                    开始随机阅片
                  </el-button>
                </el-descriptions-item>
              </el-descriptions>
            </el-tab-pane>
          </el-tabs>
        </template> -->
      </el-tab-pane>
    </el-tabs>
    <upload-image
      v-if="uploadImageVisible"
      :visible.sync="uploadImageVisible"
      :SubjectId="uploadSubjectId"
      :Criterion="uploadTrialCriterion"
      :status="uploadStatus"
      @getList="getList"
    />
  </BaseContainer>
</template>
<script>
import {
  getIRUnReadSubjectTaskList,
  verifyReadingRestTime,
} from "@/api/trials";
import { getTrialCriterionList } from "@/api/trials/reading";
import BaseContainer from "@/components/BaseContainer";
import uploadImage from "@/components/uploadImage";
import Pagination from "@/components/Pagination";
import { getToken } from "@/utils/auth";
const searchDataDefault = () => {
  return {
    SubjectCode: "",
    PageIndex: 1,
    PageSize: 20,
  };
};
export default {
  name: "ReadingTaskList",
  components: { BaseContainer, Pagination, "upload-image": uploadImage },
  data() {
    return {
      searchData: searchDataDefault(),
      list: [],
      total: 0,
      loading: false,
      trialId: "",
      isReadingTaskViewInOrder: null,
      randomReadInfo: {},
      isRender: false,
      trialCriterionList: [],
      TrialReadingCriterionId: "",
      isTableShow: true,
      readingTool: null,
      criterionType: null,
      openWindow: null,

      // 上传
      uploadImageVisible: false,
      uploadSubjectId: null,
      uploadTrialCriterion: {},
      uploadStatus: "upload",
    };
  },
  watch: {
    TrialReadingCriterionId(v) {
      if (v) {
        this.getList();
      }
    },
  },
  mounted() {
    window.addEventListener("message", this.receiveMsg);
    this.trialId = this.$route.query.trialId;
    this.getTrialCriterionList();
  },
  beforeDestroy() {
    window.removeEventListener("message", this.receiveMsg);
    if (this.openWindow) {
      this.openWindow.close();
    }
  },
  methods: {
    // 打开上传下载弹框
    openUploadImage(item, trialCriterion, status) {
      this.uploadSubjectId = item.SubjectId;
      this.uploadTrialCriterion = trialCriterion;
      this.uploadStatus = status;
      this.uploadImageVisible = true;
    },
    getTrialCriterionList() {
      getTrialCriterionList(this.trialId)
        .then((res) => {
          this.trialCriterionList = res.Result;
          this.TrialReadingCriterionId =
            this.trialCriterionList[0].TrialReadingCriterionId;
        })
        .catch(() => {});
    },
    getList() {
      this.loading = true;
      this.searchData.TrialId = this.trialId;
      this.searchData.TrialReadingCriterionId = this.TrialReadingCriterionId;
      this.isRender = false;
      getIRUnReadSubjectTaskList(this.searchData)
        .then((res) => {
          this.isReadingTaskViewInOrder =
            res.OtherInfo.IsReadingTaskViewInOrder;
          this.readingTool = res.OtherInfo.ReadingTool;
          this.criterionType = res.OtherInfo.CriterionType;
          if (res.OtherInfo.IsReadingTaskViewInOrder) {
            this.list = res.Result.CurrentPageData;
            this.total = res.Result.TotalCount;
          } else {
            this.randomReadInfo = res.OtherInfo.RandomReadInfo;
          }
          this.isRender = true;
          this.loading = false;
        })
        .catch(() => {
          this.isRender = true;
          this.loading = false;
        });
    },
    handleSearch() {
      this.searchData.PageIndex = 1;
      this.getList();
    },
    handleReset() {
      this.searchData = searchDataDefault();
      this.getList();
    },
    handleReadImage(row) {
      if (this.openWindow) {
        this.openWindow.close();
      }
      this.loading = true;
      verifyReadingRestTime()
        .then((_) => {
          this.loading = false;

          window.localStorage.setItem(
            "TrialReadingCriterionId",
            this.TrialReadingCriterionId
          );
          var token = getToken();
          var path = "";
          if (this.readingTool === 0) {
            path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`;
          } else {
            path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&subjectCode=${row.SubjectCode}&subjectId=${row.SubjectId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`;
          }
          var routeData = this.$router.resolve({ path });

          this.openWindow = window.open(routeData.href, "_blank");
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleOutOfOrderReading() {
      if (this.openWindow) {
        this.openWindow.close();
      }
      this.loading = true;
      verifyReadingRestTime()
        .then((_) => {
          this.loading = false;
          window.localStorage.setItem(
            "TrialReadingCriterionId",
            this.TrialReadingCriterionId
          );
          var token = getToken();
          var path = "";
          if (this.readingTool === 0) {
            path = `/readingDicoms?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`;
          } else {
            path = `/noneDicomReading?TrialReadingCriterionId=${this.TrialReadingCriterionId}&trialId=${this.trialId}&isReadingTaskViewInOrder=${this.isReadingTaskViewInOrder}&criterionType=${this.criterionType}&readingTool=${this.readingTool}&TokenKey=${token}`;
          }
          var routeData = this.$router.resolve({ path });
          this.openWindow = window.open(routeData.href, "_blank");
        })
        .catch(() => {
          this.loading = false;
        });
    },
    receiveMsg(event) {
      if (event.data === "refreshTaskList") {
        this.getList();
      }
    },
    // 排序
    handleSortChange(column) {
      if (column.order === "ascending") {
        this.searchData.Asc = true;
      } else {
        this.searchData.Asc = false;
      }
      this.searchData.SortField = column.prop;
      this.searchData.PageIndex = 1;
      this.getList();
    },
  },
};
</script>
