<template>
  <!--底部状态栏-->
  <mt-tabbar v-model="activeTab" :fixed="fixed">
    <mt-tab-item id="MAIN" @click.native="goHome">
      <i slot="icon" class="iconfont icon-home"/>
      首页
    </mt-tab-item>
    <mt-tab-item id="WELL" @click.native="goWellManage">
      <i slot="icon" class="iconfont icon-jinggai2"/>
      闸井
    </mt-tab-item>
    <mt-tab-item id="JOB" @click.native="goJob">
      <i slot="icon" class="iconfont icon-quanbudingdan"/>
      工单
    </mt-tab-item>
    <!--<mt-tab-item id="MESSAGE" @click.native="goMessage">-->
    <!--<i slot="icon" class="iconfont icon-31xiaoxi"/>-->
    <!--消息-->
    <!--</mt-tab-item>-->
    <mt-tab-item id="MINE" @click.native="goMine">
      <i slot="icon" class="iconfont icon-mine"/>
      我的
    </mt-tab-item>
  </mt-tabbar >
</template>

<script>
  import {Tabbar, TabItem, Toast, Cell} from 'mint-ui'

  export default {
    name: "TabBottom",
    components: {
      Tabbar
    },
    props: [
      'activeTabItem'
    ],
    data() {
      return {
        activeTabInit: 'MAIN',  // 当前tab
        fixed: true  // 是否固定在底部
      }
    },
    computed:{
      activeTab: {
        get: function() {
          if(this.activeTabItem && this.activeTabItem!=''){
            return this.activeTabItem
          }else{
            return this.activeTabInit
          }
        },
        set: function () {
        }

      }
    },
    methods:{
      goHome(){
          this.$router.push({name: 'index'})
      },
      goWellManage(){
          this.$router.push({name: 'wellManage',params:{refresh:true}})
      },
      goJob(){
          this.$router.push({name: 'job'})
      },
      goMessage(){
        this.$router.push({name: 'index'})
      },
      goMine(){
          this.$router.push({name: 'mine'})
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "~assets/css/variable.styl"
  $tabbarheight = 45px

  .mint-tabbar {
    height $tabbarheight
    a {
      padding 0
    }
    .mint-tab-item.is-selected {
      background-color: #eaeaea;
      color: #0c83e3;
    }
    .mint-tab-item-icon {
      margin-top 0.3rem
      margin-bottom 0rem
      i {
        font-size 1.4rem
      }
    }
    a .mint-tab-item-label {
      line-height 1rem
      font-size 0.7rem
    }
  }
</style>