<template>
  <div>
    <!-- 申请交易专家 -->
    <BackBar1/>
    <div class="section">
      <div class="title">
        <!-- 成为交易专家 -->
        {{ $t('follow.l4') }}
      </div>
      <div class="lab">
        <!-- 赚取最高20%分润 -->
        {{ $t('follow.l91') }}
      </div>
      <div class="flex">
        <div class="btn">
          <!-- 开启带单模式 -->
          {{ $t('follow.l92') }}
        </div>
      </div>
    </div>
    <div class="page">
      <div class="box">
        <div class="title">
          <!-- JD Trader 优势 -->
          JD Trader {{ $t('follow.l93') }}
        </div>
        <div class="cell flex">
          <img class="img" src="/img/copy/apply/img1.png" alt="">
          <div class="right">
            <div class="sub">
              <!-- 超过 6 万跟单用户 -->
              {{ $t('follow.l151') }}
            </div>
            <div>
              <!-- 全球活跃用户 -->
              {{ $t('follow.l152') }}
            </div>
          </div>
        </div>
        <div class="cell flex">
          <img class="img" src="/img/copy/apply/img2.png" alt="">
          <div class="right">
            <div class="sub">
              <!-- 超过 600万 USD 的交易专家分润 -->
              {{ $t('follow.l94') }}
            </div>
            <div>
              <!-- 扶持交易精英 -->
              {{ $t('follow.l95') }}
            </div>
          </div>
        </div>
        <div class="cell flex">
          <img class="img" src="/img/copy/apply/img3.png" alt="">
          <div class="right">
            <div class="sub">
              <!-- 覆盖全面的交易品种 -->
              {{ $t('follow.l96') }}
            </div>
            <div>
              <!-- 带单选择丰富 -->
              {{ $t('follow.l97') }}
            </div>
          </div>
        </div>
        <div class="cell flex">
          <img class="img" src="/img/copy/apply/img4.png" alt="">
          <div class="right">
            <div class="sub">
              <!-- 海量曝光机会 -->
              {{ $t('follow.l98') }}
            </div>
            <div>
              <!-- 多种推荐渠道 -->
              {{ $t('follow.l99') }}
            </div>
          </div>
        </div>
      </div>
      <div class="box1">
        <div class="title">
          <!-- 分润比例 -->
          {{ $t('follow.l26') }}
        </div>
        <div>
          {{ $t('follow.l100') }}
          <!-- 交易专家等级越高，分润比例越高 -->
        </div>
        <van-row gutter="10" class="row">
          <van-col span="8">
            <!-- 分润比例 -->
            {{ $t('follow.l26') }}
          </van-col>
          <van-col span="8" class="center">
            <!-- 跟单用户上限 -->
            {{ $t('follow.l101') }}
          </van-col>
          <van-col span="8" class="right">
            <!-- 交易专家等级 -->
            {{ $t('follow.l102') }}
          </van-col>
        </van-row>
        <van-row gutter="10" class="row1" v-for="(item, index) in list" :key="index">
          <van-col span="8">
            <div class="rate">
              {{ item.rate }}
            </div>
          </van-col>
          <van-col span="8" class="center">
            {{ item.number }}
          </van-col>
          <van-col span="8" class="right">
            {{ rateText[item.number] }}
          </van-col>
        </van-row>
        <div class="tip">
          <!-- 当交易专家分润比例调整后，跟单页面显示的“预计待分润”也会随之调整 <span class="span" @click.stop="$router.push('/statement/followLevel')">等级细则</span> -->
          {{ $t('follow.l103') }} <span class="span" @click.stop="$router.push('/statement/followLevel')">{{ $t('follow.l89') }}</span>
        </div>
      </div>
    </div>
    <template v-if="loaded">
      <div class="btn-box" v-if="expertInfo.id && expertInfo.status == 0">
        <div class="btn flex btn1">
          <div>
            <!-- 您已提交过申请 -->
            {{ $t('join.l10') }}
          </div>
          <div class="tip">
            <!-- 申请结果将在3个工作日内，通过系统消息通知您，请耐心等待。 -->
            {{ $t('join.l11') }}
          </div>
        </div>
      </div>
      <div class="btn-box" v-else>
        <div class="href1" @click="checked = !checked">
          <van-icon v-if="!checked" name="circle" />
          <i v-if="checked" class="el-icon-success"></i>
          <div>
            <!-- 我已阅读并同意<span class="active" @click.stop="$router.push('/statement/followExpert')">《交易专家协议》</span> -->
            {{ $t('follow.l53') }}<span class="active" @click.stop="$router.push('/statement/followExpert')">{{ $t('follow.l144') }}</span>
          </div>
        </div>
        <div class="btn flex" @click="nextStep">
          <div>
            <!-- 立即申请 -->
            {{ $t('join.l12') }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import BackBar1 from '@/components/backBar1'
import { mapGetters } from "vuex";
export default {
  components: {
    BackBar1
  },
  data () {
    return {
      checked: true,
      loaded: false,
      list: [
        {
          rate: '20%',
          number: 1000
        },
        {
          rate: '18%',
          number: 500
        },
        {
          rate: '16%',
          number: 400
        },
        {
          rate: '14%',
          number: 300
        },
        {
          rate: '12%',
          number: 200
        },
        {
          rate: '10%',
          number: 100
        }
      ]
    }
  },
  computed: {
    ...mapGetters(['expertInfo']),
    rateText() {
      return {
        // '1000': '至尊',
        // '500': '传奇',
        // '400': '大师',
        // '300': '高级',
        // '200': '中级',
        // '100': '初级',
        '1000': this.$t('follow.l104'),
        '500': this.$t('follow.l105'),
        '400': this.$t('follow.l106'),
        '300': this.$t('setting.l14'),
        '200': this.$t('follow.l107'),
        '100': this.$t('follow.l108'),
      }
    }
  },
  created () {
    this.$store.dispatch('getExpertInfo').then((res) => {
      if (res.status != 1) {
        this.loaded = true
      }
    })
  },
  methods: {
    nextStep() {
      if (!this.checked) {
        // this.$toast('请阅读并同意交易专家协议');
        this.$toast(this.$t('follow.l90'));
        return
      }
      this.$router.replace('/copy/register')
    },
  }
}
</script>
<style lang="less" scoped>
.section {
  padding: 14px 16px 10px 30px;
  background-image: url('@/assets/img/copy/bg1.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .title {
    font-size: 12px;
    margin-bottom: 6px;
  }
  .lab {
    font-weight: 600;
    font-size: 20px;
    color: #E64A44;
    margin-bottom: 10px;
  }
  .btn {
    font-size: 12px;
    background-color: #0F8DDF;
    border-radius: 2px;
    padding: 8px 14px;
    color: #fff;
  }
}
.page {
  padding: 20px 16px 10px;
}
.box {
  .title {
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
  }
  .cell {
    border-radius: 8px;
    border: 1px solid #F6F6F6;
    padding: 8px 9px;
    margin-bottom: 10px;
  }
  .right {
    padding-left: 12px;
    flex: 1;
    min-width: 0px;
    color: #B6B6B6;
    font-size: 12px;
  }
  .img {
    width: 50px;
  }
  .sub {
    font-size: 14px;
    margin-bottom: 10px;
    color: #000;
  }
}
.box1 {
  padding-top: 20px;
  .title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
  }
  .center {
    text-align: center;
  }
  .right {
    text-align: right;
  }
  .row {
    font-size: 12px;
    color: #888888;
    padding: 4px 0 2px;
    margin-top: 16px;
  }
  .row1 {
    padding: 15px 0;
    border-bottom: 1px solid #F6F6F6;
  }
  .rate {
    color: #2EBD85;
  }
  .tip {
    color: #B6B6B6;
    line-height: 22px;
    padding-top: 16px;
    opacity: 0.88;
  }
  .span {
    color: #0F8DDF;
    cursor: pointer;
  }
}
.btn-box {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background-color: #fff;
  padding: 10px 16px 20px;
  .href1 {
    display: flex;
    align-items: flex-start;
    color: #B6B6B6;
    cursor: pointer;
    column-gap: 4px;
    padding-bottom: 15px;
    .el-icon-success {
      color: #000;
    }
    .active {
      color: #0F8DDF;
    }
  }
  .btn {
    background-color: #000;
    min-height: 50px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    margin-top: 15px;
    flex-direction: column;
    padding: 4px 10px;
    justify-content: center;
    &.btn1 {
      margin-top: 0;
    }
  }
  .tip {
    font-size: 12px;
    line-height: 14px;
    margin-top: 5px;
    opacity: 0.72;
    font-weight: 400;
  }
}
</style>