<template>
    <!--<cheader title="我的" class="ghost" fixed v-ref:header>
        <i slot="left" class="icon icon-setting" id="setting"></i>
    </cheader>-->
    <div class="my-header" v-if="data.nickName">
        <a class="user-info auth" id="user-info" href='/me/mydetails'>
            <img class="user-avatar" :src="headIco" @error="setEmptyimg">
            <span class="username">{{ data.nickName }}</span>
            <div class="account-mg">账号管理<span class="icon icon-right"></span></div>
        </a>
        <!--<a class="vip-level level-{{data.vipLevel}}" v-if="data.vipLevel" href='/me/grade'></a>-->
    </div>
    <div class="my-header unlisted" v-else>
        <span class="auth username">登录/注册</span>
    </div>
    <a class="change-channel">
        <span class="label">切换购物频道</span>
        <span class="channel">MEN<span class="icon icon-right"></span></span>
    </a>
    <div class="group-list">
        <div class="user-count">
            <a class="auth uc-item" href="/me/collection">
                <p class="num">{{productNum}}</p>
                <p class="label">商品收藏</p>
            </a>
            <a class="auth uc-item" href="/me/collection?tab=article">
                <p class="num">{{editorialNum}}</p>
                <p class="label">资讯收藏</p>
            </a>
            <a class="auth uc-item" href="/me/records?type={{recordNum}}">
                <p class="num">{{recordNum}}</p>
                <p class="label">浏览记录</p>
            </a>
        </div>
    </div>    
    <div class="my-order">
        <!--<a class="order-title auth"  href="/me/order?type=1">
            我的订单
            <span class="read-order">
                查看全部订单 <span class="icon icon-right"></span>
            </span>
        </a>-->
        <div class="order-type clearfix">
            <a class="type-item auth" href="/me/order?type=2">
                <span class="icon icon-card"></span>
                <span class="item-name">待付款</span>
                <span class="num" v-if="data.wait_pay_num">{{data.wait_pay_num}}</span>
            </a>
            <a class="type-item auth" href='/me/order?type=3'>
                <span class="icon icon-bag2"></span>
                <span class="item-name">待发货</span>
                <span class="num" v-if="data.wait_cargo_num">{{data.wait_cargo_num}}</span>
            </a>
            <a class="type-item auth" href="/me/order?type=4">
                <span class="icon icon-logistics"></span>
                <span class="item-name">待收货</span>
                <span class="num" v-if="data.send_cargo_num">{{data.send_cargo_num}}</span>
            </a>
            <a class="type-item auth" href="/me/return">
                <span class="icon icon-money"></span>
                <span class="item-name">退换货</span>
                <span class="num" v-if="data.refund_exchange_num">{{data.refund_exchange_num}}</span>
            </a>
            <a class="type-item auth" href="/me/order?type=1">
                <span class="icon icon-money"></span>
                <span class="item-name">全部订单</span>
                <span class="num" v-if="data.refund_exchange_num">{{data.refund_exchange_num}}</span>
            </a>
        </div>
    </div>
    <!--<div class="group-list">
        <a class="glist-item auth" href="/me/collection">
            我的收藏
            <span class="num">商品/品牌/资讯  <span class="icon icon-right"></span></span>
        </a>
        <a class="glist-item auth" href="/me/records?type={{recordNum}}">
            浏览记录
             <span class="num">{{recordNum}}<span class="icon icon-right"></span></span>
        </a>
    </div>-->
    <!--<div class="group-list">
        <a class="glist-item auth" href="/me/mycurrency">
            有货币
            <span class="num">{{data.yoho_coin_num}}  <span class="icon icon-right"></span></span>
        </a>
    </div>-->
    <div class="group-list address-item">
        <a class="glist-item auth" id="address" v-if="data.nickName">
            地址管理
            <span class="num">{{data.address_num}}  <span class="icon icon-right"></span></span>
        </a>
        <p class="glist-item" v-else>
            地址管理
        </p>
    </div>
    <div class="group-list">
        <a class="glist-item" href="/help">
            帮助中心
            <span class="num"><span class="icon icon-right"></span></span>
        </a>
        <p class="glist-item">
            电话客服
            <span class="num tel">400-889-9646<span class="icon icon-right"></span></span>
        </p>
        <p class="glist-item ghost" id="setting">
            设置
            <span class="num"><span class="icon icon-right"></span></span>
        </p>
    </div>

    <div class="group-list">
        <img class="home-banner">
    </div>
</template>

<script>
    const yoho = require('yoho');
    const $ = require('jquery');
    const interceptClick = require('common/intercept-click');
    const cheader = require('component/header.vue');
    const cookie = require('yoho-cookie');


    function getRecordsNum(that) {
        //  浏览记录数量
        $.ajax({
            url: '/me/recordNum'
        }).then(result => {
            if (result.code === 200) {
                that.recordNum = result.data;
            }
        });
    }

    module.exports = {
        data() {
            return {
                data: {},
                headIco: '',
                recordNum: '',
                productNum: '',
                editorialNum: ''
            };
        },
        components: {
            cheader
        },
        methods: {
            setEmptyimg() {
                // 图片报错时，给个默认透明图片
                this.headIco = 'data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw==';
            },
            reload() {
                $('#address').off('click', this.addressClick);
                $('.auth').off('click', this.authClick);
                $('.auth').removeClass('no-intercept');

                if (yoho.isLogin()) {

                    $.ajax({
                        url: '/me/userdata'
                    }).then(result => {
                        this.data = result || {};
                        if (this.data.headIco) {
                            this.headIco = this.data.headIco || 0;
                        }
                    });

                    $.ajax({
                        url: '/me/favoriteNum'
                    }).then(result => {
                        this.productNum = result.data.product_favorite_total;
                    });

                    $('#address').on('click', this.addressClick);

                    //  之前是否有访客浏览
                    if (cookie.get('_browseskn_h5')) {
                        $.ajax({
                            url: '/me/addRecords'
                        }).then(result => {
                            if (result.code === 200) {
                                getRecordsNum(this);
                            }
                        });
                    } else {
                        getRecordsNum(this);
                    }
                } else {
                    this.data = {
                        nickName: false
                    };
                    this.productNum = 0;
                    this.editorialNum = 0;
                    this.recordNum = 0;
                    this.setEmptyimg();

                    $('.auth').addClass('no-intercept');
                    $('.auth').on('click', this.authClick);
                }
            },
            addressClick() {
                yoho.goAddress({
                    type: '2'
                });
                return false;
            },
            authClick(e) {
                const id = $(e.target).attr('id');
                const href = $(e.target).attr('href');

                yoho.goLogin('', () => {
                    this.reload();

                    setTimeout(() => {
                        if (id === 'address') {
                            yoho.goAddress({
                                type: '2'
                            });
                        } else if (href !== '/me/mydetails') {
                            interceptClick.intercept(href);
                        }
                    }, 200);
                });
                return false;
            },
            toggle() {
                let ghost = true;
                let ghost2 = false;
                let ghost3 = false;

                if (window.scrollY > 40) {
                    ghost = false;
                    ghost2 = false;
                    ghost3 = false;
                } else if (window.scrollY > 25) {
                    ghost = false;
                    ghost3 = true;
                } else if (window.scrollY > 10) {
                    ghost = false;
                    ghost2 = true;
                }

                this.$refs.header.$el.classList.toggle('ghost', ghost);
                this.$refs.header.$el.classList.toggle('ghost-2', ghost2);
                this.$refs.header.$el.classList.toggle('ghost-3', ghost3);
            }
        },
        ready() {
            this.reload();

            $('#setting').on('click', function() {
                yoho.goSetting();
                return false;
            });

            window.addEventListener('touchmove', () => {
                this.toggle();
            });

            window.addEventListener('scroll', () => {
                this.toggle();
            });

            document.addEventListener('visibilitychange', () => {
                if (!document.hidden) {
                    this.reload();
                }
            });
        }
    };
</script>

<style>
    .my-page {
        color: #444;
        background: #f0f0f0;

        a {
            color: #000;
        }

        .blk-header-main {
            position: absolute;
            left: 0;
            right: 0;
        }

        .top-box {
            .blk-header {
                background-color: transparent;
                border-bottom: 0;
            }
        }

        .top-change {
            .blk-header {
                background-color: #fff;
            }
        }

        .my-header {
            height: 260px;
            /*background: resolve("me/header-bg.png");*/
            background: #fff;
            background-size: cover;
            padding: 0 30px;
        }

        .user-info {
            float: left;
            position: relative;
            top: 56px;
            color: #000;
            font-size: 34px;
            height: 190px;
            text-align: left;

            .user-avatar {
                display: inline-block;
                position: relative;
                width: 170px;
                height: 170px;
                border-radius: 50%;
                margin: 0 auto;

                /* border: 3px solid #b0b0b0; */
                background: resolve("me/user-icon.png");
                background-size: 100%;
                vertical-align: middle;
            }
        }

        .account-mg {
            display: inline-block;
            position: relative;
            top: 10px;
            font-size: 32px;

            .icon-right {
                margin-left: 10px;
            }
        }

        .vip-level {
            display: block;
            width: 100px;
            height: 36px;
            position: relative;
            top: 160px;
            left: 325px;
        }

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

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

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

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

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

        .username {
            width: 326px;
            display: inline-block;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 32px;
            position: relative;
            top: 10px;
        }

        .unlisted {
            padding: 0;

            .username {
                width: 300px;
                height: 88px;
                line-height: 88px;
                display: block;
                text-align: center;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 32px;
                margin: 0 auto;
                position: relative;
                top: 84px;
                border: 1px solid #434343; 
            }
        }

        .my-order {
            margin-bottom: 20px;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            background: #fff;

            .order-title {
                display: block;
                padding: 0 30px;
                font-size: 34px;
                line-height: 88px;
                position: relative;

                &.highlight {
                    background: #eee;
                }

                .read-order {
                    color: #b0b0b0;
                    font-size: 30px;
                    float: right;
                }

                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 92%;
                    height: 0;
                    border-top: 1px solid #eee;
                    margin-left: 28px;
                }
            }

            .order-type {
                padding: 20px 30px;
                text-align: center;
                height: 150px;

                .icon {
                    font-size: 45px;
                    margin-bottom: 10px;
                    display: block;
                }

                .type-item {
                    position: relative;
                    float: left;
                    color: #444;
                    font-size: 24px;
                    line-height: 1.5;
                    width: 86px;
                    margin-top: 13px;
                    margin-left: 60px;

                    &.highlight {
                        background: #eee;
                    }

                    &:first-child {
                        margin-left: 0;
                    }

                    &:last-child {
                        width: 98px;
                    }

                    .num {
                        position: absolute;
                        top: -35px;
                        right: -20px;
                        width: 72px;
                        height: 72px;
                        font-size: 34px;
                        line-height: 72px;
                        color: #fff;
                        background: #ff081c;
                        text-align: center;
                        border-radius: 50%;
                        transform: scale(0.5);
                    }
                }
            }
        }

        .group-list {
            margin-bottom: 20px;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
            background: #fff;

            &:last-child {
                border-bottom: none;
            }

            .glist-item {
                display: block;
                position: relative;
                padding: 0 30px;
                font-size: 34px;
                line-height: 88px;
                overflow: hidden;

                &.highlight {
                    background: #eee;
                }

                &:after {
                    content: "";
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    width: 100%;
                    height: 0;
                    border-top: 1px solid #eee;
                }

                &:last-child:after {
                    content: none;
                }
            }

            .icon {
                font-size: 34px;
                vertical-align: top;
            }

            .num {
                color: #b0b0b0;
                float: right;
            }

            .tel {
                /*padding-right: 10px;*/
                .icon-right {
                    margin-left: 10px;
                }
            }
        }

        .address-item {
            margin-bottom: 0;
            border-bottom: none; 
        }

        .change-channel {
            height: 88px;
            width: 100%;
            background: #020202;
            line-height: 88px;
            padding: 0 30px;
            box-sizing: border-box;
            font-size: 32px;
            display: block;

            .label {
                float: left;
                color: #fff;
            }

            .channel {
                float: right;
                color: #fff;
            }
        }
        
        .user-count {
            padding: 0 60px;
            background: #fff;
            text-align: center;

            .uc-item {
                display: inline-block;
                margin: 24px 44px;
                text-align: center;
                
                .num {
                    margin: 14px 0;
                    font-size: 24px;
                    width: 100%;
                    color: #000;
                }

                .label {
                    margin: 14px 0;
                    font-size: 24px;
                    width: 100%;
                }
            }
        }

        .home-banner {
            max-width: 100%;
            display: block;
            margin: 30px auto;
        }
    }

    .app.ios {
        .blk-header {
            padding-top: 60px;
        }
    }
</style>