irc_web/.svn/pristine/c1/c1591a43d2bc6a8aed5c3a617371538b03bee8c0.svn-base

<template>
  <div class="enroll-container">
    <div class="content-wrapper" style="height: 170px">
      <div class="title">
        <!-- 项目基本信息 -->
        <p>{{ $t('trials:seletctedReviews:title:trialInfor') }}</p>
      </div>
      <div v-if="trialInfo" class="trial-wrapper">
        <div class="div-row">
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:indication') }}:</label>
            <span>{{ trialInfo.Indication }}</span>
          </div>
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:criterion') }}:</label>
            <span>{{ (trialInfo.CriterionList && trialInfo.CriterionList.length>0)? trialInfo.CriterionList.join(', '): '' }}</span>
          </div>
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:modality') }}:</label>
            <el-tooltip
              class="item"
              :content="trialInfo.Modalitys"
              placement="top"
            >
              <span>{{ trialInfo.Modalitys }}</span>
            </el-tooltip>
          </div>

        </div>
        <div class="div-row">
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:reviewMode') }}:</label>
            <!-- <span>{{ trialInfo.ReadingType }}</span> -->
            <span>{{ $fd('ReadingMethod', trialInfo.ReadingType) }}</span>
          </div>
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:totalReviewers') }}:</label>
            <span>{{ trialInfo.TotalReviewers }}</span>
          </div>
          <div class="div-col">
            <label class="el-label">{{ $t('trials:trials-list:form:typeofReviewers') }}:</label>
            <span>{{ $fd('AttendedReviewerType', trialInfo.AttendedReviewerType) }}</span>
          </div>
        </div>
      </div>
      <div class="title">
        <!-- 备选人员列表 -->
        <p>{{ $t('trials:spmEnroll:title:userList') }}</p>
      </div>
    </div>
    <div class="step-wrapper">
      <div class="step-content">
        <Approval
          ref="approval"
          @nextStep="nextStep"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Approval from './components/Approval'
import { getTrialInfoAndMaxTrialState } from '@/api/trials'
export default {
  name: 'Enroll',
  components: { Approval },
  data() {
    return {
      trialInfo: null,
      TrialId: '',
      activeStatus: null,
      TrialMaxState: 0
    }
  },
  mounted() {
    this.TrialId = this.$route.query.trialId
    this.initPage()
  },
  methods: {
    initPage() {
      getTrialInfoAndMaxTrialState(this.TrialId).then(res => {
        this.trialInfo = res.Result.TrialView
        var activeStatus = res.Result.TrialMaxState < 1 ? 0 : res.Result.TrialMaxState < 5 ? 1 : res.Result.TrialMaxState < 8 ? 2 : 3
        this.activeStatus = activeStatus
        this.TrialMaxState = activeStatus
      })
    },
    handleClick(step) {
      this.activeStatus = step
    },
    nextStep(stepName) {
      this.activeStatus = this.activeStatus === 3 ? 3 : this.activeStatus + 1
      this.TrialMaxState = this.activeStatus
      this.$nextTick(
        function() {
          this.$refs[stepName].getList()
        }.bind(this)
      )
    }

  }
}
</script>
<style lang="scss">
  .enroll-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .content-wrapper{
      height: 100px;
    }
    .step-wrapper{
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .el-steps{
      height: 80px;
    }
    .step-content{
      flex: 1;
    }
    .title {
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
      background: #e4ebf1;
      border-left: 3px solid #0fc8e0;
      font-size: 13px;
      p{
        padding: 0;
        margin: 0;
      }
    }
    .trial-wrapper{
      height: 60px;
      .div-row {
        display: flex;
        justify-content: space-between;
        margin: 10px 20px !important;
        font-size: 13px;
        .div-col {
          flex: 1;
          width: 100px;
          white-space: nowrap !important;
          text-overflow: ellipsis !important;
          word-break: break-word !important;
          overflow: hidden !important;
          label {
            font-weight: bold;
          }
        }
        .div-textarea {
          display: inline-block;
        }

      }
    }

    .underline{
      // .el-step__title {
      //   text-decoration: underline;
      // }
      .el-step__title,
      .el-step__title.is-process,
      .el-step__title.is-finish {
        text-decoration: underline;
      }
    }
    .noneUnderline{
      .el-step__title {
        text-decoration: none;
      }
    }
  .el-step__head.is-process,
  .el-step__title.is-process,
  .el-step__description.is-process {
    color: #428bca;
    border-color: #428bca;
  }
  .el-step__head.is-process .el-step__line {
    background-color: #428bca;
  }
  .el-step__head.is-finish,
  .el-step__title.is-finish,
  .el-step__description.is-finish {
    color: #303133;
    border-color: #303133;
  }
  .el-step__title.is-process,
  .el-step__title.is-finish {
    text-decoration: none;
  }
  .el-step__head.is-finish .el-step__line {
    background-color: #303133;
  }
  .click_cursor {
    cursor: pointer;
  }
  }
</style>