<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <router-view/>
    <mt-tabbar v-model="selectedTab">
      <mt-tab-item id="index">
        <img slot="icon" :src="icon_now.index">
        首页
      </mt-tab-item>
      <mt-tab-item id="contract">
        <img slot="icon" :src="icon_now.contract">
        合同
      </mt-tab-item>
      <mt-tab-item id="contact">
        <img slot="icon" :src="icon_now.contact">
        联系人
      </mt-tab-item>
      <mt-tab-item id="my">
        <img slot="icon" :src="icon_now.my">
        我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>

<script>

  import icon_index from '../static/tabbar/index.png';
  import icon_contract from '../static/tabbar/contract.png';
  import icon_contact from '../static/tabbar/contact.png';
  import icon_my from '../static/tabbar/my.png';
  import icon_index_active from '../static/tabbar/index_active.png';
  import icon_contract_active from '../static/tabbar/contract_active.png';
  import icon_contact_active from '../static/tabbar/contact_active.png';
  import icon_my_active from '../static/tabbar/my_active.png';
export default {
  name: 'App',
  data(){
    return{
      selectedTab:'index',
      icon_now:{
        index:icon_index_active,
        contract:icon_contract,
        contact:icon_contact,
        my:icon_my
      },
      icon:{
        index:icon_index,
        contract:icon_contract,
        contact:icon_contact,
        my:icon_my
      },
      icon_active:{
        index:icon_index_active,
        contract:icon_contract_active,
        contact:icon_contact_active,
        my:icon_my_active
      }


    }
  },
  watch:{
    'selectedTab':function(val){
      this.$router.push('/'+val);

      for(let i in this.icon_now){
        this.icon_now[i]=this.icon[i];
      }
      this.icon_now[val]=this.icon_active[val];

    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
