<template>
  <div>
    <!-- 跟单中 -->
    <BackBar1 :title="$t('follow.l6')" />
    <div class="tabbar flex">
      <div class="bar" :class="{active: type == '1'}" @click="changeType('1')">
        <!-- 当前跟随 -->
        {{ $t('follow.l136') }}
        <div class="line"></div>
      </div>
      <div class="bar" :class="{active: type == '2'}" @click="changeType('2')">
        <!-- 历史跟随 -->
        {{ $t('follow.l137') }}
        <div class="line"></div>
      </div>
    </div>
    <following v-if="type == '1'" />
    <followed v-if="type == '2'" />
  </div>
</template>
<script>
import BackBar1 from '@/components/backBar1'
import following from "./components/following.vue";
import followed from "./components/followed.vue";
export default {
  components: {
    BackBar1,
    following,
    followed,
  },
  data () {
    return {
      type: '1'
    }
  },
  created() {
    if (this.$route.params.type) {
      this.type = this.$route.params.type
    }
  },
  methods: {
    changeType(type) {
      if (this.type == type) {
        return
      }
      this.type = type
      this.$router.replace('/copy/follows/' + this.type)
    }
  }
}
</script>
<style lang="less" scoped>
.tabbar {
  background-color: var(--bg-);
  padding: 0 16px;
  height: 52px;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  position: sticky;
  top: 50px;
  z-index: 3;
  .bar {
    cursor: pointer;
    font-size: 14px;
    color: #888888;
    padding-bottom: 18px;
    position: relative;
    &+.bar {
      margin-left: 24px;
    }
    &.active {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      .line {
        display: block;
      }
    }
    .line {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      width: 12px;
      height: 2px;
      border-radius: 1px;
      background-color: #000;
      display: none;
    }
  }
}
</style>