<template>
    <page-layout :desc="desc" :linkList="linkList">
        <div v-if="this.extraImage && !isMobile" slot="extra" class="extraImg">
            <img :src="extraImage" />
        </div>
        <page-toggle-transition :disabled="animate.disabled" :animate="animate.name" :direction="animate.direction">
            <router-view ref="page" />
        </page-toggle-transition>
    </page-layout>
</template>

<script>
import PageLayout from '../../layouts/PageLayout.vue';
import PageToggleTransition from '@/components/transition/PageToggleTransition';
import { mapState } from 'vuex';

export default {
    name: 'PageTemplateView',
    components: { PageToggleTransition, PageLayout },
    data() {
        return {
            page: {},
        };
    },
    computed: {
        ...mapState('settingModule', ['isMobile', 'multiPage', 'animate']),
        desc() {
            return this.page.desc;
        },
        linkList() {
            return this.page.linkList;
        },
        extraImage() {
            return this.page.extraImage;
        },
    },
    mounted() {
        this.page = this.$refs.page;
    },
    updated() {
        this.page = this.$refs.page;
    },
};
</script>

<style lang="less" scoped>
.extraImg {
    margin-top: -60px;
    text-align: center;
    width: 195px;
    img {
        width: 100%;
    }
}
</style>
