<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" />
      </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: false,
      activeStatus: 0
    }
  },
  watch: {
    activeStatus: {
      deep: true,
      immediate: true,
      handler(v) {
        this.$nextTick(() => {
          this.$refs['researchList'].searchData.State = v
          this.$refs['researchList'].getList()
        })

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

    },
    handleClick(step) {
      this.activeStatus = step
    },

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

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