<template>
  <div id="TabBar" class="tab-bar flex-row">
    <div  style="text-align: center;width:{{shuclass}}" @click="didClickedItem(tab.link,tab.name,$index)"  v-for="tab in tabs"  :class="{active: ($index == actives)}">
      <div class="row">
        <img class="butt" :src="imgback(tab.name,'选中')" v-if="$index == actives">
        <img class="butt" :src="imgback(tab.name,'未选中')" v-if="$index != actives">
        <p class="navimagesfoot" style="padding-top:5px">{{tab.name}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  import  * as Util from '../Util'
  import Vue from 'vue'
  export default {
    title: "TabBar",
    props: {

    },
    data: function () {
      return {
        actives:0,
        shuclass:'100%',
        tabs: Vue.functions,
        // tabs:[{link:'attend-manage',name:'待办工单'},{link:'modify-pass-word',name:'已办工单'},{link:'repair-first',name:'工单上传'}]
      }
    },
    methods: {
      didClickedItem(link,name,tag) {
        this.actives = tag
        var data = {
          link:link,
          name:name,
          tag:tag
        }
        this.$emit('select-item', data);
      },
      imgback(val,flag){
        return require('../assets/'+ val+ flag +'.png')
      },
    },
    ready () {
      this.actives = 0
      var number = this.tabs.length
      var number1 = 100/number
      this.shuclass = number1 +'%'
      this.didClickedItem(this.tabs[0].link,this.tabs[0].name,0)
    },
  }
</script>

<style scoped>
  .tab-bar {
    background-color: white;
    height: 10%;
    border: 0 solid rgb(210, 210, 210);
    border-top-width: 1px;
    position: fixed;
    margin: auto;
    bottom: 0;
    width: 100%;
  }

  .tab-bar-item {
    height: 54px;
  }

  .active {
    color: #1E90FF;
  }

  i {
    font-size: 25px;
  }
  .navimagesfoot{
    font-size: 10px;
    /*    font-family: "Pingfhs";*/
  }
  .butt {margin-left: 20%;  margin-right: 20%;  margin-top: 10%;  width: 25px;  border-radius: 5%;  text-align: center;align-items:center;}
</style>
