<template>
    <app-layout>

        <app-user-center-top
            :top-style="userCenter.top_style"
            :top-pic-url="userCenter.top_pic_url"
            :member-pic-url="userCenter.member_pic_url"
            :is_icon_super_vip="setting.is_icon_super_vip"
        ></app-user-center-top>

        <app-foot-box 
            v-if="userCenter.is_foot_bar_status == 1"
        ></app-foot-box>

        <app-vip-card></app-vip-card>

        <app-account-balance 
            v-if="userCenter.account_bar.status == 1"
            :margin="true"
            :round="true"
            :input-user-center="userCenter"
        ></app-account-balance>

        <app-my-order
            v-if="userCenter.is_order_bar_status == 1"
            :margin="true"
            :round="true"
            :order_bar="userCenter.order_bar"
        ></app-my-order>

        <app-my-service
            v-if="userCenter.is_menu_status == 1"
            :title="userCenter.menu_title"
            :menu_style="userCenter.menu_style"
            :menus="userCenter.menus"
            :margin="true"
            :round="true"
        ></app-my-service>

        <app-copyright 
            v-if="copyright && copyright.status == '1'"
            background-color="transparent"
            :link="copyrightLink"
            :pic-url="copyright.pic_url"
            :text="copyright.description"
        ></app-copyright>

    </app-layout>
</template>

<script>
    import { mapState } from 'vuex';
    import AppUserCenterTop from '../../components/page-component/app-user-center-top/app-user-center-top.vue';
    import AppAccountBalance from '../../components/page-component/app-account-balance/app-account-balance.vue';
    import AppMyOrder from '../../components/page-component/app-my-order/app-my-order.vue';
    import AppMyService from '../../components/page-component/app-my-service/app-my-service.vue';
    import AppCopyright from '../../components/page-component/app-copyright/app-copyright';
    import AppVipCard from '../../components/page-component/app-vip-card/app-vip-card';
    import AppFootBox from '../../components/page-component/app-foot-box/app-foot-box';

    export default {
        name: 'user-center',

        components: {
            AppCopyright,
            AppUserCenterTop,
            AppAccountBalance,
            AppMyOrder,
            AppMyService,
            AppVipCard,
            AppFootBox
        },

        computed: {
            ...mapState({
                copyright: state => state.mallConfig.copyright,
                setting: state => state.mallConfig.mall.setting,
                userCenter: state => state.userCenter.data,
            }),
            copyrightLink() {
                if (!this.copyright) return {};
                let { open_type, new_link_url, params } = this.copyright.link;
                return {
                    openType: open_type,
                    url: new_link_url,
                    params: params ? params : []
                };
            }
        },

        onShow() {
            this.$event.on(this.$const.EVENT_USER_LOGIN).then(() => {
                uni.redirectTo({
                    url: `/pages/user-center/user-center`
                });
            });
            if (this.$user.isLogin()) {
                this.$store.dispatch('user/refreshInfo');
            }
            this.$store.dispatch('userCenter/data');
        }
    }
</script>
