<template>
  <div>
    <div class="section">
      <div class="box flex">
        <div class="title">
          <!-- 成交 -->
          {{ $t('follow.l68') }}
        </div>
        <div class="filter" @click="dateShow = true">
          <!-- 全部 -->
          {{ cycleText[cycle] || $t('inform.l21') }}<i class="el-icon-caret-bottom"></i>
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 收益率 -->
          {{ $t('follow.l7') }}
        </div>
        <div class="right">
          +3,326.24%
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 最大回撤 -->
          {{ $t('follow.l69') }}
        </div>
        <div class="right">
          62.37%
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 累计跟单人数 -->
          {{ $t('follow.l70') }}
        </div>
        <div class="right">
          1234
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 总收益 -->
          {{ $t('follow.l8') }}
        </div>
        <div class="right">
          99,542.39 USD
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 胜率 -->
          {{ $t('follow.l71') }}
        </div>
        <div class="right">
          92.73%
        </div>
      </div>
      <div class="cell">
        <div class="lab">
          <!-- 交易次数 -->
          {{ $t('follow.l72') }}
        </div>
        <div class="right">
          389
        </div>
      </div>
    </div>
    <van-popup v-model="dateShow" round position="bottom">
      <dateList :showAll="true" :cycle="cycle" @success="selectBack"/>
    </van-popup>
  </div>
</template>
<script>
import dateList from "./dateList.vue";
export default {
  components: {
    dateList
  },
  data () {
    return {
      cycle: '',
      dateShow: false,
    }
  },
  computed: {
    cycleText() {
      return {
        // '7': "近7天",
        // '30': "近一月",
        // '90': "近三月",
        // '180': "近半年",
        '7': this.$t('follow.l73'),
        '30': this.$t('follow.l74'),
        '90': this.$t('follow.l75'),
        '180': this.$t('follow.l76'),
      }
    }
  },
  methods: {
    selectBack(item) {
      this.dateShow = false
      if (this.cycle == item) {
        return
      }
      this.cycle = item
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 0 16px 20px;
}
.box {
  justify-content: space-between;
  padding: 10px 0 5px;
  .filter  {
    font-size: 12px;
  }
}
.cell {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 12px;
  padding: 15px 0 16px;
  border-bottom: 1px solid #F6F6F6;
  .right {
    min-width: 0px;
    max-width: 100%;
  }
  .lab {
    color: #B6B6B6;
  }
}
</style>