<template>
    <div class="blk-header-wrap">
        <div class="blk-header">
        <div class="blk-header-left">
            <i class="icon icon-back go-back-btn" @click="goBack"></i>
        </div>
        <div class="blk-header-main">
            <span class="blk-header-title">会员等级</span>
        </div>
    </div>
    </div>
    <div class="basic-info block" v-if="vipGrade.vip3">
        <p>
            <span class="user-name">{{vipGrade.name}}</span>
            <span class="vip-icon vip-3"></span>
        </p>
        <p class="grade-desc">
            您已升级至最高的等级啦！
        </p>
        <p class="sum-cost">
            年度累计金额<span> &yen;{{vipGrade.costOfThisYear}}</span>
        </p>
        <div class="progresser">
            <div class="outer"></div>
            <div class="inner" :style="{width: vipGrade.percent + '%'}"></div>
            <span class="beacon beacon-min">
                白金卡会员
            </span>
        </div>
    </div>
    <div class="basic-info block" v-if="vipGrade.vip2">
        <p>
            <span class="user-name">{{vipGrade.name}}</span>
            <span class="vip-icon vip-2"></span>
        </p>
        <p class="grade-desc">
            还差<span class="cost-gap">&yen;{{vipGrade.costGap}}</span>就可以升级为白金会员!
            <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
        </p>
        <p class="sum-cost">
            年度累计金额<span> &yen;{{vipGrade.costOfThisYear}}</span>
        </p>
        <div class="progresser">
            <div class="outer"></div>
            <div class="inner" :style="{width: vipGrade.percent + '%'}"></div>
            <span class="beacon beacon-min">
                金卡会员
            </span>
            <span class="beacon beacon-max">白金卡会员</span>
            <span class="cost-limit">&yen;5000.00</span>
        </div>
   </div>
    <div class="basic-info block" v-if="vipGrade.vip1">
        <p>
            <span class="user-name">{{vipGrade.name}}</span>
            <span class="vip-icon vip-1"></span>
        </p>
        <p class="grade-desc">
            还差<span class="cost-gap">&yen;{{vipGrade.costGap}}</span>就可以升级为金卡会员!
            <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
        </p>
        <p class="sum-cost">
            年度累计金额<span> &yen;{{vipGrade.costOfThisYear}}</span>
        </p>
        <div class="progresser">
            <div class="outer"></div>
            <div class="inner" :style="{width: vipGrade.percent + '%'}"></div>
            <span class="beacon beacon-min">
                银卡会员
            </span>
            <span class="beacon beacon-max">金卡会员</span>
            <span class="cost-limit">&yen;2000.00</span>
        </div>
    </div>
    <div class="basic-info block" v-if="vipGrade.vip0">
        <p>
            <span class="user-name">{{vipGrade.name}}</span>
        </p>
        <p class="grade-desc">
            还差<span class="cost-gap">&yen;{{vipGrade.costGap}}</span>就可以升级为银卡会员!
            <span class="sub-desc">(VIP金额累计需订单成功签收满15天并无退换货)</span>
        </p>
        <p class="sum-cost">
            年度累计金额<span> &yen;{{vipGrade.costOfThisYear}}</span>
        </p>
        <div class="progresser">
            <div class="outer"></div>
            <div class="inner" :style="{width: vipGrade.percent + '%'}"></div>
            <span class="beacon beacon-min">
                普通
            </span>
            <span class="beacon beacon-max">银卡会员</span>
            <span class="cost-limit">&yen;600.00</span>
        </div>
    </div>

    <ul class="cost block">
        <li>
            年度累计金额：
            <span>&yen;{{vipGrade.costOfThisYear}}</span>
        </li>
        <li>
            历史消费总金额
            <span>&yen;{{vipGrade.sumCost}}</span>
        </li>
    </ul>
 
    <div class="privilege block" v-if="!vipGrade.vip0">
        <h3 class="title">我享受的特权</h3>
        <ul class="privilege-list">
            <li v-for="pri in vipGrade.privilege">
                <span class="icon {{pri.pic}}"></span>
                <p>
                    {{pri.title}}
                    <span>{{pri.description}}</span>
                </p>
            </li>
        </ul>
    </div>

    <a class="all-privilege block tap-hightlight" href="/me/privilege">
        查看全部VIP特权
        <span class="icon icon-right"></span>
    </a>
</template>

<script>
    const $ = require('jquery');
    const yoho = require('yoho');

    module.exports = {
        data() {
            return {
                vipGrade: {}
            };
        },
        methods: {
            reload() {

                $.ajax({
                    url: '/me/gradeData'
                }).then(result => {
                    this.vipGrade = result || {};
                });

                setTimeout(function() {
                    if ($('.vip-grade-page').height() < $(window).height()) {
                        $('.vip-grade-page').height($(window).height());
                    }
                }, 500);
            },
            goBack() {
                yoho.goBack({}, function() {}, function() {});
            }
        },
        ready() {
            this.reload();
        }
    };
</script>