<template>
  <div class="nav-bgcolor">
    <div class="auto">
      <tools-page :need-back="!isMenu" :title="titleName" @back="back()" > </tools-page>

      <div class="row nav-bgcolor"  v-show="isMenu" >
        <div class="col-sm-6 col-xs-6 manbiankuang" v-for="tab in tabs" @click="gotopage(tab.link,tab.name)">
          <img class="butt" :src="imgback(tab.name)">
          <p></p>
          <p class="navimagesfoot">{{tab.name}}</p>
          <p> </p>
          <p> </p>
        </div>
      </div>
      <!--<ul class="nav nav-tabs">-->
      <!--<li v-for="tab in tabs" @click="tabSelect(tab.link)" :class="{active: tab.link === componentName}">-->
      <!--<a href="#" class="tab-befor-img">-->
      <!--<img  :src="tab.icon" style="height: 30px;width:30px;">{{tab.name}}</a>-->
      <!--</li>-->
      <!--<li @click="mute()">-->
      <!--<a href="#" class="repair-mute-class" >-->
      <!--<img  src="../assets/guanbishengyin.png" style="height: 30px;width:30px;border-width:0">关闭声音</a>-->
      <!--</li>-->
      <!--</ul>-->
      <div class="row" style="overflow:auto;" v-show="!isMenu">
        <route v-ref:route> </route>
      </div>
    </div>
  </div>
</template>

<script scoped>
  import  * as Util from '../Util'
  export default {
    title: '底部导航',
    data () {
      return {
        titleName:'主界面',
        isMenu:true,
        tabs: Util.f.functions,
        text: '导航组件this',
        beforeName:'主界面'
      }
    },
    ready () {
      // this.$refs.route.init('repair-first')
    },
    methods: {
      imgback(val){
        return require('../assets/'+val+'竖屏3.png')
      },
      // 返回主界面
      back(){
        this.titleName = '主界面'
        this.isMenu = true
      },
      gotopage(param,title) {
        if(title == '退出系统'){
          this.$showMessage('即将返回登陆界面！', ['confirm', 'cancel']).then((res) => {
            if (res === 'confirm') {
              this.$androidUtil.setPreference('f_repairman_id', 'x')
              this.$androidUtil.setPreference('f_repairman_name', 'x')
              this.$back()
            }
          })
        }else{
          this.isMenu = false
          if(this.beforeName == title){
            return
          }
          this.titleName = title
          this.beforeName = title
          let data = {
            sourcet: '竖屏'
          }
          if(title == '待办工单'){
            param = param+'V'
          }
          this.$refs.route.init(param,data)
          // if (param !== 'text-chat-pane') {
          //   this.notified('false')
          // } else {
          //   this.notified('true')
          // }
        }
      },
      // notified (stopped) {
      //   console.log('txtServiceStopped invoked$')
      //   if (this.$androidUtil.isAndroid) {
      //     this.$androidUtil.setPreference('txtServiceStopped', stopped)
      //     this.$androidUtil.setPreference('msgCount', '0')
      //   }
      // },
      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%;
  }
  .manbiankuang{
    width: 44%;
    margin-top: 15px;
    margin-left: 4%;
    border:1px solid #e3e3e3;
    border-radius:10px 10px 10px 10px;
    text-align: center;
    background-color: #ffffff;
  }
  .navimagesfoot{
    font-size: 14px;
    color: #666666;
/*    font-family: "Pingfhs";*/
  }
  .nav-bgcolor{
    background-color: #f0f0ef;
  }
  img[src=""],img:not([src]){
    opacity: 0;
    border:none;
    visibility: hidden;
    max-width: none;
  }
  /* .repair-mute-class {
     &::before {
       .tab-befor-img("../assets/guanbishengyin.png")
     }
   }*/
  .butt {margin-left: 20%;  margin-right: 20%;  margin-top: 15%;  height: 20%;  width: 20%;  border-radius: 5%;  text-align: center;align-items:center;}
  .butt div.content {line-height:320%;  height: 100%;  font-size: 48px;  color: white;  text-align:center;}
  .butt span{ width: 100%;  font-size: 48px;  color: white;  text-align: center;}
</style>
