<template>
	<div class="title">
		<div class="title-main">
			<div class="title-content">
				<div class="title-part" v-for="item,key in titlelist" @click="goLink(key)">
					<img :src="item.firstsrc" v-show="key!=number"> 
					<img :src="item.secondsrc"  v-show="key==number">
					<p :class="{active:key==number}">{{item.font}}</p>
				</div>
			</div>
			
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				// cooki:'',
				num:'',
				number:'',
				titlelist:[
						{
							firstsrc:require('../assets/img/drawable-mdpi/index_not.png'),
							secondsrc:require('../assets/img/drawable-mdpi/index_click.png'),
							font:'首页'
						},
						{
							firstsrc:require('../assets/img/drawable-mdpi/contant-not.png'),
							secondsrc:require('../assets/img/drawable-mdpi/content-click.png'),
							font:'合同'
						},
						{
							firstsrc:require('../assets/img/drawable-mdpi/people-not.png'),
							secondsrc:require('../assets/img/drawable-mdpi/people-click.png'),
							font:'联系人'
						},
				 		{
				 			firstsrc:require('../assets/img/drawable-mdpi/myself-not.png'),
							secondsrc:require('../assets/img/drawable-mdpi/myself-click.png'),
							font:'我的'
						}
				]
		}
	},
	mounted(){
  	this.goFuc();
  },
  watch:{
  	"$route":function(){
      this.goFuc();
  		}
  },
	methods:{
	  goLink(e){
	  	if(e == 0){
	  			this.$router.push({path:'/'})
      }else if(e == 1){
        	this.$router.push({path:'/contant'})
      }else if(e == 2){
					this.$router.push({path:'/people'})
      }else if(e == 3){
					this.$router.push({path:'/myself'})
      } 
	  },
	  	goFuc(){
	  		if(this.$route.path=="/"){
          this.number=0;
      }else if(this.$route.path=="/contant"){
         	this.number=1;
      }else if(this.$route.path=="/people"){
         	this.number=2;
      }else if(this.$route.path=="/myself"){
         	this.number=3;
      }
	  	}
	  }
	}
</script>
<style scoped>
	.title{
        width: 100%;
		.title-main{	
			.title-content{
				width: 100%;
				.title-part{
					width: 25%;
					text-align: center;
					float: left;
					font-size: 0.305556rem;
					p{
						color: #a2a2a2;
						margin-bottom: 0.138889rem;
						margin-top: -0.2rem;
					}
					.active{
						color: #60c0ff;
					}
					
				}
			}
		}
	}
</style>