<template>
    <div class="personCenter-page">
        <div class="person-header">
            <div class="person-info">
                <img v-if="personData.buyerAvatar" :src="face" alt="头像" class="person-face">
                <img v-else src="../../static/images/defaultface.png" alt="头像" class="person-face">
                <div>
                    <div class="person-name">{{personData.buyerNickName}}</div>
                    <div class="person-coins">联盟币：{{personData.buyerPoint}}</div>
                </div>
            </div>
        </div>
        <div class="cell-padding part-one">
            <div class="total-order">
                <mt-cell title="全部订单" is-link>
                    <img slot="icon" src="../../static/images/order.svg" width="20" height="20">
                </mt-cell>
            </div>
            <ul class="order-box">
                <li class="order-item">
                    <div><p>{{orderNum.stayPayNum}}</p>
                        <p>待付款</p></div>
                </li>
                <li class="order-item">
                    <div><p>{{orderNum.stayDeliverNum}}</p>
                        <p>待发货</p></div>
                </li>
                <li class="order-item">
                    <div><p>{{orderNum.stayTakeNum}}</p>
                        <p>待收货</p></div>
                </li>
                <li class="order-item">
                    <div><p>{{orderNum.stayReplyNum}}</p>
                        <p>待评价</p></div>
                </li>
                <li class="order-item">
                    <div><p>{{orderNum.salesReturnNum}}</p>
                        <p>退货</p></div>
                </li>
            </ul>
        </div>
        <div class="cell-padding part-two">
            <mt-cell title="浏览记录" to="/browseRecordList" is-link>
                <img slot="icon" src="../../static/images/record.svg" width="20" height="20">
            </mt-cell>
            <mt-cell title="我的收藏" to="/collectionList" is-link>
                <img slot="icon" src="../../static/images/collection.svg" width="20" height="20">
            </mt-cell>
            <mt-cell title="我的地址" to="/myAddress" is-link>
                <img slot="icon" src="../../static/images/address.svg" width="20" height="20">
            </mt-cell>
        </div>
        <div class="cell-padding part-three">
            <mt-cell title="我的优惠券" to="/myCoupon" is-link>
                <img slot="icon" src="../../static/images/coupon.svg" width="20" height="20">
            </mt-cell>
        </div>
        <bottom-nav></bottom-nav>
    </div>
</template>
<script type="text/ecmascript-6">
    import bottomNav from '../common/bottomNav.vue';
    import {getpersonData} from '../../vuex/actions';
    import {getorderNum} from '../../vuex/actions';
    import {formatImg}  from '../../utils/commonUtil';

    export default {
        data() {
            return {}
        },
        components: {
            bottomNav
        },
        computed: {
            face(){
                return formatImg.formatSRC(this.personData.buyerAvatar, 100, 100);
            }
        },
        methods: {},
        vuex: {
            getters: {
                personData: ({personCenterData}) => {
                    return personCenterData.personData;
                },
                orderNum: ({personCenterData}) => {
                    return personCenterData.orderNum;
                }

            },
            actions: {
                getpersonData,
                getorderNum,

            },
        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getpersonData(),
                        vm.getorderNum();
            });
        },
        beforeRouteLeave(to, from, next) {
            next();
        }
    }
</script>