<template>
  <div class="pages-bgcolor">
    <div class="auto">
      <div class="row col-xs-12 col-sm-12 col-md-12 nav-bgcolor"  v-show="isMenu" >
        <div class="col-xs-4 col-sm-4 col-md-4 pageskuang" v-for="tab in tabs" @click="gotopage(tab.link,tab.name)">
          <img class="imgs" :src="imgback(tab.icon)">
          <p></p>
          <p class="pagesfoot">{{tab.name}}</p>
          <p> </p>
        </div>
      </div>
      <div class="row col-xs-12 col-sm-12 col-md-6" style="overflow:auto;" v-show="!isMenu">
        <route v-ref:route> </route>
      </div>
    </div>
  </div>
</template>

<script scoped>
  import Vue from 'vue'
  import  * as Util from '../Util'
  export default {
    title: '底部导航',
    data () {
      return {
        titleName:'安检导航',
        isMenu:true,
        tabs: this.getTabs(),
        text: '导航组件this',
        beforeName:'主界面'
      }
    },
    ready () {
      this.$refs.route.init('repair-first')
    },
    methods: {
      getTabs(){
        for(let funs in Vue.user.functions){
          if(Vue.user.functions[funs].link == 'check-page'){
            return Vue.user.functions[funs].children
          }
        }
      },
      imgback(val){
        return require('../../assets/'+val+'.png')
      },
      // 返回主界面
      back(){
        this.titleName = '主界面'
        this.isMenu = true
      },
      gotopage(param,title) {
        this.$goto(param,'self')
      },
      mute () {
        HostApp.mute()
      }
    },
  }
</script>
<style lang="less">
  .tab-befor-img  {
    content: '';
    background-size: 30px;
    display: inline-block;
    margin-right: 8px;
    height: 30px;
    width: 30px;
    vertical-align: -35%;
  }
  .pageskuang{
    vertical-align:middle;
    display:table-cell;
    width: 32%;
    top:-50%;
    margin-top: 1%;
    margin-left: 1%;
    border:1px solid #e3e3e3;
    text-align: center;
    background-color: #ffffff;
  }
  .pgesfoot{
    font-size: 14px;
    color: #666666;
    /*    font-family: "Pingfhs";*/
  }
  .imgs{
    width: 60px;
    margin-top: 15px;
  }
  .pages-bgcolor{
    text-align: center;
    background-color: #f0f0ef;
  }
  img[src=""],img:not([src]){
    opacity: 0;
    border:none;
    visibility: hidden;
    max-width: none;
  }
</style>
