<template>
  <BaseContainer>
    <div class="step-wrapper">
      <el-steps :active="activeStatus" align-center :space="300">
        <!-- 中心填写 -->
        <el-step :title="$t('trials:siteResearch:timeline:step1')" class="click_cursor"
          @click.native="handleClick(0)" />
        <!-- SPM审核 -->
        <el-step v-if="isSPMJoin" :title="$t('trials:siteResearch:timeline:step2')" class="click_cursor"
          @click.native="handleClick(1)" />
        <!-- PM审核 -->
        <el-step :title="$t('trials:siteResearch:timeline:step3')" class="click_cursor"
          @click.native="handleClick(2)" />
        <!-- 审核完毕 -->
        <el-step :title="$t('trials:siteResearch:timeline:step14')" class="click_cursor"
          @click.native="handleClick(3)" />
      </el-steps>
      <div class="step-content">
        <ResearchList ref="researchList" :isAudit="isAudit" />
      </div>
    </div>
  </BaseContainer>
</template>
<script>
import { getTrialIsSPMJoin } from '@/api/research'
import BaseContainer from '@/components/BaseContainer'
import ResearchList from './components/ResearchList'
export default {
  name: 'SiteResearch',
  components: {
    BaseContainer,
    ResearchList
  },
  data() {
    return {
      isSPMJoin: true,
      activeStatus: 0
    }
  },
  watch: {
    activeStatus: {
      deep: true,
      immediate: true,
      handler(v) {
        this.$nextTick(() => {
          if (!this.isSPMJoin && v > 0) {
            this.$refs['researchList'].searchData.State = v + 1
          } else {
            this.$refs['researchList'].searchData.State = v
          }

          this.$refs['researchList'].getList()
        })

      }
    }
  },
  computed: {
    isAudit() {
      if (this.isSPMJoin) {
        return (this.hasPermi(['role:spm', 'role:cpm', 'role:apm']) && this.activeStatus === 1) || (this.hasPermi(['role:pm']) && this.activeStatus === 2)
      } else {
        return this.hasPermi(['role:pm']) && this.activeStatus === 1
      }
    }
  },
  mounted() {
    this.getTrialIsSPMJoin()
  },
  methods: {
    async getTrialIsSPMJoin() {
      try {
        let trialId = this.$route.query.trialId
        if (!trialId) return
        let res = await getTrialIsSPMJoin(trialId)
        this.isSPMJoin = res.Result
        if (this.isSPMJoin) {
          if (this.hasPermi(['role:pm'])) this.activeStatus = 2
          if (this.hasPermi(['role:spm', 'role:cpm', 'role:apm'])) this.activeStatus = 1
        } else {
          if (this.hasPermi(['role:pm'])) this.activeStatus = 1
          if (this.hasPermi(['role:spm', 'role:cpm', 'role:apm'])) this.activeStatus = 0
        }
      } catch (e) {
        console.log(e)
      }

    },
    handleClick(step) {
      this.activeStatus = step
      if (!this.isSPMJoin && step > 0) this.activeStatus = step - 1
    },

  }
}
</script>
<style lang="scss" scoped>
.step-wrapper {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.el-steps {
  height: 80px;
  justify-content: center;
}

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

::v-deep .el-step__head.is-process {
  color: #428bca;
  border-color: #428bca;
}

::v-deep .el-step__title.is-process {
  color: #428bca;
  border-color: #428bca;
}

::v-deep .el-step__description.is-process {
  color: #428bca;
  border-color: #428bca;
}

::v-deep .el-step__head.is-process .el-step__line {
  background-color: #428bca;
}

::v-deep .el-step__head.is-finish {
  color: #303133;
  border-color: #303133;
}

::v-deep .el-step__title.is-finish {
  color: #303133;
  border-color: #303133;
}

::v-deep .el-step__description.is-finish {
  color: #303133;
  border-color: #303133;
}

::v-deep .el-step__title.is-process {
  text-decoration: none;
}

::v-deep .el-step__title.is-finish {
  text-decoration: none;
}

::v-deep .el-step__head.is-finish .el-step__line {
  background-color: #303133;
}

.click_cursor {
  cursor: pointer;
}
</style>
