<template>
    <div>
        <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" :key="pri.title">
                    <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>
    </div>
</template>
<style>
    .go-back-btn {
        font-size: 64px;
    }
</style>

<script>
    import $ from 'jquery';
    import yoho from 'yoho';

    export default {
        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() {});
            }
        },
        mounted() {
            this.reload();
        }
    };
</script>