<template>
    <div class="tabber">
        <div class="each_nav" :class="{select_nav:nav_index==0}" @click="selectNav(0,'/test')">
            <i class="icon-59"></i>
            <div>最新</div>
        </div>
        <div class="each_nav" :class="{select_nav:nav_index==1}" @click="selectNav(1,'/folder')">
            <i class="icon-37"></i>
            <div>文件夹</div>
        </div>
        <div class="each_nav">
            <i class="icon-100" @click="show_addFile=true"></i>
        </div>
        <div class="each_nav" :class="{select_nav:nav_index==2}" @click="selectNav(2,'/test')">
            <i class="icon-4"></i>
            <div>云笔</div>
        </div>
        <div class="each_nav" :class="{select_nav:nav_index==3}" @click="selectNav(3,'/wangeditor')">
            <i class="icon-53"></i>
            <div>我的</div>
        </div>
        <add-file :show_addFile.sync="show_addFile"></add-file>
    </div>
</template>

<script>
    import addFile from '../components/add_file';
    export default {
        name: "tabbar",
        data(){
            return{
                nav_index:1,
                show_addFile:false,
            }
        },
        created(){
            if(this.$route.path !== "/folder"){
                this.$router.push({path:'/folder'});
            }
        },
        methods:{
            selectNav(index,path){
                if(index === 3){
                    dd.biz.util.openLink({
                        url:"http://doc-phone.linanquan.com/html/dist/index.html?token="+localStorage.getItem('doc_phone_token')+ '#/folder',//要打开链接的地址
                        onSuccess : function(result) {
                            /**/
                        },
                        onFail : function(err) {}
                    })
                }
                if(index === 1){
                    this.nav_index = index;
                    if(this.$route.path == '/folder') this.$router.replace({path:'/folder2'});
                    else this.$router.replace({path:path});
                }
            }
        },
        components:{
            addFile,
        }
    }
</script>

<style scoped lang="less">
    @basefont:50;
    .tabber{
        display:flex;
        justify-content:space-around;
        border-top:1px solid #cccccc;
        background-color:white;
        .each_nav{
            padding:10rem /@basefont 0;
            color: #b8c9ce;
            display:flex;
            flex-direction: column;
            align-items:center;
            justify-content:space-around;
            flex:1;
        }
        .select_nav{
            color: #404040;
        }
    }
    i{
        font-size:34rem /@basefont;
    }
    .icon-100{
        font-size:60rem /@basefont;
        color: #3396fb;
    }
</style>