<template>
  <div class="page">
    <!-- 详情 -->
    <BackBar1>
      <div class="icon-box">
        <shareIcon1 />
      </div>
    </BackBar1>
    <div class="conatiner">
      <div class="box flex" v-if="expertInfo.eid">
        <van-image
          width="36"
          height="36"
          round
          fit="cover"
          :src="expertInfo.header || '/img/home/user.png'"
        />
        <div class="left">
          <div class="flex name-box">
            <div class="name">
              {{ expertInfo.title }}
            </div>
            <div class="level">
              {{ expertInfo.level }}
              <!-- 高级 -->
              {{ $t('setting.l14') }}
            </div>
            <!-- 等级细则 -->
            <div class="href" @click.stop="$router.push('/statement/followLevel')">
              {{ $t('follow.l89') }}
            </div>
          </div>
          <div class="flex bottom">
            <div class="flex users">
              <img class="icon" src="/img/copy/market/icon6.png" alt="">
              <div>{{ expertInfo.user_count }}/100</div>
            </div>
            <div class="uid">
              UID：{{ expertInfo.eid }}
            </div>
          </div>
        </div>
      </div>
      <div class="box1 flex">
        <div class="tag">
          <!-- 极度认证 -->
          {{ $t('follow.l59') }}
        </div>
        <div class="tag" v-for="(tag, index) in product_group" :key="index">
          {{ tagName[tag] }}
        </div>
      </div>
      <profit />
      <setting />
      <div class="tabbar flex">
        <div class="bar" v-for="tag in product_group" :key="tag" :class="{active: market == tag}" @click="market = tag">
          {{ titleName[tag] }}
        </div>
      </div>
      <div class="box2">
        <van-row>
          <van-col span="8">
            <div>319,873.36</div>
            <div class="label">
              <!-- 总资产(USD) -->
              {{ $t('account.l') }}(USD)
            </div>
          </van-col>
          <van-col span="8" class="center">
            <div>319</div>
            <div class="label">
              <!-- 总笔数 -->
              {{ $t('follow.l61') }}
            </div>
          </van-col>
          <van-col span="8" class="text-right">
            <div>57</div>
            <div class="label">
              <!-- 加入时间(天) -->
              {{ $t('follow.l62') }}({{ $t('option.l18') }})
            </div>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">
            <div>319,873.36</div>
            <div class="label">
              <!-- 交易频率(笔/天) -->
              {{ $t('follow.l63') }}({{ $t('follow.l64') }}/{{ $t('option.l18') }})
            </div>
          </van-col>
          <van-col span="8" class="center">
            <div>10%</div>
            <div class="label">
              <!-- 分润比例 -->
              {{ $t('follow.l26') }}
            </div>
          </van-col>
        </van-row>
      </div>
    </div>
    <div class="conatiner1">
      <div class="tabbar1 flex">
        <div class="bar" :class="{active: tab == '1'}" @click="tab = '1'">
          <!-- 图表 -->
          {{ $t('exchange.l6') }}
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: tab == '2'}" @click="tab = '2'">
          <!-- 数据 -->
          {{ $t('follow.l65') }}
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: tab == '3'}" @click="tab = '3'">
          <!-- 订单 -->
          {{ $t('follow.l66') }}
          <div class="line"></div>
        </div>
        <div class="bar" :class="{active: tab == '4'}" @click="tab = '4'">
          <!-- 跟单者 -->
          {{ $t('follow.l67') }}
          <div class="line"></div>
        </div>
      </div>
      <chartView v-if="tab == '1'" />
      <dataView v-if="tab == '2'" />
      <orderView v-if="tab == '3'" />
      <followers v-if="tab == '4'" />
    </div>
  </div>
</template>
<script>
import profit from "./components/profit.vue";
import setting from "./components/setting.vue";
import chartView from "./components/chartView.vue";
import dataView from "./components/dataView.vue";
import orderView from "./orderView";
import followers from "./components/followers.vue";
import BackBar1 from '@/components/backBar1'
import shareIcon1 from "@/components/shareIcon1";
import { mapGetters } from "vuex";
export default {
  components: {
    BackBar1,
    shareIcon1,
    profit,
    setting,
    chartView,
    dataView,
    orderView,
    followers
  },
  data () {
    return {
      market: '',
      tab: '1',
      id: '',
    }
  },
  computed: {
    ...mapGetters(['expertInfo']),
    product_group() {
      var product_group = this.expertInfo.product_group ? JSON.parse(this.expertInfo.product_group) : []
      return product_group.filter(item => this.tagName[item])
    },
    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')
      }
    },
    tagName() {
      return {
        "US": this.$t('follow.l158'),
        "HK": this.$t('follow.l157'),
        "CN": this.$t('follow.l156'),
        "4": this.$t('follow.l163'),
        "3": this.$t('follow.l162'),
        "5": this.$t('follow.l159'),
        "1": this.$t('follow.l161'),
        "2": this.$t('follow.l160')
      }
    }
  },
  created () {
    this.id = this.$route.params.id
    this.$store.dispatch('getExpertInfo').then(() => {
      this.$nextTick(() => {
        if (!this.market) {
          this.market = this.product_group[0] || ''
        }
      })
    })
  }
}
</script>
<style lang="less" scoped>
.conatiner {
  padding: 0 16px;
}
.box {
  column-gap: 10px;
  .left {
    flex: 1;
    min-width: 0;
    color: #B6B6B6;
  }
  .name-box {
    column-gap: 4px;
    margin-bottom: 4px;
  }
  .name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #000;
  }
  .level {
    border-radius: 2px;
    border: 1px solid #F6F6F6;
    padding: 2px 3px;
    font-weight: 300;
    font-size: 10px;
  }
  .href {
    cursor: pointer;
    font-size: 12px;
    color: #0F8DDF;
  }
  .bottom {
    column-gap: 10px;
    font-size: 10px;
  }
  .users {
    column-gap: 4px;
    .icon {
      width: 10px;
    }
  }
}
.box1 {
  font-size: 12px;
  color: #FFB979;
  margin-top: 14px;
  padding-bottom: 10px;
  column-gap: 8px;
  row-gap: 6px;
  flex-wrap: wrap;
  white-space: nowrap;
  .tag {
    background: #FFFBF2;
    border-radius: 1px;
    padding: 2px 4px;
  }
}
.tabbar {
  background-color: var(--bg-);
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  column-gap: 30px;
  padding: 0 3px;
  .bar {
    line-height: 50px;
    position: relative;
    font-size: 16px;
    color: #888888;
    cursor: pointer;
    &.active {
      color: #000000;
      font-weight: 600;
      font-size: 20px;
    }
  }
}
.box2 {
  border-radius: 8px;
  border: 1px solid #F6F6F6;
  word-break: break-all;
  padding: 19px 9px;
  font-size: 18px;
  .label {
    font-size: 12px;
    color: #B6B6B6;
    margin-top: 10px;
  }
  .van-row + .van-row {
    margin-top: 20px;
  }
  .center {
    text-align: center;
  }
  .text-right {
    text-align: right;
  }
}
.tabbar1 {
  position: sticky;
  top: 50px;
  z-index: 4;
  height: 52px;
  padding: 0 16px;
  align-items: flex-end;
  white-space: nowrap;
  flex-wrap: nowrap;
  overflow-x: auto;
  background-color: #fff;
  &::-webkit-scrollbar {
    display: none;
  }
  .bar {
    cursor: pointer;
    font-size: 14px;
    color: #888888;
    padding-bottom: 18px;
    position: relative;
    &+.bar {
      margin-left: 24px;
    }
    &.active {
      font-size: 16px;
      font-weight: 600;
      color: #000;
      .line {
        display: block;
      }
    }
  }
  .line {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    width: 12px;
    height: 2px;
    border-radius: 1px;
    background-color: #000;
    display: none;
  }
}
</style>