<template>
  <div class="tabbar">
    <div class="bar" @click="$router.replace('/')" :class="{'active': $route.name == 'home' }">
      <img v-show="$route.name == 'home'" class="icon" src="/img/tabbar/home_a.png" alt="极度证券">
      <img v-show="$route.name != 'home'" class="icon" src="/img/tabbar/home.png" alt="极度证券">
      <!-- 首页 -->
      {{ $t('tab.tab1') }}
    </div>
    <div class="bar" @click="toMarket" :class="{'active': marketList.indexOf($route.name) !== -1 }">
      <img v-show="marketList.indexOf($route.name) !== -1" class="icon" src="/img/tabbar/market_a.png" alt="极度证券">
      <img v-show="marketList.indexOf($route.name) === -1" class="icon" src="/img/tabbar/market.png" alt="极度证券">
      <!-- 市场 -->
      {{ $t('market.l13') }}
    </div>
    <div class="bar" @click="$router.replace('/account')" :class="{'active': $route.name == 'account' }">
      <img v-show="$route.name == 'account'" class="icon" src="/img/tabbar/trade_a.png" alt="极度证券">
      <img v-show="$route.name != 'account'" class="icon" src="/img/tabbar/trade.png" alt="极度证券">
      <!-- 交易 -->
      {{ $t('tab.tab3') }}
    </div>
    <div class="bar" @click="$router.replace('/finding')" :class="{'active': $route.name == 'finding' }">
      <img v-show="$route.name != 'finding'" class="icon" src="/img/tabbar/find.png" alt="极度证券">
      <img v-show="$route.name == 'finding'" class="icon" src="/img/tabbar/find_a.png" alt="极度证券">
      <!-- 发现 -->
      {{ $t('tab.tab4') }}
    </div>
    <div class="bar" @click="$router.replace('/my')" :class="{'active': $route.name == 'my' }">
      <img v-show="$route.name == 'my'" class="icon" src="/img/tabbar/my_a.png" alt="极度证券">
      <img v-show="$route.name != 'my'" class="icon" src="/img/tabbar/my.png" alt="极度证券">
      <!-- 我的 -->
      {{ $t('tab.tab5') }}
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      marketList: ['optional', 'overview', 'stock', 'cfd', 'options', 'follow']
    }
  },
  methods: {
    toMarket() {
      if (this.marketList.indexOf(this.$route.name) === -1) {
        this.$router.replace('/market/overview')
      }
    }
  }
}
</script>
<style lang="less" scoped>
.tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6.5px 20px;
  background-color: var(--bg-);
  box-shadow: 0px -2px 6px 0px rgba(195, 199, 206, 0.16);
  color: #A2A2A2;
  .bar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0 7px;
    font-size: 12px;
    cursor: pointer;
    &.active {
      color: #000000;
      font-weight: 600;
    }
  }
  .icon {
    width: 30px;
    margin-bottom: 4px;
  }
}
</style>