<template>
  <div class="list">
    <div class="filter-box flex" @click="checked = !checked">
      <van-icon v-if="!checked" name="circle" />
      <i v-if="checked" class="el-icon-success"></i>
      <div>
        <!-- 仅显示排名前30的用户 -->
        {{ $t('follow.l79') }}
      </div>
    </div>
    <div class="li" v-for="item in list" :key="item.id">
      <div class="box">
        <van-image
          width="36"
          height="36"
          round
          fit="cover"
          :src="item.user_header || '/img/home/user.png'"
        />
        <div class="right">
          <div class="name">
            {{ item.user_title }}
          </div>
          <div class="col flex">
            <div>
              <!-- 跟单总金额 -->
              {{ $t('follow.l77') }}
            </div>
            <div>
              {{ $numToThousand(item.margin) }} USD
            </div>
          </div>
          <div class="col flex">
            <div>
              <!-- 跟单总收益 -->
              {{ $t('follow.l78') }}
            </div>
            <div class="up">
              {{ $numToThousand(item.profit) }} USD
            </div>
          </div>
        </div>
      </div>
    </div>
    <NoData v-if="list.length == 0 && loaded" />
  </div>
</template>
<script>
import { getExpertFollowList } from "@/api/copy";
export default {
  data () {
    return {
      checked: false,
      loaded: false,
      list: []
    }
  },
  watch: {
    checked(val) {
      this.getExpertFollowList(val ? 30 : undefined)
    }
  },
  created () {
    this.getExpertFollowList()
  },
  methods: {
    getExpertFollowList(size) {
      getExpertFollowList({
        eid: this.$route.params.id,
        pageSize: size
      }).then(res => {
        this.list = res.list || []
      }).catch(() => {}).finally(() => {
        this.loaded = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.list {
  padding: 0 16px 20px;
}
.filter-box {
  height: 30px;
  font-size: 14px;
  color: #B6B6B6;
  column-gap: 4px;
  .el-icon-success {
    color: #000;
  }
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  padding: 10px 9px 13px;
  position: relative;
  margin-top: 10px;
}
.box {
  display: flex;
  align-items: flex-start;
  column-gap: 10px;
  .right {
    flex: 1;
    min-width: 0px;
    padding-top: 4px;
  }
  .col {
    column-gap: 12px;
    font-size: 12px;
    color: #B6B6B6;
    margin-top: 10px;
    justify-content: space-between;
  }
}
.up {
  color: #EA4A45;
}
.down {
  color: #07AC3A;
}
</style>