<template>
  <div class="nav">
    <div class="nav-list content flex">
      <div class="nav-sty" :to="item.to" tag="div" :class="index==nav?'active':''" v-for="(item,index) in linklist" :key="index"
        @click="change(index,item.to)">{{item.name}}</div>
    </div>
  </div>
</template>

<script>
import inDex from '@/pages/index.vue'
  export default {
    data() {
      return {
        ccc:'',
        nav:"0",
        linklist: [{
            to: "/",
            name: "首页"
          },
          {
            to: "/notice/inquiry",
            name: "询价公告"
          }, {
            to: "/notice/bid",
            name: "招标公告"
          }, {
            to: "/notice/biding",
            name: "中标公告"
          }, {
            to: "/notice/all",
            name: "招投标"
          }, {
            to: "/message/news",
            name: "信息公告"
          },
        ]
      }
    },
    created() {
      
    },
    watch: {
      $route() {
        this.getindex();
      }
    },
     mounted(){
      console.log("1")
      let path = this.$route.path;
         /* if(path=="/"){
            this.nav = "0";
         }else if(path.indexOf("/message")==0){
            this.nav = "5";
         }else if(path.indexOf("/notice")==0){
            this.nav = "4";
         } */
         switch (path) {
           case '/':
             this.nav = "0";
             break;
           case '/notice/inquiry':
             this.nav = "1";
             break;
           case "/notice/bid":
             this.nav = "2";
             break;
           case "/notice/biding":
             this.nav = "3";
             break;
           case "/notice/all":
             this.nav = "4";
             break;
           case "/message/news":
             this.nav = "5";
             break;
             case "/notice/cadidate":
             this.nav = "4";
             break;
             case "/notice/change":
             this.nav = "4";
             break;
             case "/notice/clarifies":
             this.nav = "4";
             break;
             case "/notice/abortive":
             this.nav = "4";
             break;
         }
    }, 
    methods: {
      change(index, path) {
        this.$router.push(path);
        this.nav=index;
      },

      getindex() {
         let path = this.$route.path;
         /* if(path=="/"){
            this.nav = "0";
         }else if(path.indexOf("/message")==0){
            this.nav = "5";
         }else if(path.indexOf("/notice")==0){
            this.nav = "4";
         } */
         switch (path) {
           case '/':
             this.nav = "0";
             break;
           case '/notice/inquiry':
             this.nav = "1";
             break;
           case "/notice/bid":
             this.nav = "2";
             break;
           case "/notice/biding":
             this.nav = "3";
             break;
           case "/notice/all":
             this.nav = "4";
             break;
           case "/message/news":
             this.nav = "5";
             break;
             case "/notice/cadidate":
             this.nav = "4";
             break;
             case "/notice/change":
             this.nav = "4";
             break;
             case "/notice/clarifies":
             this.nav = "4";
             break;
             case "/notice/abortive":
             this.nav = "4";
             break;
         }
      }

    },
  }
</script>

<style scoped>
.nav-sty:hover{
  cursor: pointer;
  color:#0486FE
}
  .nav {
    width: 100%;
    border-bottom: .05rem solid #D6D6D6;
  }

  .nav-list>div {
    font-size: .16rem;
    color: rgba(0, 0, 0, 1);
    padding: 0.2rem 0.5rem;
    margin-right: .2rem;
  }

  .nav-list>.active {
    color: rgba(255, 255, 255, 1);
    background: #0486FE;
  }
</style>
