irc_web/.svn/pristine/e8/e8f44a33cfeba2a333e289b7454037203323a30f.svn-base

<template>
  <div class="enroll-container">
    <div class="content-wrapper">
      <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>-->
<!--            &lt;!&ndash; <span>{{ trialInfo.ReadingType }}</span> &ndash;&gt;-->
<!--            <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 class="div-col">
          </div>
        </div>
      </div>
      <div class="title">
        <!-- 入组详情 -->
        <p>{{ $t('trials:seletctedReviews:title:enrollment') }}</p>
      </div>
    </div>
    <div class="step-wrapper">
      <el-steps :active="activeStatus" style="margin-top: 70px" align-center :space="300">
        <!-- Selection -->
        <el-step
          :title="$t('trials:seletctedReviews:timeline:selection')"
          class="click_cursor"
          :class="[TrialMaxState >= 0 ? 'underline' : 'noneUnderline']"
          @click.native="handleClick(0)"
        />
        <!-- Submission -->
        <el-step
          :title="$t('trials:seletctedReviews:timeline:submission')"
          class="click_cursor"
          :class="[TrialMaxState >= 1 ? 'underline' : 'noneUnderline']"
          @click.native="handleClick(1)"
        />
        <!-- Approval -->
        <el-step
          :title="$t('trials:seletctedReviews:timeline:approval')"
          class="click_cursor"
          :class="[TrialMaxState >= 2 ? 'underline' : 'noneUnderline']"
          @click.native="handleClick(2)"
        />
        <!-- Confirmation -->
        <el-step
          :title="$t('trials:seletctedReviews:timeline:confirmation')"
          class="click_cursor"
          :class="[TrialMaxState >= 3 ? 'underline' : 'noneUnderline']"
          @click.native="handleClick(3)"
        />
      </el-steps>
      <div class="step-content">
        <Selection
          v-if="activeStatus===0"
          @nextStep="nextStep"
        />
        <Submission
          v-if="activeStatus===1"
          ref="submission"
          @nextStep="nextStep"
        />
        <Approval
          v-if="activeStatus===2"
          ref="approval"
          @nextStep="nextStep"
        />
        <Confirmation
          v-if="activeStatus===3"
          ref="confirmation"
        />
      </div>
    </div>
  </div>
</template>
<script>
import Selection from './components/Selection'
import Submission from './components/Submission'
import Approval from './components/Approval'
import Confirmation from './components/Confirmation'
import { getTrialInfoAndMaxTrialState } from '@/api/trials'
export default {
  name: 'Enroll',
  components: { Selection, Submission, Approval, Confirmation },
  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: #00d1b2;
    border-color: #00d1b2;
  }
  .el-step__head.is-process .el-step__line {
    background-color: #00d1b2;
  }
  .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>