<template>
    <div id="app">
        <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
            <keep-alive :include="['search','getMore']">
                <router-view class="router-view"></router-view>
            </keep-alive>

        </transition>
        <progress-dialog v-if="isLoading"></progress-dialog>
    </div>
</template>

<script>
import ProgressDialog from "./components/progressDialog";
import { mapState } from "vuex";
export default {
    name: 'App',
    computed: {
        ...mapState(["direction", "isLoading", "userInfo"])
    },
    created() {
        // this.$http.get({
        //     url: '/wx/getSignature',
        //     data: {
        //         shareUrl: location.href.split('#')[0]
        //     }
        // }).then(response => {
        //     console.log(response)
        //     wx.config({
        //         debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //         appId: response.appId, // 必填，公众号的唯一标识
        //         timestamp: response.timestamp, // 必填，生成签名的时间戳
        //         nonceStr: response.nonceStr, // 必填，生成签名的随机串
        //         signature: response.signature, // 必填，签名，见附录1
        //         jsApiList: ['openLocation','getLocation'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        //     })
        // })
    },
    watch: {
        $route() {
            if (this.$route.meta.title) {
                document.title = this.$route.meta.title
            }
            else {
                document.title = '享居屋'
            }

        }
    },
    components: {
        ProgressDialog
    },
}
</script>
<style lang="less" scoped>
#app {
    width: 100%;
    height: 100%;
}
.router-view {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    backface-visibility: hidden;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    background-color: #fff;
}
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
    will-change: transform;
    height: 100%;
    position: absolute;
    left: 0;
}

.vux-pop-out-enter-active {
    animation-name: popInLeft;
}
.vux-pop-out-leave-active {
    animation-name: popOutRight;
}

.vux-pop-in-enter-active {
    perspective: 1000;
    animation-name: popInRight;
}

.vux-pop-in-leave-active {
    animation-name: popOutLeft;
}

@keyframes popInLeft {
    from {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutLeft {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes popInRight {
    from {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes popOutRight {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}
</style>

