<template>
  <div class="no-close row android-repair-order">
    <div :class="[fullpage ? 'menu-hide' : 'col-sm-3 col-xs-3']" >
      <ul class="nav nav-tabs">
        <li>
          <p style="padding-left: 15px; color: white; font-weight: 550">
            登录人：{{loginInfo.name}}
          </p>
          <!--({{loginInfo.id}})-->
        </li>
        <li v-for="tab in tabs" @click="tabSelect(tab.link)" :class="{active: tab.link === componentName}">
          <a href="#" class="tab-befor-img">
            <img  :src="getImg(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>
    <div :class="[fullpage ? 'col-sm-12 col-xs-12' : 'col-sm-9 col-xs-9']" style="overflow: auto;">
      <!--<route v-ref:route></route>-->
      <repair-first v-if="componentName === 'repair-first'"></repair-first>
      <completed-repair v-if="componentName === 'completed-repair'"></completed-repair>
      <up-load v-if="componentName === 'up-load'"></up-load>
      <check-page v-if="componentName === 'check-page'"></check-page>
      <readmeter-home v-if="componentName === 'readmeter-home'"></readmeter-home>
      <repair-send v-if="componentName === 'repair-send'"></repair-send>
    </div>
  </div>
</template>

<script scoped>
  import Vue from 'vue'
  import  * as Util from '../Util'
  export default {
    title: '底部导航',
    data () {
      return {
        componentName: 'repair-first',
        tabs: Util.f.functions,
        text: '导航组件this',
        fullpage: false,
        loginInfo: {}
      }
    },
    ready () {
      this.loginInfo = Object.assign({}, this.loginInfo, Vue.user)
      console.log(this.loginInfo, 'loginINfo')
      // this.$refs.route.init('repair-first')
    },
    methods: {
      // 选择tab
      tabSelect (name) {
        this.componentName = name
        // this.$refs.route.init(name)
        if (name !== 'text-chat-pane') {
          this.notified('false')
        } else {
          this.notified('true')
        }
      },
      notified (stopped) {
        console.log('txtServiceStopped invoked$')
        if (this.$androidUtil.isAndroid) {
          HostApp.setPreference('txtServiceStopped', stopped)
          HostApp.setPreference('msgCount', '0')
        }
      },
      mute () {
        if(navigator.userAgent.match('iPad') || navigator.userAgent.match('iPhone')){
          window.prompt("mute","")
        }else{
          HostApp.mute()
        }
      },
      getImg (param) {
        return require(`../assets/${param}.png`)
      }
    },
    events: {
      showFullPage () {
        this.fullpage = true
      },
      hideFullPage () {
        this.fullpage = false
      }
    }
  }
</script>
<style lang="less">
  .tab-befor-img  {
    margin: 3px 0;
    content: '';
    background-size: 30px;
    display: inline-block;
    margin-right: 8px;
    height: 30px;
    width: 100%;
    vertical-align: -35%;
  }
  img[src=""],img:not([src]){
    opacity: 0;
    border:none;
    visibility: hidden;
    max-width: none;
  }
  /* .repair-mute-class {
     &::before {
       .tab-befor-img("../assets/guanbishengyin.png")
     }
   }*/
  .menu-hide {
    display: none;
  }
</style>
