irc_web/src/views/trials/trials-workbench/index.vue

<style>
.user-status-item{
  width: 100px;
  height: 32px;
  line-height: 1;
  font-size: .75rem;
  color: #333;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 8px;
}
.my_select_box{
  margin-bottom: 12px;
  margin-top: 12px;
  padding: 0 12px 0 20px;
  cursor: pointer;
  min-height: 36px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.my_select_box_content{
  color: #333;
  font-size: .875rem;
  white-space:nowrap;
  display: flex;
  align-items: center;
}
.my_select_box_content_text{
  display: inline-block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 150px;
}
.my_select_box:hover{
  background: #f5f5f5;
}
.my_select_box.selected {
  color:#6698ff;
  background: rgba(102, 152, 255, .1);
}
.my_select_box.selected .my_select_box_content {
  color:#6698ff;
}
.my_select_title{
  height: 48px;
  padding: 0 8px;
  display: flex;
  font-size: .75rem;
  align-items: center;
  color: #999;
}
.my_select .my_select_box {
  margin-top: 0!important;
}
</style>
<template>
  <div class="workbench-container">
<!--    <div class="workbench-stats">-->
<!--      <PanelCount ref="panelCount" @getSignSystemDocCount="getSignSystemDocCount" />-->
<!--    </div>-->
      <div class="workbench-content" style="height: 100%;display: flex">
        <div class="workbench-content-left" style="width: 259px;border-right: 1px solid #eee;background: #fbfbfb">
          <div style="padding: 12px">
            <div class="user-profile-wrapper" style="padding: 24px 0 24px 12px;">
              <div style="display: flex;align-items: center;margin-bottom: 20px;" class="user-info">
                <div style="margin-right: 0.75rem;background: #428bca;width: 44px;height: 44px;border-radius: 50%;line-height: 44px;text-align: center;font-size: 12px;color:#fff;overflow: hidden">
                  {{ user.LastName }}
                </div>
                <div class="user-description" style="">
                  <div style="font-size: .875rem;color: #333;line-height: 22px;display: flex;margin-bottom: 0.25rem;"><span style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;max-width: 150px">{{user.RealName}}</span></div>
                  <div style="font-size: .75rem;line-height: 18px;color:#999">{{new Date().getFullYear()}}{{$t('common:date:today')}}{{new Date().getMonth() + 1}}{{$t('common:date:month')}}{{new Date().getDate()}}{{$t('common:date:day')}}，{{ dayOfWeek }}</div>
                </div>
              </div>
              <div class="user-status" style="display: flex">
                <div class="user-status-item" @click="$router.push('/trials/trials-myinfo')" style="margin-right: 0.75rem">
                  <span class="el-icon-setting" style="margin-right: 0.5rem"></span>
                  <span>{{$t('trials:trials-myinfo:title:accountInfo')}}</span>
                </div>
                <div class="user-status-item" @click="$router.push('/trials/trials-notice')">
                  <span class="el-icon-bell" style="margin-right: 0.5rem"></span>
                  <span style="margin-right: 0.5rem">｜</span>
                  <span>{{ tabList.SysNoticeUnReadCount }}</span>
                </div>
              </div>
            </div>
<!--            <div class="thy-divider" style="border-top: 1px solid #eee;margin: 0;"></div>-->
<!--            <div class="my_select_box" @click="$router.push('/trials/trials-list')">-->
<!--              <div class="my_select_box_content">-->
<!--                <span class="el-icon-box" style="padding: 4px;margin: 4px;color: #6698ff"></span>-->
<!--                <span>{{ $t('trials:tab:trials') }}</span>-->
<!--              </div>-->
<!--            </div>-->
            <div class="thy-divider" style="border-top: 1px solid #eee;margin: 0;"></div>
            <div class="my_select_title" style="font-size: 18px">{{ $t('trials:workbench:title:padding') }}</div>
            <div class="my_select">
              <!-- PM/APM -->
              <!-- 阅片期 -->
              <div class="my_select_box" :class="{selected: selected === 'consistencyCheck'}" tab-data="consistencyCheck" @click="selected = 'consistencyCheck'" v-if="hasPermi(['trials:trials-workbench:consistencyCheck'])">
                <div class="my_select_box_content">
                  <span class="el-icon-folder-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:tab:consistencyCheck') }}</span><span style="margin:0 0.25rem">·</span><span>{{tabList.PM_CheckCount}}</span>
                </div>
              </div>
              <!-- 重阅审批 -->
              <div class="my_select_box" :class="{selected: selected === 'RereadApproval'}" tab-data="RereadApproval" @click="selected = 'RereadApproval'" v-if="hasPermi(['trials:trials-workbench:rereadApproval'])">
                <div class="my_select_box_content">
                  <span class="el-icon-document-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:trials-panel:attachments:reReadingTracking') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.PM_ReReadingApprovalCount }}</span>
                </div>
              </div>
              <!-- 阅片人筛选 -->
              <div class="my_select_box" :class="{selected: selected === 'ReviewerScreen'}" tab-data="ReviewerScreen" @click="selected = 'ReviewerScreen'" v-if="hasPermi(['trials:trials-workbench:reviewerScreen'])">
                <div class="my_select_box_content">
                  <span class="el-icon-user" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:trials-list:PendingDetails:ReviewerSelection') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.PM_ReviewerSelectCount }}</span>
                </div>
              </div>
              <!-- 中心调研 -->
              <div class="my_select_box" :class="{selected: selected === 'SiteResearch'}" tab-data="SiteResearch" @click="selected = 'SiteResearch'" v-if="hasPermi(['trials:trials-workbench:attachments:site-research'])&&!hasPermi(['role:admin'])">
                <div class="my_select_box_content">
                  <span class="el-icon-edit-outline" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:pendingSiteResearch') }}</span><span style="margin:0 0.25rem">·</span><span>{{hasPermi(['role:pm'])? tabList.PM_SiteSurveryCount : tabList.SPM_SiteSurveryCount }}</span>
                </div>
              </div>
              <!-- SPM/CPM -->
              <!-- 阅片人审批 -->
              <div class="my_select_box" :class="{selected: selected === 'ReviewerApproval'}" tab-data="ReviewerApproval" @click="selected = 'ReviewerApproval'" v-if="hasPermi(['trials:trials-workbench:reviewerApproval'])">
                <div class="my_select_box_content">
                  <span class="el-icon-user" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:sysDocBeSigned:table:reviewerApproval') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.SPM_ReviewerApprovalCount }}</span>
                </div>
              </div>
              <!-- 重阅审批 -->
              <div class="my_select_box" :class="{selected: selected === 'SpmRereadApproval'}" tab-data="SpmRereadApproval" @click="selected = 'SpmRereadApproval'" v-if="hasPermi(['trials:trials-workbench:spmRereadApproval'])">
                <div class="my_select_box_content">
                  <span class="el-icon-document-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:trials-panel:attachments:reReadingTracking') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.SPM_ReReadingApprovalCount }}</span>
                </div>
              </div>
              <!-- CRC -->
              <!-- 加急影像提交 -->
              <div class="my_select_box" :class="{selected: selected === 'ImageSubmission'}" tab-data="ImageSubmission" @click="selected = 'ImageSubmission'" v-if="hasPermi(['trials:trials-workbenck:imageSubmission'])">
                <div class="my_select_box_content">
                  <span class="el-icon-circle-check" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:ExpeditedImageSubmission') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.CRC_ImageSubmitCount }}</span>
                </div>
              </div>
              <!-- 影像质疑 -->
              <div class="my_select_box" :class="{selected: selected === 'ImageQuestion'}" tab-data="ImageQuestion" @click="selected = 'ImageQuestion'" v-if="hasPermi(['trials:trials-workbench:imageQuestion'])">
                <div class="my_select_box_content">
                  <span class="el-icon-chat-dot-square" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:tab:crcQuality') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.CRC_ImageQuestionCount }}</span>
                </div>
              </div>
              <!-- 核查质疑 -->
              <div class="my_select_box" :class="{selected: selected === 'ImageVerification'}" tab-data="ImageVerification" @click="selected = 'ImageVerification'" v-if="hasPermi(['trials:trials-workbenck:imageVerification'])">
                <div class="my_select_box_content">
                  <span class="el-icon-money" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:sysDocBeSigned:table:ImageCheck') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.CRC_CheckQuestionCount }}</span>
                </div>
              </div>
              <!-- 影像重传 -->
              <div class="my_select_box" :class="{selected: selected === 'ImageReupload'}" tab-data="ImageReupload" @click="selected = 'ImageReupload'" v-if="hasPermi(['trials:trials-workbenck:imageReupload'])">
                <div class="my_select_box_content">
                  <span class="el-icon-upload" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:ImageRetransmission') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.CRC_ImageReUploadCount }}</span>
                </div>
              </div>
              <!-- IQC -->
              <!-- 影像质控 -->
              <div class="my_select_box" :class="{selected: selected === 'ImageQualityControl'}" tab-data="ImageQualityControl" @click="selected = 'ImageQualityControl'" v-if="hasPermi(['trials:trials-workbenck:imageQC'])">
                <div class="my_select_box_content">
                  <span class="el-icon-document-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:tab:dicomsQuality') }}<span style="margin:0 0.25rem"></span>·</span><span>{{ tabList.IQC_IamgeQCCount }}</span>
                </div>
              </div>
              <!-- QC质疑 -->
              <div class="my_select_box" :class="{selected: selected === 'QcQuestion'}" tab-data="QcQuestion" @click="selected = 'QcQuestion'" v-if="hasPermi(['trials:trials-workbenck:qcQuestion'])">
                <div class="my_select_box_content">
                  <span class="el-icon-chat-dot-square" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:tab:qcQuality') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.IQC_QCQuestionCount }}</span>
                </div>
              </div>
              <!-- IR -->
              <!-- 影像待阅 -->
              <div class="my_select_box" :class="{selected: selected === 'ImagesToRead'}" tab-data="ImagesToRead" @click="selected = 'ImagesToRead'" v-if="hasPermi(['trials:trials-workbenck:imagesToRead'])">
                <div class="my_select_box_content">
                  <span class="el-icon-collection" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:tab:pendingReadingTasks') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.IR_IamgeWaitReadingCount }}</span>
                </div>
              </div>
              <!-- 医学反馈 -->
              <div class="my_select_box" :class="{selected: selected === 'MedicalFeedback'}" tab-data="MedicalFeedback" @click="selected = 'MedicalFeedback'" v-if="hasPermi(['trials:trials-workbenck:medicalFeedback'])">
                <div class="my_select_box_content">
                  <span class="el-icon-document-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:trials-panel:tab:medicalFeedback') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.IR_MedicalReviewCount }}</span>
                </div>
              </div>
              <!-- MIM -->
              <!-- 医学审核 -->
              <div class="my_select_box" :class="{selected: selected === 'MedicalAudit'}" tab-data="MedicalAudit" @click="selected = 'MedicalAudit'" v-if="hasPermi(['trials:trials-workbenck:medicalAudit'])">
                <div class="my_select_box_content">
                  <span class="el-icon-document-checked" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:trials-panel:tab:pmMedicalFeedback') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.MIM_MedicalReviewCount }}</span>
                </div>
              </div>
              <!-- 项目签署文件 -->
              <div class="my_select_box" :class="{selected: selected === 'NeedSignTrialDoc'}" tab-data="NeedSignTrialDoc" @click="selected = 'NeedSignTrialDoc'" v-if="!hasPermi(['role:zys'])">
                <div class="my_select_box_content">
                  <span class="el-icon-receiving" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:trialDocBeSigned') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.TrialWaitSignDocCount }}</span>
                </div>
              </div>
              <!-- 系统签署文件 -->
              <div class="my_select_box" :class="{selected: selected === 'NeedSignSysDoc'}" tab-data="NeedSignSysDoc" @click="$nextTick(() => selected = 'NeedSignSysDoc')" v-if="!hasPermi(['role:zys'])">
                <div class="my_select_box_content">
                  <span class="el-icon-data-line" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:sysDocBeSigned') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.SysWaitSignDocCount }}</span>
                </div>
              </div>
            </div>
            <div class="thy-divider" style="border-top: 1px solid #eee;margin: 0;"></div>
            <div class="my_select_title" style="font-size: 18px">{{ $t('trials:workbench:title:my') }}</div>
            <div class="my_select">
              <!-- 项目已签署文件 -->
              <div class="my_select_box" :class="{selected: selected === 'NeedSignedTrialDoc'}" tab-data="NeedSignedTrialDoc" @click="selected = 'NeedSignedTrialDoc'" v-if="!hasPermi(['role:zys'])">
                <div class="my_select_box_content">
                  <span class="el-icon-receiving" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:trialDocSigned') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.TrialSignedDocCount }}</span>
                </div>
              </div>
              <!-- 系统已签署文件 -->
              <div class="my_select_box" :class="{selected: selected === 'NeedSignedSysDoc'}" tab-data="NeedSignedSysDoc" @click="$nextTick(() => selected = 'NeedSignedSysDoc')" v-if="!hasPermi(['role:zys'])">
                <div class="my_select_box_content">
                  <span class="el-icon-data-line" style="padding: 4px;margin: 4px;color: #6698ff"></span>
                  <span class="my_select_box_content_text">{{ $t('trials:workbench:title:sysDocSigned') }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.SysSignedDocCount }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div style="width: auto;flex:1;padding: 0 20px">
          <!-- 加急影像提交 -->
          <ImageSubmission v-if="selected === 'ImageSubmission'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- PM/APM -->
          <!-- 阅片期 -->
          <!--            <el-tab-pane name="clinicalDataPM" v-if="hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])" :label="`${$t('trials:crcUpload:label:clinicalData')} (${tabList.PM_ClinicalDataCount})`">-->
          <!--                <clinicalDataPM v-if="activeName === 'clinicalDataPM'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
          <!--            </el-tab-pane>-->
            <consistencyCheck v-if="selected === 'consistencyCheck'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             重阅审批 -->
            <RereadApproval v-if="selected === 'RereadApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             阅片人筛选 -->
            <ReviewerScreen v-if="selected === 'ReviewerScreen'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             中心调研 -->
            <SiteResearch v-if="selected === 'SiteResearch'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             SPM/CPM -->
          <!--             阅片人审批 -->
            <ReviewerApproval v-if="selected === 'ReviewerApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             重阅审批 -->
            <SpmRereadApproval v-if="selected === 'SpmRereadApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!--             CRC -->
          <!--             临床数据录入 -->
<!--            <clinicalData v-if="selected === 'clinicalData'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
          <!--             临床数据确认 -->
<!--            <clinicalDataConfirm v-if="selected === 'clinicalDataConfirm'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
          <!-- 影像质疑 -->
            <ImageQuestion v-if="selected === 'ImageQuestion'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- 核查质疑 -->
            <ImageVerification v-if="selected === 'ImageVerification'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- 影像重传 -->
            <ImageReupload v-if="selected === 'ImageReupload'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- IQC -->
          <!-- 影像质控 -->
            <ImageQualityControl v-if="selected === 'ImageQualityControl'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- QC质疑 -->
            <QcQuestion v-if="selected === 'QcQuestion'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0" />
          <!-- IR -->
          <!-- 影像待阅 -->
            <ImagesToRead v-if="selected === 'ImagesToRead'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- 医学反馈 -->
            <MedicalFeedback v-if="selected === 'MedicalFeedback'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- MIM -->
          <!-- 医学审核 -->
            <MedicalAudit v-if="selected === 'MedicalAudit'" :trial-id-list="trialIdList" :is-sign-system-doc="tabList.SysWaitSignDocCount > 0 && !isTestUser" />
          <!-- 项目签署文件 -->
            <NeedSignTrialDoc v-if="selected === 'NeedSignTrialDoc'" :is-sign-system-doc="isSignSystemDoc" />
          <!-- 系统签署文件 -->
            <NeedSignSysDoc v-if="selected === 'NeedSignSysDoc'" @refreshStats="refreshSysData" />
          <!-- 项目签署文件 -->
          <NeedSignedTrialDoc v-if="selected === 'NeedSignedTrialDoc'" :is-sign-system-doc="isSignSystemDoc" />
          <!-- 系统签署文件 -->
          <NeedSignedSysDoc v-if="selected === 'NeedSignedSysDoc'" :is-signed="true" @refreshStats="refreshStats" />
        </div>
<!--        <div v-show="false" style="height: 100%;position: relative">-->
<!--          <div style="font-weight:900;font-size: 20px;position: absolute;line-height: 60px;text-align: left;white-space: nowrap;padding-left: 20px" :style="{width: width + 'px'}">-->
<!--            {{ $t('trials:workbench:label:pendingTasksStats') }} ({{tabList.TotalCount}})-->
<!--          </div>-->
<!--          <el-tabs v-model="activeName" style="height: 100%" tab-position="left">-->
<!--            &lt;!&ndash; PM/APM &ndash;&gt;-->
<!--            &lt;!&ndash; 阅片期 &ndash;&gt;-->
<!--&lt;!&ndash;            <el-tab-pane name="clinicalDataPM" v-if="hasPermi(['trials:trials-panel:subject:readingPeriod:edit'])" :label="`${$t('trials:crcUpload:label:clinicalData')} (${tabList.PM_ClinicalDataCount})`">&ndash;&gt;-->
<!--&lt;!&ndash;                <clinicalDataPM v-if="activeName === 'clinicalDataPM'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />&ndash;&gt;-->
<!--&lt;!&ndash;            </el-tab-pane>&ndash;&gt;-->
<!--            <el-tab-pane name="consistencyCheck" v-if="hasPermi(['trials:trials-workbench:consistencyCheck'])" :label="`${$t('trials:tab:consistencyCheck')} (${tabList.PM_CheckCount})`">-->
<!--                <consistencyCheck v-if="activeName === 'consistencyCheck'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             重阅审批 &ndash;&gt;-->
<!--            <el-tab-pane name="RereadApproval" v-if="hasPermi(['trials:trials-workbench:rereadApproval'])" :label="`${$t('trials:trials-panel:attachments:reReadingTracking')} (${tabList.PM_ReReadingApprovalCount})`">-->
<!--                <RereadApproval v-if="activeName === 'RereadApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             阅片人筛选 &ndash;&gt;-->
<!--            <el-tab-pane name="ReviewerScreen" v-if="hasPermi(['trials:trials-workbench:reviewerScreen'])" :label="`${$t('trials:trials-list:PendingDetails:ReviewerSelection')} (${tabList.PM_ReviewerSelectCount})`">-->
<!--                <ReviewerScreen v-if="activeName === 'ReviewerScreen'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             中心调研 &ndash;&gt;-->
<!--            <el-tab-pane name="SiteResearch" v-if="hasPermi(['trials:trials-workbench:reviewerScreen'])" :label="`${$t('trials:workbench:title:pendingSiteResearch')} (${tabList.PM_SiteSurveryCount})`">-->
<!--                <SiteResearch v-if="activeName === 'SiteResearch'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             SPM/CPM &ndash;&gt;-->
<!--&lt;!&ndash;             阅片人审批 &ndash;&gt;-->
<!--            <el-tab-pane name="ReviewerApproval" v-if="hasPermi(['trials:trials-workbench:reviewerApproval'])" :label="`${$t('trials:sysDocBeSigned:table:reviewerApproval')} (${tabList.SPM_ReviewerApprovalCount})`">-->
<!--                <ReviewerApproval v-if="activeName === 'ReviewerApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             重阅审批 &ndash;&gt;-->
<!--            <el-tab-pane name="SpmRereadApproval" v-if="hasPermi(['trials:trials-workbench:spmRereadApproval'])" :label="`${$t('trials:trials-panel:attachments:reReadingTracking')} (${tabList.SPM_ReReadingApprovalCount})`">-->
<!--                <SpmRereadApproval v-if="activeName === 'SpmRereadApproval'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             CRC &ndash;&gt;-->
<!--&lt;!&ndash;             临床数据录入 &ndash;&gt;-->
<!--            <el-tab-pane name="clinicalData" v-if="hasPermi(['trials:trials-workbench:clinicalDataEntry'])" :label="`${$t('trials:workbench:title:ClinicalDataEnter')} (${tabList.CRC_ClinicalDataTobeDoneCount})`">-->
<!--                <clinicalData v-if="activeName === 'clinicalData'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--&lt;!&ndash;             临床数据确认 &ndash;&gt;-->
<!--            <el-tab-pane name="consistencyCheck" v-if="hasPermi(['trials:trials-workbench:clinicalDataEntry'])" :label="`${$t('trials:audit:tab:clinicalDataconfirm')} (${tabList.CRC_ClinialDataTobeConfirmCount})`">-->
<!--                <clinicalDataConfirm v-if="activeName === 'clinicalDataConfirm'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 影像质疑 &ndash;&gt;-->
<!--            <el-tab-pane name="ImageQuestion" v-if="hasPermi(['trials:trials-workbench:imageQuestion'])" :label="`${$t('trials:tab:crcQuality')} (${tabList.CRC_ImageQuestionCount})`">-->
<!--                <ImageQuestion v-if="activeName === 'ImageQuestion'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 核查质疑 &ndash;&gt;-->
<!--            <el-tab-pane name="ImageVerification" v-if="hasPermi(['trials:trials-workbenck:imageVerification'])" :label="`${$t('trials:sysDocBeSigned:table:ImageCheck')} (${tabList.CRC_CheckQuestionCount})`">-->
<!--                <ImageVerification v-if="activeName === 'ImageVerification'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 影像重传 &ndash;&gt;-->
<!--            <el-tab-pane name="ImageReupload" v-if="hasPermi(['trials:trials-workbenck:imageReupload'])" :label="`${$t('trials:workbench:title:ImageRetransmission')} (${tabList.CRC_ImageReUploadCount})`">-->
<!--                <ImageReupload v-if="activeName === 'ImageReupload'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 加急影像提交 &ndash;&gt;-->
<!--            <el-tab-pane name="ImageSubmission" v-if="hasPermi(['trials:trials-workbenck:imageSubmission'])" :label="`${$t('trials:workbench:title:ExpeditedImageSubmission')} (${tabList.CRC_ImageSubmitCount})`">-->
<!--                <ImageSubmission v-if="activeName === 'ImageSubmission'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; IQC &ndash;&gt;-->
<!--            &lt;!&ndash; 影像质控 &ndash;&gt;-->
<!--            <el-tab-pane name="ImageQualityControl" v-if="hasPermi(['trials:trials-workbenck:imageQC'])" :label="`${$t('trials:tab:dicomsQuality')} (${tabList.IQC_IamgeQCCount})`">-->
<!--                <ImageQualityControl v-if="activeName === 'ImageQualityControl'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; QC质疑 &ndash;&gt;-->
<!--            <el-tab-pane name="QcQuestion" v-if="hasPermi(['trials:trials-workbenck:qcQuestion'])" :label="`${$t('trials:tab:qcQuality')} (${tabList.IQC_QCQuestionCount})`">-->
<!--                <QcQuestion v-if="activeName === 'QcQuestion'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; IR &ndash;&gt;-->
<!--            &lt;!&ndash; 影像待阅 &ndash;&gt;-->
<!--            <el-tab-pane name="ImagesToRead" v-if="hasPermi(['trials:trials-workbenck:imagesToRead'])" :label="`${$t('trials:tab:pendingReadingTasks')} (${tabList.IR_IamgeWaitReadingCount})`">-->
<!--                <ImagesToRead v-if="activeName === 'ImagesToRead'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 医学反馈 &ndash;&gt;-->
<!--            <el-tab-pane name="MedicalFeedback" v-if="hasPermi(['trials:trials-workbenck:medicalFeedback'])" :label="`${$t('trials:trials-panel:tab:medicalFeedback')} (${tabList.IR_MedicalReviewCount})`">-->
<!--                <MedicalFeedback v-if="activeName === 'MedicalFeedback'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; MIM &ndash;&gt;-->
<!--            &lt;!&ndash; 医学审核 &ndash;&gt;-->
<!--            <el-tab-pane name="MedicalAudit" v-if="hasPermi(['trials:trials-workbenck:medicalAudit'])" :label="`${$t('trials:trials-panel:tab:pmMedicalFeedback')} (${tabList.MIM_MedicalReviewCount})`">-->
<!--                <MedicalAudit v-if="activeName === 'MedicalAudit'" :trial-id-list="trialIdList" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 项目签署文件 &ndash;&gt;-->
<!--            <el-tab-pane  name="NeedSignTrialDoc" v-if="!hasPermi(['role:zys'])" :label="`${$t('trials:workbench:title:trialDocBeSigned')} (${tabList.TrialWaitSignDocCount})`">-->
<!--              <NeedSignTrialDoc v-if="activeName === 'NeedSignTrialDoc'" :is-sign-system-doc="isSignSystemDoc" />-->
<!--            </el-tab-pane>-->
<!--            &lt;!&ndash; 系统签署文件 &ndash;&gt;-->
<!--            <el-tab-pane name="NeedSignSysDoc" v-if="!hasPermi(['role:zys'])" :label="`${$t('trials:workbench:title:sysDocBeSigned')} (${tabList.SysWaitSignDocCount})`">-->
<!--                <NeedSignSysDoc v-if="activeName === 'NeedSignSysDoc'" @refreshStats="refreshStats" />-->
<!--            </el-tab-pane>-->
<!--          </el-tabs>-->
<!--        </div>-->
      </div>
  </div>
</template>

<script>
import PanelCount from './components/panelCount'
import NeedSignTrialDoc from './components/needSignTrialDoc'
import SiteResearch from './components/siteResearch'
import NeedSignSysDoc from './components/needSignSysDoc'
import NeedSignedSysDoc from './components/needSignedSysDoc'
import consistencyCheck from './components/consistencyCheck'
import clinicalData from './components/clinicalData'
import clinicalDataConfirm from './components/clinicalDataConfirm'
import clinicalDataPM from './components/clinicalDataPM'
import RereadApproval from './components/rereadApproval'
import ReviewerScreen from './components/reviewerScreen'
import ReviewerApproval from './components/reviewerApproval'
import SpmRereadApproval from './components/spmRereadApproval'
import ImageQuestion from './components/imageQuestion'
import ImageVerification from './components/imageVerification'
import ImageReupload from './components/imageReupload'
import ImageSubmission from './components/imageSubmission'
import ImageQualityControl from './components/imageQualityControl'
import QcQuestion from './components/qcQuestion'
import ImagesToRead from './components/imagesToRead'
import MedicalFeedback from './components/medicalFeedback'
import MedicalAudit from './components/medicalAudit'
import NeedSignedTrialDoc from './components/NeedSignedTrialDoc'
import store from '@/store'
import './index.css'

import {getUserTobeDoneRecord, getNeedSignTrialDocTrialIdList,getWaitSignSysDocList, getTrialSignDocumentList} from '@/api/trials'
import { getUser } from '@/api/admin'
import {mapGetters, mapState} from "vuex";

export default {
  name: 'WorkBench',
  components: {
    clinicalDataConfirm,
    clinicalDataPM,
    PanelCount,
    NeedSignTrialDoc,
    SiteResearch,
    NeedSignSysDoc,
    consistencyCheck,
    clinicalData,
    RereadApproval,
    ReviewerScreen,
    ReviewerApproval,
    SpmRereadApproval,
    ImageQuestion,
    ImageVerification,
    ImageReupload,
    ImageSubmission,
    ImageQualityControl,
    QcQuestion,
    ImagesToRead,
    MedicalFeedback,
    MedicalAudit,
    NeedSignedTrialDoc,
    NeedSignedSysDoc
  },
  data() {
    return {
      isSignSystemDoc: false,
      trialIdList: [],
      tabList: {},
      activeName: '',
      width: 0,
      user: {},
      selected: null,
      dayOfWeek: null,
      hoursTip: null
    }
  },
  computed: {
    ...mapGetters(['userId', 'name']),
    ...mapState('user', ['isTestUser'])
  },
  mounted() {
    this.getUserTobeDoneRecord()
    this.getNeedSignTrialDocTrialIdList()
    this.getUserInfo()
    const days = [this.$t('common:date:Sunday'), this.$t('common:date:Monday'), this.$t('common:date:Tuesday'), this.$t('common:date:Wednesday'), this.$t('common:date:Thursday'), this.$t('common:date:Friday'), this.$t('common:date:Saturday')];
    const date = new Date();
    this.dayOfWeek = days[date.getDay()];
    let date2=(new Date()).getHours();
    let hoursTip = "";
    if(date2>=6&&date2<12){
      hoursTip= this.$t('common:date:good morning')
    }else if(date2>=12&&date2<18){
      hoursTip=this.$t('common:date:good afternoon')
    }else{
      hoursTip=this.$t('common:date:good evening')
    }
    this.hoursTip = hoursTip
  },
  methods: {
    getUserInfo() {
      getUser(this.userId).then(async res => {
        this.user = res.Result
      }).catch(() => { loading.close() })
    },
    tabClick(e) {
      console.log(e)
    },
    getSignSystemDocCount(count) {
      this.isSignSystemDoc = count > 0
    },
    refreshStats() {
      // this.$refs['panelCount'].getData()
      this.getNeedSignTrialDocTrialIdList()
    },
    getNeedSignTrialDocTrialIdList() {
      getNeedSignTrialDocTrialIdList().then(res => {
        this.trialIdList = res.Result
        this.$nextTick(() => {
          var list = document.querySelectorAll('div[tab-data]')
          list.forEach((v, i) => {
            if (i === 0) {
              let item = v.getAttribute('tab-data')
              this.selected = item
            }
          })
        })
      })
    },
    refreshSysData(){
      --this.tabList.SysWaitSignDocCount
      store.dispatch('user/setTotalNeedSignSystemDocCount', this.tabList.SysWaitSignDocCount)
    },
    getUserTobeDoneRecord() {
      getUserTobeDoneRecord().then(async res => {
        this.tabList = res.Result
        await store.dispatch('user/setTotalNeedSignSystemDocCount', this.tabList.SysWaitSignDocCount)
      })
    }
  }
}
</script>

<style lang="scss">
.workbench-container {
  .el-tabs__nav {
    transform: translateY(60px) !important;
  }

  .el-tabs__header {
    position: relative;
    width: 260px !important;
  }

  ::-webkit-scrollbar {
    width: 7px;
    height: 7px;
  }

  ::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #d0d0d0;
  }

  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;

  .workbench-stats {
    height: 120px;
  }

  .workbench-content {
    flex: 1;
    overflow-y: auto;

    .content-wrapper {
      width: 100%;
      height: 100%;
      display: flex;
      flex-flow: wrap;
      padding: 5px;

      .item {
        width: 50%;
        height: 500px;
        padding: 5px;
        box-sizing: border-box;

        .el-card__body {
          height: 100%;
        }
      }
    }
  }

  .table-row__p {
    color: #53646f;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 0px;
  }

  .table-row__span {
    color: #9eabb4;
    font-weight: 300;
    font-size: 12px;
  }

  .el-row {
    .el-col {
      padding: 5px;
    }
  }

  .status:before {
    content: '';
    margin-bottom: 0;
    width: 9px;
    height: 9px;
    display: inline-block;
    margin-right: 7px;
    border-radius: 50%;
  }

  .status--red:before {
    background-color: #e36767;
  }

  .status--red {
    color: #e36767;
  }

  .status--blue:before {
    background-color: #3fd2ea;
  }

  .status--blue {
    color: #3fd2ea;
  }

  .status--yellow:before {
    background-color: #ecce4e;
  }

  .status--yellow {
    color: #ecce4e;
  }

  .status--green {
    color: #6cdb56;
  }

  .status--green:before {
    background-color: #6cdb56;
  }

  .status--grey {
    color: #9eabb4;
  }

  .status--grey:before {
    background-color: #9eabb4;
  }

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>