<template>
  <div class="v-page">
    <div class="train-timeline">
      <div
        v-for="(info, i) in timeline"
        @click="changeActiveTimeLine(i + 1)"
        :key="i"
        :class="{
          'timeline-info-box': true,
          'timeline-info-box-active': activeTimeLine === i + 1,
        }"
      >
        <div class="timeline-index">{{ i + 1 }}</div>
        <h1 class="timeline-name">{{ info.name }}</h1>
        <div class="timeline-explain">{{ info.explain }}</div>
      </div>
    </div>
    <CreateTrain v-if="activeTimeLine == 1"></CreateTrain>
    <TrainMonitor v-if="activeTimeLine == 2"></TrainMonitor>
    <TrainEvealuation v-if="activeTimeLine == 3"></TrainEvealuation>
  </div>
</template>

<script>
import CreateTrain from './cteate-train/index.vue'
import TrainMonitor from './train-monitor/index.vue'
import TrainEvealuation from '../evealuation/train-evaluation/index.vue'
export default {
  components: { CreateTrain, TrainMonitor, TrainEvealuation },
  data () {
    return {
      activeTimeLine: 1,
      trainId: null,
      timeline: [
        {
          name: '训练设置',
          explain: '进行科目训练、训练设备、训练人员的基本设置'
        },
        {
          name: '训练监控',
          explain: '等待训练具备基本条件后再开始，进行实时的训练数据监控'
        },
        {
          name: '训练评估',
          explain: '进行训练成绩的统计和评估'
        }
      ]
    }
  },
  created () {
    this.initData()
  },
  activated () {
    this.initData()
  },
  methods: {
    changeActiveTimeLine (i) {
      if (this.activeTimeLine !== i) {
        this.activeTimeLine = i
        this.$router.push({ path: '/train/training', query: { step: i } })
      }
    },
    initData () {
      this.trainId = +this.$route.query.id
      this.activeTimeLine = +this.$route.query.step || 1
    }
  },
  watch: {
    $route: {
      deep: true,
      handler (news, old) {
        // this.initData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.v-page {
  flex-direction: column;
}
.train-timeline {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 80px;
  user-select: none;
  margin-bottom: 10px;
  .timeline-info-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #a0a0a0;
    flex: 1;
    cursor: pointer;
    border-bottom: 1px solid #f3f3f3;
    .timeline-index {
      min-width: 35px;
      min-height: 35px;
      background-color: #999999;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      color: white;
    }
    .timeline-name {
      font-size: 18px;
      margin: 5px 0;
    }
    .timeline-explain {
      margin: 2.5px 0;
      white-space: nowrap;
    }
  }
  .timeline-info-box-active {
    border-bottom: 1px solid #208ac6;
    .timeline-index {
      background-color: #208ac6;
    }
    .timeline-name {
      color: #208ac6;
    }
  }
}
</style>
