<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="height:100%;width: 259px;border-right: 1px solid #eee;background: #fbfbfb">
        <div style="padding: 12px;height:100%;">
          <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" v-if="!isEN">{{ 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 style="font-size: .75rem;line-height: 18px;color:#999" v-else>{{ moment().format('DDMMMYYYY') }}，{{
                  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="menuBox">
            <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 === 'ReuploadAudit' }" tab-data="ReuploadAudit"
                @click="selected = 'ReuploadAudit'" v-if="hasPermi(['trials:trials-workbench:ReuploadAudit'])">
                <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:ReuploadAudit')
                  }}</span><span style="margin:0 0.25rem">·</span><span>{{ tabList.PM_ImageBackApprovalCount }}</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', 'role:apm']) ?
                      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" :title="$t('trials:workbench:title:trialDocSigned')">{{
                    $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" :title="$t('trials:workbench:title:sysDocSigned')">{{
                    $t('trials:workbench:title:sysDocSigned') }}</span><span style="margin:0 0.25rem">·</span><span>{{
                      tabList.SysSignedDocCount }}</span>
                </div>
              </div>
            </div>
            <!--稽查文档-->
            <template
              v-if="hasPermi(['trials:trials-workbench:updateGeneralTraining', 'trials:trials-workbench:viewGeneralTraining', 'trials:trials-workbench:updateAuditDocument', 'trials:trials-workbench:viewAuditDocument'])">
              <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:auditDocument') }}
              </div>
              <div class="my_select">
                <!-- 通用培训管理 -->
                <div class="my_select_box" :class="{ selected: selected === 'viewGeneralTraining' }"
                  tab-data="viewGeneralTraining" @click="selected = 'viewGeneralTraining'"
                  v-if="hasPermi(['trials:trials-workbench:viewGeneralTraining'])">
                  <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:viewGeneralTraining') }}</span>
                  </div>
                </div>
                <!-- 稽查文档 -->
                <div class="my_select_box" :class="{ selected: selected === 'viewAuditDocument' }"
                  tab-data="viewAuditDocument" @click="handleClick('viewAuditDocument')"
                  v-if="hasPermi(['trials:trials-workbench:viewAuditDocument'])">
                  <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:viewAuditDocument') }}</span>
                  </div>
                </div>
                <!-- 培训课程管理 -->
                <div class="my_select_box" :class="{ selected: selected === 'updateGeneralTraining' }"
                  tab-data="updateGeneralTraining" @click="selected = 'updateGeneralTraining'"
                  v-if="hasPermi(['trials:trials-workbench:updateGeneralTraining'])">
                  <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:updateGeneralTraining') }}</span>
                  </div>
                </div>
                <!-- 稽查文档管理 -->
                <div class="my_select_box" :class="{ selected: selected === 'updateAuditDocument' }"
                  tab-data="updateAuditDocument" @click="handleClick('updateAuditDocument')"
                  v-if="hasPermi(['trials:trials-workbench:updateAuditDocument'])">
                  <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:updateAuditDocument') }}</span>
                  </div>
                </div>
                <!-- 稽查管理 -->
                <div class="my_select_box" :class="{ selected: selected === 'inspectionManagement' }"
                  tab-data="updateAuditDocument" @click="handleClick('inspectionManagement')"
                  v-if="hasPermi(['trials:trials-workbench:inspectionManagement'])">
                  <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:inspectionManagement') }}</span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
      <div style="width: auto;flex:1;padding: 0 20px;max-width: calc(100% - 250px);">
        <!-- 加急影像提交 -->
        <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" />
        <!--             重c传审批 -->
        <ReuploadAudit v-if="selected === 'ReuploadAudit'" :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" />
        <!--通用培训记录-->
        <generalTraining v-if="selected === 'viewGeneralTraining'" :isManage="false" />
        <!--稽查文档-->
        <auditDocumentView v-if="selected === 'viewAuditDocument'" :isManage="false" />
        <!--培训课程管理-->
        <generalTraining v-if="selected === 'updateGeneralTraining'" :isManage="true" />
        <!--稽查文档管理-->
        <auditDocument v-if="selected === 'updateAuditDocument'" :isManage="true" />
        <!--稽查管理-->
        <inspectionManagement v-if="selected === 'inspectionManagement'" />
      </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 auditDocument from "./components/auditDocument"
import auditDocumentView from "./components/auditDocument/view"
import generalTraining from "./components/generalTraining"
import ReuploadAudit from "./components/ReuploadAudit"
import inspectionManagement from "./components/inspectionManagement"
import store from '@/store'
import './index.css'
import moment from "moment";
import { getUserTobeDoneRecord, getNeedSignTrialDocTrialIdList } from '@/api/trials'
import { getUser } from '@/api/admin'
import { mapGetters, mapState } from "vuex";

export default {
  name: 'WorkBench',
  components: {
    auditDocument,
    auditDocumentView,
    generalTraining,
    inspectionManagement,
    clinicalDataConfirm,
    clinicalDataPM,
    PanelCount,
    NeedSignTrialDoc,
    SiteResearch,
    NeedSignSysDoc,
    consistencyCheck,
    clinicalData,
    RereadApproval,
    ReviewerScreen,
    ReviewerApproval,
    SpmRereadApproval,
    ImageQuestion,
    ImageVerification,
    ImageReupload,
    ImageSubmission,
    ImageQualityControl,
    QcQuestion,
    ImagesToRead,
    MedicalFeedback,
    MedicalAudit,
    NeedSignedTrialDoc,
    NeedSignedSysDoc,
    ReuploadAudit
  },
  data() {
    return {
      NODE_ENV: process.env.NODE_ENV, // process.env.NODE_ENV
      moment,
      isSignSystemDoc: false,
      trialIdList: [],
      tabList: {},
      activeName: '',
      width: 0,
      user: {},
      selected: null,
      dayOfWeek: null,
      hoursTip: null
    }
  },
  computed: {
    ...mapGetters(['userId', 'name']),
    ...mapState('user', ['isTestUser']),
    isEN() {
      return this.$i18n.locale !== 'zh'
    },
  },
  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
    this.$EventBus.$on("reload", (data) => {
      zzSessionStorage.removeItem('lastWorkbench')
      window.location.reload()
    });
  },
  methods: {
    handleClick(key) {
      this.selected = null;
      this.$nextTick(() => {
        this.selected = key
      })
    },
    getUserInfo() {
      getUser().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 = this.tabList.SysWaitSignDocCount - 1
      // this.tabList.SysSignedDocCount = this.tabList.SysWaitSignDocCount + 1
      // store.dispatch('user/setTotalNeedSignSystemDocCount', this.tabList.SysWaitSignDocCount)
      this.getUserTobeDoneRecord()
    },
    getUserTobeDoneRecord() {
      getUserTobeDoneRecord().then(async res => {
        this.tabList = res.Result
        this.isSignSystemDoc = this.tabList.IsFirstSysDocNeedSign
        await store.dispatch('user/setTotalNeedSignSystemDocCount', this.tabList.SysWaitSignDocCount)
        await store.dispatch('user/setIsFirstSysDocNeedSign', this.tabList.IsFirstSysDocNeedSign)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.menuBox {
  width: 100%;
  height: calc(100% - 150px);
  overflow-y: auto;

  &::-webkit-scrollbar {
    //display: none; /* Chrome Safari */
    width: 8px;
    height: 8px;
    background-color: #e4e4e4;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #a1a3a9;
    border-radius: 6px;
  }
}

.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>
