<template>
   <div class="authorityMain">
    <h3>权限等级详情</h3>
    <ul class="authorityBox">
              <li>
                <!-- 用户计划 -->
                <div>{{$t(`pay.userPlan`)}}</div>               
                <!-- 账户等级 -->
                <div>{{$t(`pay.AccountLevel`)}}</div>
                  <!-- 指标标识 -->
                  <div>{{$t(`pay.Refers`)}}</div>
                <!-- 是否需要付费 -->
                <div>{{$t(`pay.WhetherPay`)}}</div>
                <!-- 权限 -->
                <div class="authorityContent">{{$t(`pay.authority`)}}</div>
                <!-- 数据颗粒度 -->
                <div>{{$t(`pay.granularity`)}}</div>
                <!-- 费用 -->
                <div>{{$t(`pay.expense`)}}</div>
              </li>
           
              <li>
                <div>L1</div>
                <!-- 匿名用户 -->
                <div>{{$t(`pay.AnonymousUser`)}}</div>
                 <!-- 无 -->
                  <!-- 1星 -->
                  <div> 
                    <el-rate             
                    disabled
                    v-model="fraction"             
                    :max="max"  
                    disabled-void-color="rgba(0,0,0,0.3)"
                    :colors="['#f7931a', '#f7931a', '#f7931a']"
                    score-template="{value}">            
              </el-rate></div>
                <!-- <div>{{$t(`pay.none`)}}</div> -->
                <div>No</div>
                <!-- T1技术指标 -->
                <div class="authorityContent">{{$t(`pay.technicalL1`)}}</div>
                <div>1 day</div>
                <div>0</div>
              </li>
              <li>
                <div>L2</div>
                <!-- 注册用户 -->
                <div>{{$t(`pay.RegisteredUser`)}}</div>
                  <!-- 1星 -->
                  <div> 
                    <el-rate             
                    disabled
                    v-model="fraction"             
                    :max="max"  
                    disabled-void-color="rgba(0,0,0,0.3)"
                    :colors="['#f7931a', '#f7931a', '#f7931a']"
                    score-template="{value}">            
              </el-rate></div>
                <div>No</div>
                <div class="authorityContent">
                  <!-- L1技术指标 -->
                  <span>{{$t(`pay.technicalL1`)}}</span>
                  <!-- L2技术指标 -->
                  <span>{{$t(`pay.technicalL2`)}}</span>
                </div>
                <div>1 day</div>
                <div>0</div>
              </li>
              <li>
                <!-- 传入付费用户 -->
                <div  @click="handelUpgrade({amount:10,label:`pay.monthlyPay`})" class="upgradeBox">
                  L3(monthly user) <i class="i ishengban-shengji upgrade1"></i>
                </div>
                <!-- 月度付费用户 -->
                <div>{{$t(`pay.monthlyPay`)}}</div>
                <el-rate             
                    disabled
                    v-model="fraction1"             
                    :max="max1"  
                    disabled-void-color="rgba(0,0,0,0.3)"
                    :colors="['#f7931a', '#f7931a', '#f7931a']"
                    score-template="{value}">            
              </el-rate>
                <div>Yes</div>
                <div class="authorityContent">
                  <span>{{$t(`pay.technicalL1`)}}</span>
                  <span>{{$t(`pay.technicalL2`)}}</span>
                  <span>{{$t(`pay.technicalL3`)}}</span>
                  <span>{{$t(`pay.greatMessage`)}}</span>
                  <span>{{$t(`pay.customizeMessage`)}}</span>
                  <span>Mobile App</span>
                  <span>{{$t(`pay.support`)}}</span>
                </div>
                <div>1 day</div>
                <div>10 USDT/10 USDC/10 BUSD</div>
              </li>
              <li>
                <!-- 年度付费用户 -->
                <div  @click="handelUpgrade({amount:100,label:`pay.annualPay`})" class="upgradeBox">L3(annual user) <i class="i ishengban-shengji upgrade1"></i></div>
                <div>{{$t(`pay.annualPay`)}}</div>
                <el-rate             
                    disabled
                    v-model="fraction1"             
                    :max="max1"  
                    disabled-void-color="rgba(0,0,0,0.3)"
                    :colors="['#f7931a', '#f7931a', '#f7931a']"
                    score-template="{value}">            
              </el-rate>
                <div>Yes</div>
                <div class="authorityContent">
                  <span>{{$t(`pay.technicalL1`)}}</span>
                  <span>{{$t(`pay.technicalL2`)}}</span>
                  <span>{{$t(`pay.technicalL3`)}}</span>
                  <!-- 日报,周报，重大消息订阅 -->
                  <span>{{$t(`pay.greatMessage`)}}</span>
                  <!-- 自定义指标消息订阅 -->
                  <span>{{$t(`pay.customizeMessage`)}}</span>
                  <span>Mobile App</span>
                  <span>{{$t(`pay.support`)}}</span>
                </div>
                <div>1 day</div>
                <div>100 USDT/100 USDC/100 BUSD</div>
              </li>
              <li>
                <!-- VIP年度付费用户 -->
                <div  @click="handelUpgrade({amount:500,label:`pay.vipAnnualPay`})"  class="upgradeBox">L4(VIP annual user) <i class="i ishengban-shengji upgrade1"></i></div>
                <div>{{$t(`pay.vipAnnualPay`)}}</div>
                <el-rate             
                    disabled
                    v-model="fraction2"             
                    :max="max2"  
                    disabled-void-color="rgba(0,0,0,0.3)"
                    :colors="['#f7931a', '#f7931a', '#f7931a']"
                    score-template="{value}">            
              </el-rate>
                <div>Yes</div>
                <div class="authorityContent">
                 <span>{{$t(`pay.technicalL1`)}}</span>
                  <span>{{$t(`pay.technicalL2`)}}</span>
                  <span>{{$t(`pay.technicalL3`)}}</span>
                  <span>{{$t(`pay.technicalL4`)}}</span>
                  <!-- 新币种及新技术指标优先使用 -->
                  <span>{{$t(`pay.NewCurrency`)}}</span>
                  <!-- 日报,周报，重大消息订阅 -->
                  <span>{{$t(`pay.greatMessage`)}}</span>
                  <span>{{$t(`pay.customizeMessage`)}}</span>
                  <span>Mobile App</span>
                  <span>{{$t(`pay.support`)}}</span>
                </div>
                <div>1 day, real time</div>
                <div>500 USDT/500 USDC/500 BUSD</div>
              </li>
    </ul>
</div>
</template>

<script>
import Index from './index.js' 
import i18n from '../../lang/index'
export default {
  metaInfo: {
    meta: [
      {
        name: 'keywords',
        content: 'Coinbus, 权限等级,账号权限,会员等级资费,Privilege Levels, Account Privileges, Membership Level Rates'
      },
      {
        name: 'description',
        content:i18n.t(`seo.privilegeLevel`),
        // content:window.vm.$t(`seo.privilegeLevel`)
      }
    ]
  },
    mixins: [Index]
}
</script>

<style lang="scss" scoped>
    .authorityMain {
  // padding: 20px;
  // width: calc(100vw - 320px);
  width:100%;
  // background: firebrick;
  // display: flex;
  // justify-content: center;
  padding: 80px;


}
// 权限详情
.authorityBox {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border: none ;
  // height: 600px;

  display: flex;
  li {
    //  border: 1px solid red;
    width: calc(100% / 6);
    display: flex;
    flex-direction: column;
    font-size: 15px;
    .authorityContent {
      flex: 1;
      // line-height: 300px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      span {
        // outline: 1px solid red;
        display: inline-block;
        width: 100%;
        // height: 50px;
        display: flex;
        justify-content: center;
        flex-wrap: wrap; 
      
        line-height: 30px;
      }
    }
    div {
      border: 1px solid rgba(0, 0, 0, 0.1);
      height: 50px;
      text-align: center;
      line-height: 50px;
    }
  }
}
.upgradeBox {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;

  .upgrade1 {
    font-size: 28px;
    color: #f7931a;
    margin-left: 5px;
  }
}
.forbban {
  // background: rgba(0, 0, 0, 0.2);
  width: 100px;
  text-align: center;
  // padding: 0px 10px;
  // color: #fff;
  // outline: 1px solid  rgba(0, 0, 0, 0.2);
}

</style>