<template>
  <div class="com">
    <div class="href flex" @click="$router.replace(`/market/follow/${market == 'stock' ? 2 : 3}`)">
      <div class="flex">
        <img class="icon" v-if="market == 'stock'" src="/img/copy/market/icon2.png" alt="">
        <img class="icon" v-else src="/img/copy/market/icon3.png" alt="">
        <div>
          <!-- 股票交易专家 CFD交易专家 -->
          {{ market == 'stock' ? $t('follow.l153') : $t('follow.l154') }}
        </div>
      </div>
      <van-icon name="arrow" />
    </div>
    <div class="list">
      <div class="li" v-for="item in list" :key="item.eid" @click="$router.push('/trade/detail/' + item.eid)">
        <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="box1">
          <div>
            <div class="lab">
              <!-- 收益率 -->
              {{ $t('follow.l7') }}
            </div>
            <div class="number">+ 72.39%</div>
          </div>
          <div class="char-box">
            <chartView height="35px" :list="chartList" :id="market + item.id" />
          </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" v-if="market == 'stock'">
            <img class="img" v-if="item.product_group.indexOf('HK') !== -1" src="/img/copy/market/HK.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('US') !== -1" src="/img/copy/market/US.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('CN') !== -1" src="/img/copy/market/CN.png" alt="">
          </div>
          <div class="tag-box flex" v-if="market == 'cfd'">
            <img class="img" v-if="item.product_group.indexOf('1') !== -1" src="/img/copy/market/1.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('2') !== -1" src="/img/copy/market/2.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('3') !== -1" src="/img/copy/market/3.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('4') !== -1" src="/img/copy/market/4.png" alt="">
            <img class="img" v-if="item.product_group.indexOf('5') !== -1" src="/img/copy/market/5.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getExpertTradeListByDay } from "@/api/copy";
import chartView from "../../components/chart.vue";
export default {
  props: ['market', 'list'],
  components: {
    chartView
  },
  data () {
    return {
      chartList: ['12', '26', '12', '45'],
    }
  },
  created () {
    this.getExpertTradeListByDay()
  },
  methods: {
    getExpertTradeListByDay() {
      var time_start = new Date().getTime()
      var time_end = new Date()
      time_end = time_end.setDate(time_end.getDate()-30);
      getExpertTradeListByDay({
        eidList: JSON.stringify(this.list.map(item => item.eid)),
        time_start: time_end,
        time_end: time_start,
      }).then(res => {
        console.log(res)
      }).catch(() => {})
    }
  }
}
</script>
<style lang="less" scoped>
.com {
  padding: 10px 0 0 16px;
  margin-bottom: 10px;
}
.href {
  cursor: pointer;
  padding-bottom: 10px;
  font-size: 16px;
  justify-content: space-between;
  padding-right: 14px;
  .icon {
    width: 16px;
  }
  >.flex {
    column-gap: 6px;
  }
}
.list {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  overflow-y: auto;
  white-space: nowrap;
  column-gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 16px 10px 0;
  &::-webkit-scrollbar {
    display: none;
  }
  .li {
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid #F6F6F6;
    min-width: 196px;
    max-width: 196px;
  }
}
.box {
  padding: 9px 9px 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-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: 72px;
}
.box2 {
  padding: 8px 9px;
  border-top: 1px solid #F6F6F6;
  justify-content: space-between;
  column-gap: 6px;
  .lab-box {
    font-size: 10px;
  }
  .lab {
    padding-right: 4px;
  }
}
.tag-box {
  column-gap: 2px;
  .img {
    width: 12px;
  }
}
.lab {
  font-size: 10px;
  color: #B6B6B6;
}
</style>