<template>
  <div>
    <div class="section">
      <van-row gutter="7" type="flex">
        <van-col span="12">
          <div class="col1">
            <div>
              <!-- 我的跟单 -->
              {{ $t('follow.l3') }}
            </div>
          </div>
        </van-col>
        <van-col span="12">
          <div class="col2">
            <template v-if="expertInfo.status == 1">
              <div class="lab1">
                <!-- 交易专家主页 -->
                {{ $t('follow.l167') }}
              </div>
              <div class="flex">
                <div class="btn" @click="$router.push('/my-copy')">
                  <!-- 进入管理 -->
                  {{ $t('follow.l168') }}
                </div>
              </div>
            </template>
            <template v-else>
              <div>
                <!-- 成为交易专家 -->
                {{ $t('follow.l4') }}
              </div>
              <div class="lab">
                <!-- 赚取 10 % 分润 -->
                {{ $t('follow.l5') }}
              </div>
              <div class="flex">
                <div class="btn" @click="$router.push('/copy')">
                  <!-- 立即申请 -->
                  {{ $t('join.l12') }}
                </div>
              </div>
            </template>
          </div>
        </van-col>
      </van-row>
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        :offset="900"
        v-model="loading"
        :finished="finished"
        :finished-text="list.length ? $t('common.l5') : ''"
        @load="onLoad"
      >
        <div class="list">
          <div class="title flex">
            <img class="icon" v-if="market == '2'" src="/img/copy/market/icon2.png" alt="">
            <img class="icon" v-else src="/img/copy/market/icon3.png" alt="">
            <div>
              <!-- 交易专家 -->
              {{ $t('follow.l9') }}
            </div>
          </div>
          <div class="li" v-for="item in list" :key="item.id" @click="$router.push('/trade/detail/' + item.eid)">
            <div class="top">
              <div class="box 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.title }}
                    </div>
                    <div class="level">
                      {{ item.level }}
                      <!-- 高级 -->
                      <!-- {{ $t('setting.l14') }} -->
                    </div>
                  </div>
                  <div class="flex users">
                    <img class="icon" src="/img/copy/market/icon6.png" alt="">
                    <div>{{item.user_count}}/100</div>
                  </div>
                </div>
              </div>
              <div class="btn">
                <!-- 跟单 -->
                {{ $t('follow.l') }}
              </div>
            </div>
            <div class="box1">
              <div>
                <div class="lab">
                  <!-- 近30日收益率 -->
                  {{ $t('follow.l10') }}
                </div>
                <div class="number">+ 72.39%</div>
              </div>
              <div class="char-box">
                <chartView height="35px" :smooth="false" :list="chartList" :id="'ul' + item" />
              </div>
            </div>
            <div class="box2 flex">
              <div class="lab-box flex">
                <div class="lab">
                  {{ $t('follow.l8') }}
                </div>
                <!-- 总收益 $ 1,132.94 -->
                <div>
                $ 1,132.94
                </div>
              </div>
              <div class="tag-box flex">
                <div class="lab">
                  <!-- 擅长: -->
                  {{ $t('follow.l11') }}:
                </div>
                <div class="tags flex" v-html="getProductHtml(item.product_group)">
                </div>
              </div>
            </div>
          </div>
          <NoData v-if="!loading && list.length == 0" />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { getExpertList } from "@/api/copy";
import chartView from "../components/chart.vue";
export default {
  props: ['market'],
  components: {
    chartView
  },
  data () {
    return {
      chartList: ['12', '26', '12', '45'],
      loading: false,
      finished: false,
      refreshing: false,
      pageNum: 0,
      pageSize: 10,
      marketArr: ['HK', 'US', 'CN'],
      marketArr1: ['1', '2', '3', '4', '5'],
      list: [],
    }
  },
  watch: {
    'market'() {
      this.onRefresh()
    }
  },
  computed: {
    ...mapGetters(['followList', 'expertInfo']),
    followIdList() {
      return this.followList.map(item => item.eid)
    },
    titleName() {
      return {
        "US": this.$t('common.l41'),
        "HK": this.$t('common.l42'),
        "CN": this.$t('download.l19'),
        "4": this.$t('download.l27'),
        "3": this.$t('market.l19'),
        "其他": this.$t('inform.l22'),
        "5": this.$t('market.l24'),
        "1": this.$t('market.l21'),
        "2": this.$t('market.l22')
      }
    }
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.refreshing = false;
      }
      this.pageNum += 1;
      if (this.pageNum == 1) {
        this.list = [];
      }
      this.getExpertList()
    },
    getExpertList() {
      getExpertList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        productGroupList: JSON.stringify(this.market == '2' ? this.marketArr : this.marketArr1)
      }).then(res => {
        var list = res.list || [];
        if (this.pageNum == 1) {
          this.list = list;
        } else {
          this.list = this.list.concat(list);
        }
        this.loading = false;
        if (res.endRow == res.total) {
          this.finished = true;
        }
      }).catch(() => {
        this.loading = false;
        this.finished = true;
      })
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.pageNum = 0;
      this.onLoad();
    },
    getProductHtml(val) {
      var list = JSON.parse(val)
      var html = ''
      list.forEach(item => {
        if(this.titleName[item]) {
          html += `<div class="tag">${this.titleName[item]}</div>`
        }
      })
      return html
    }
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 0 16px 10px;
  .col1 {
    background-image: url('@/assets/img/copy/bg2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 16px 10px 10px;
    height: 100%;
  }
  .col2 {
    background-image: url('@/assets/img/copy/bg3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 16px 10px 10px;
  }
  .lab {
    font-size: 10px;
    color: #B6B6B6;
    margin-top: 6px;
    margin-bottom: 10px;
  }
  .lab1 {
    padding-top: 4px;
    margin-bottom: 18px;
  }
  .btn {
    cursor: pointer;
    background-color: #0F8DDF;
    border-radius: 2px;
    padding: 5px;
    font-size: 10px;
    color: #FFFFFF;
  }
}
.list {
  padding: 10px 16px 16px;
}
.title {
  font-size: 16px;
  margin-bottom: 16px;
  column-gap: 6px;
  .icon {
    width: 16px;
  }
}
.li {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  position: relative;
  &+.li {
    margin-top: 10px;
  }
}
.top {
  justify-content: space-between;
  column-gap: 6px;
  display: flex;
  align-items: flex-start;
  padding: 9px 9px 0;
  .btn {
    cursor: pointer;
    border-radius: 14px;
    font-size: 12px;
    background-color: #000;
    color: #fff;
    padding: 6px 12px;
  }
}
.box {
  flex: 1;
  min-width: 0;
  column-gap: 10px;
  .right {
    flex: 1;
    min-width: 0;
  }
  .name-box {
    column-gap: 4px;
    margin-bottom: 4px;
  }
  .name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .level {
    border-radius: 2px;
    border: 1px solid #F6F6F6;
    padding: 2px 3px;
    font-weight: 300;
    font-size: 10px;
  }
  .users {
    font-size: 10px;
    color: #B6B6B6;
    column-gap: 4px;
    .icon {
      width: 10px;
    }
  }
}
.box1 {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 3px 9px 10px;
  .number {
    font-size: 10px;
    color: var(--red-);
  }
  .lab {
    margin-bottom: 4px;
  }
}
.char-box {
  width: 51%;
}
.box2 {
  padding: 0 9px;
  height: 26px;
  border-top: 1px solid #F6F6F6;
  justify-content: space-between;
  column-gap: 6px;
  .lab-box {
    font-size: 10px;
  }
  .lab {
    padding-right: 4px;
  }
}
.lab {
  font-size: 10px;
  color: #B6B6B6;
}
.tag-box {
  min-width: 0;
  max-width: 100%;
  font-size: 10px;
  .tags {
    min-width: 0;
    max-width: 100%;
    column-gap: 6px;
    flex-wrap: wrap;
    row-gap: 6px;
  }
}
::v-deep {
  .tags {
    .tag {
      padding: 4px 6px;
      background-color: #F6F6F6;
      border-radius: 4px;
      color: #888888;
      font-weight: 300;
      font-size: 12px;
    }
  }
}
</style>