<template>
  <div class="main-page">
    <router-view/>
    <div class="bottom-bar">
      <div class="bottom-tab" @click="selectTab('SignUp')">
        <div :class="['text', currentPage()==='SignUp'?'active':'']">健步挑战赛</div>
      </div>
      <div class="bottom-tab" @click="selectTab('nowGame')">
        <div :class="['text', (currentPage()==='MainPagePartakeChallenge'||currentPage()==='MainPageHaveJoinedGame')?'active':'']">{{index1Name}}</div>
      </div>
      <div class="bottom-tab" @click="selectTab('UserCenter')">
        <div :class="['text', currentPage()==='UserCenter'?'active':'']">我的</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "MainPage",
    data() {
      return {
      }
    },
    created(){
    },
    methods: {
      selectTab(item) {
        if (item === 'nowGame') {
          if (true) {
            this.$router.push({name: 'MainPagePartakeChallenge'});
          } else {
            this.$router.push({name: 'MainPageHaveJoinedGame'});
          }
        } else {
          this.$router.push({name: item});
        }
      },
      currentPage() {
        return this.$router.history.current.name;
      }
    },
    computed: {
      index1Name() {
        const userHaveJoinGame = sessionStorage.getItem('userHaveJoinGame');
        if (userHaveJoinGame === 'true') {
          return '比赛中';
        } else {
          return '我的比赛';
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .main-page {
    height: 100vh;
    padding-bottom: .9rem;
    box-sizing: border-box;
    .bottom-bar {
      width: 100%;
      height: .9rem;
      background: #fff;
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
      box-shadow: 0 -0.01rem 0 #e5e5e5;
      .bottom-tab {
        flex: 1;
        height: 100%;
        display: flex;
        justify-content: center;
        .text {
          height: 100%;
          font-size: .3rem;
          line-height: .9rem;
          color: #333;
          &.active {
            color: #07C9D1;
            position: relative;
            &:after {
              content: '';
              width: 100%;
              height: .08rem;
              background: #07C9D1;
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
        }
      }
    }
  }
</style>