<template>
  <div>
    <!-- 我的跟单 -->
    <BackBar1 :title="$t('follow.l12')"/>
    <div class="header">
      <div class="box">
        <van-row gutter="6" type="flex">
          <van-col span="8">
            <div class="lab">
              <!-- 资产净值(USD) -->
              {{ $t('account.l2') }}(USD)
            </div>
          </van-col>
          <van-col span="8">
            <div class="lab">
              <!-- 跟单总收益(USD) -->
              {{ $t('follow.l1') }}(USD)
            </div>
          </van-col>
          <van-col span="8" style="text-align: right">
            <div class="lab">
              <!-- 今日收益  13.79 -->
              {{ $t('follow.l13') }}  13.79
            </div>
          </van-col>
        </van-row>
        <van-row gutter="6" type="flex">
          <van-col span="8">
            <div class="amount">
              {{ $numToThousand(followAccount.equity) }}
            </div>
          </van-col>
          <van-col span="8">
            <div class="amount">
              79,237.68
            </div>
          </van-col>
          <van-col span="8">
            <div class="flex btn" @click="incomePop = true">
              <div>
                <!-- 明细 -->
                {{ $t('follow.l14') }}
              </div>
              <img class="icon" src="/img/copy/market/right.png" alt="">
            </div>
          </van-col>
        </van-row>
      </div>
      <div class="tabbar flex">
        <div class="bar" :class="{active: type == '1'}" @click="type = '1'">
          <!-- 当前跟单 -->
          {{ $t('follow.l15') }}
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: type == '2'}" @click="type = '2'">
          <!-- 历史跟单 -->
          {{ $t('follow.l16') }}
          <div class="line"></div>
        </div>
      </div>
    </div>
    <list v-if="type == '1'" />
    <list1 v-if="type == '2'" />
    <van-popup overlay-class="overlay1" v-model="incomePop" round position="bottom">
      <incomeDetails @cancel="incomePop = false"/>
    </van-popup>
  </div>
</template>
<script>
import BackBar1 from '@/components/backBar1'
import list from "./components/list.vue";
import list1 from "./components/list1.vue";
import incomeDetails from "./components/incomeDetails.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    BackBar1,
    list,
    list1,
    incomeDetails
  },
  computed: {
    ...mapGetters(['followAccount']),
  },
  data () {
    return {
      type: '1',
      incomePop: false,
    }
  },
  created () {
    this.$store.dispatch('getFollowList')
    this.$store.dispatch('getFollowAccount')
  }
}
</script>
<style lang="less" scoped>
.header {
  padding: 0 16px;
  position: sticky;
  top: 50px;
  z-index: 6;
  background-color: #fff;
  .box {
    border-radius: 8px;
    border: 1px solid #F6F6F6;
    padding: 15px 9px;
  }
  .lab {
    font-size: 12px;
    color: #B6B6B6;
    margin-bottom: 10px;
  }
  .amount {
    font-size: 20px;
    word-break: break-all;
  }
  .btn {
    cursor: pointer;
    font-size: 12px;
    justify-content: flex-end;
    column-gap: 6px;
    padding-top: 5px;
  }
  .icon {
    width: 6px;
  }
}
.tabbar {
  height: 52px;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  .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;
    }
  }
}
.van-popup {
  box-shadow: 0px -1px 0px 0px #F6F6F6;
}
::v-deep {
  .overlay1 {
    background-color: transparent;
  }
}
</style>