<template>
    <div class="container" >
        <transition :name="'vux-pop-' + (direction === 'forward' ? 'in' : 'out')">
            <router-view class="router-view-contain"></router-view>
        </transition>
        <div class="bottom">
            <div class="item" @click="choose('租房')">
                <img src="@/assets/tabbar_icon_01_pre.png" v-if="nowTab=='租房'" alt="">
                <img src="@/assets/tabbar_icon_01.png" v-else alt="">
                <span :class="[nowTab=='租房'?'active':'']">租房</span>
            </div>
            <div class="item" @click="choose('攻略')">
                <img src="@/assets/tabbar_icon_02_pre.png" v-if="nowTab=='攻略'" alt="">
                <img src="@/assets/tabbar_icon_02.png" v-else alt="">
                <span :class="[nowTab=='攻略'?'active':'']">攻略</span>
            </div>
            <div class="item" @click="choose('我的')">
                <img src="@/assets/tabbar_icon_03_pre.png" v-if="nowTab=='我的'" alt="">
                <img src="@/assets/tabbar_icon_03.png" v-else alt="">
                <span :class="[nowTab=='我的'?'active':'']">我的</span>
            </div>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
export default {
    name: 'index',
    data() {
        return {

        }
    },
    created() {
        console.log(this.$route.path)
    },
    computed: {
        nowTab() {
            var value = '租房'
            switch (this.$route.path) {
                case '/home':
                    value = '租房'
                    break;
                case '/strategy':
                    value = '攻略'
                    break;
                case '/user':
                    value = '我的'
                    break;
            }
            return value
        },
        ...mapState(["direction"])
    },
    methods: {
        choose(tab) {

            if (tab != this.nowTab) {
                var path = ''
                switch (tab) {
                    case '租房':
                        path = '/home'
                        break;
                    case '攻略':
                        path = '/strategy'
                        break;
                    case '我的':
                        path = '/user'
                        break;
                }
                this.$router.replace(path


                )
            }

        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.router-view-contain {
    width: 100%;
    box-sizing: border-box;
    animation-duration: 0.3s;
    animation-fill-mode: both;
    backface-visibility: hidden;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    margin-bottom: 0.98rem;

}

.bottom {
    min-height: 0.98rem;
    height: 0.98rem;
    background: rgba(250, 250, 250, 1);
    display: flex;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;

    .item {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
            width: 0.54rem;
            height: 0.54rem;
            margin-bottom: 0.06rem;
        }
        span {
            font-size: 0.2rem;
            font-weight: bold;
            color: rgba(186, 192, 203, 1);
            line-height: 0.2rem;

            &.active {
                color: rgba(21, 168, 170, 1);
            }
        }
    }
}
.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>


