<template>
  <view class="tabbar">
      <view @click="tz"  data-tab="1">
          <img :src="imgurl[0]" alt="" class="logo">
          <view class="nav">首页</view>
      </view>
   <view @click="tz" data-tab="2">
          <img :src="imgurl[1]" alt="" class="logo">
          <view class="nav">保养</view>
      </view>
      <view @click="tz" data-tab="3">
          <img :src="imgurl[2]" alt="" class="logo">
          <view class="nav">分类</view>
      </view>
      <view @click="tz" data-tab="4">
          <img :src="imgurl[3]" alt="" class="logo">
          <view class="nav">我的</view>
      </view>

  </view>
</template>

<script>
export default {
    name:"tabbar",
    data(){
        return{
            imgurl:["../../static/img/homesel.png","../../static/img/baoyang.png","../../static/img/fenlei.png","../../static/img/wode.png"]
        }
    },
    props:{
        page:{
            type:Number
        }
    },
    mounted(){
          switch(this.page){
                case 1:
                    this.imgurl=["../../static/img/homesel.png","../../static/img/baoyang.png","../../static/img/fenlei.png","../../static/img/wode.png"]
                    break;
                case 2:
                    this.imgurl=["../../static/img/home.png","../../static/img/baoyangsel.png","../../static/img/fenlei.png","../../static/img/wode.png"]
                    break;
                case 3:
                    this.imgurl=["../../static/img/home.png","../../static/img/baoyang.png","../../static/img/fenleisel.png","../../static/img/wode.png"]; 
                    break;
                case 4:
                    this.imgurl=["../../static/img/home.png","../../static/img/baoyang.png","../../static/img/fenlei.png","../../static/img/wodesel.png"]; 
                    break;
            }
    },
    methods:{
        tz(e){
            this.imgurl=["../../static/img/home.png","../../static/img/baoyang.png","../../static/img/fenlei.png","../../static/img/wode.png"]
            console.log(e.currentTarget.dataset.tab)
            switch(e.currentTarget.dataset.tab){
                case "1":
                    this.imgurl[0]="../../static/img/homesel.png";
                   uni.reLaunch({
                        url:"/pages/index/index"
                   })
                    break;
                case "2":
                    this.imgurl[1]="../../static/img/baoyangsel.png"; 
                    uni.navigateTo({
                        url:"/pages/choosebaoyang/choosebaoyang"
                    })
                    break;
                case "3":
                    this.imgurl[2]="../../static/img/fenleisel.png"; 
                    uni.reLaunch({
                        url:"/pages/type/type"
                    })
                    break;
                case "4":
                    this.imgurl[3]="../../static/img/wodesel.png";
                    uni.reLaunch({
                        url:"/pages/mine/mine"
                    })
                    break;
            }
        }
    }
}
</script>

<style lang="scss">
.tabbar{
    display: flex;
    justify-content: space-around;
    .logo{
        width: 48upx;
        height:48upx;
    }
    .nav{
        color: #545454;
        font-size: 24upx;
    }
}
</style>