<template>
    <div>
        <header-box title="会员等级" ref="header"></header-box>
        <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>
@import '../../scss/me/_vip-grade.css';
    .vip-grade-page {
    background: #f0f0f0;
    padding-bottom: 30px;

    .block {
        padding: 0 30px;
        margin-bottom: 30px;
        border-top: 1px solid #e0e0e0;
        border-bottom: 1px solid #e0e0e0;
        background: #fff;
    }

    .basic-info {
        padding-top: 30px;
        padding-bottom: 25px;
        border-top: none;

        p {
            width: 100%;
            height: auto;
            overflow: hidden;
            display: block;
        }

        span {
            overflow: hidden;
        }

        .user-name {
            float: left;
            max-width: 240px;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 40px;
            margin-right: 0.5rem;
        }

        .vip-icon {
            margin-top: 6px;
            float: left;
            width: 110px;
            height: 40px;
            line-height: 40px;
        }

        .vip-3 {
            background: resolve("me/vip-3.png");
        }

        .vip-2 {
            background: resolve("me/vip-2.png");
        }

        .vip-1 {
            background: resolve("me/vip-1.png");
        }

        .vip-3,
        .vip-2,
        .vip-1 {
            background-size: 100%;
        }

        .grade-desc {
            margin-top: 20px;
            font-size: 26px;
            color: #b0b0b0;

            .sub-desc {
                margin-top: 10px;
            }
        }

        .sum-cost {
            margin-top: 10px;
            font-size: 26px;

            > span {
                font-style: italic;
                font-size: 34px;
                color: #000;
                font-weight: bold;
            }
        }

        .progresser {
            position: relative;
            width: 100%;
            padding: 15px 0;
            margin-bottom: 30px;
        }

        .outer {
            height: 20px;
            background: #e6e6e6;
            border-radius: 10px;
        }

        .inner {
            position: absolute;
            top: 15px;
            height: 20px;
            background: #000;
            border-radius: 10px;
        }

        .beacon {
            position: absolute;
            margin-top: 15px;
            font-style: italic;
            margin-bottom: 30px;
        }

        .beacon-max {
            right: 0;
        }

        .cost-limit {
            position: absolute;
            top: -30px;
            right: 0;
            color: #b0b0b0;
        }

        .cost-gap {
            color: #000;
            margin: 0 8px;
        }

        .sub-desc {
            display: block;
        }
    }

    .cost {
        padding: 0 0 0 30px;
    }

    .cost li {
        height: 90px;
        line-height: 90px;
        font-size: 34px;
        padding-right: 0;

        &:first-child {
            border-bottom: 1px solid #e0e0e0;
        }

        > span {
            float: right;
            padding: 0 30px 0 0;
            font-size: 28px;
        }
    }

    .privilege {
        padding-right: 0;
        padding-bottom: 40px;

        .title {
            height: 90px;
            line-height: 90px;
            font-size: 30px;
            border-bottom: 1px solid #e0e0e0;
        }
    }

    .all-privilege {
        display: block;
        height: 90px;
        line-height: 90px;
        font-size: 30px;
        margin-bottom: 0;

        span {
            float: right;
            color: #e0e0e0;
            line-height: 90px;
        }
    }
}
</style>

<script>
    import $ from 'jquery';
    import yoho from 'yoho';
    import HeaderBox from 'component/header.vue';

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