<template>
  <div class="list">
    <div class="li" v-for="item in followList" :key="item.eid" @click="$router.push('/copy/follows/1')">
      <div class="box flex">
        <div class="left flex">
          <van-image
            width="36"
            height="36"
            round
            fit="cover"
            :src="item.header || '/img/home/user.png'"
          />
          <div class="right">
            <div class="flex name-box">
              <div class="name">
                {{ item.expert_title }}
              </div>
              <div class="level">
                <!-- 高级 -->
                {{ $t('setting.l14') }}
              </div>
            </div>
          </div>
        </div>
        <van-icon name="arrow" />
      </div>
      <van-row>
        <van-col span="9">
          <div class="lab">
            <!-- 跟单总收益(USD) -->
            {{ $t('follow.l1') }}(USD)
          </div>
          <div class="amount">{{ item.profit > 0 ? '+' : '' }} {{ $numToThousand(item.profit) }}</div>
        </van-col>
        <van-col span="15">
          <div class="lab">
            <!-- 跟单时间 -->
            {{ $t('follow.l17') }}
          </div>
          <div class="time">{{ formatTime(item.insert_datetime) }}</div>
        </van-col>
      </van-row>
    </div>
    <NoData v-if="followList.length == 0" />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  data () {
    return {
    }
  },
  computed: {
    ...mapGetters(['followList']),
  },
  methods: {
    formatTime(val) {
      if (val) {
        return (val.split(' ')[0]).replace(new RegExp(/-/gm), "/")
      }
      return ''
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 0 16px 6px;
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  padding: 9px;
  margin-bottom: 10px;
}
.box {
  column-gap: 6px;
  justify-content: space-between;
  margin-bottom: 10px;
  .left,.right {
    flex: 1;
    min-width: 0;
    max-width: 100%;
  }
  .name-box {
    column-gap: 4px;
    padding-left: 10px;
  }
  .name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .level {
    border-radius: 2px;
    border: 1px solid #F6F6F6;
    padding: 3px;
    font-weight: 300;
    font-size: 10px;
  }
  .van-icon {
    color: #B6B6B6;
    font-size: 16px;
  }
}
.van-row {
  font-size: 10px;
  .lab {
    color: #B6B6B6;
    margin-bottom: 4px;
  }
  .amount {
    color: var(--red-);
  }
  .time {
    color: #888888;
  }
}
</style>