<template>
  <div class="nav">
    <div class="nav-list content flex-between">
      <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(){
         /* if(window.location.href="") */
      let href = window.location.href.split("?id=")[1]
      if(href=="127"){
          this.nav = 5
      }
      if(href=="126"){
          this.nav = 5
      }

      let path = this.$route.path;
      /*  */
      console.log("path======",path)
      console.log(path!="/")
      if(path!="/"){
          if(path.startsWith("/message/news")){
              this.$router.push("/message/news?id=127")
              this.$router.push("/message/news")
          }else{
              path="/";
              this.$router.push(path);
          }

          /* path="/" */
          /* this.$router.push(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;
             case "/notice/abortive/":
             this.nav = "4";
             break;
             case "/message/news?id=126":
             this.nav = "5";
             break;
             case "/message/news?id=127":
             this.nav = "5";
             break;
         }
    }, 
    methods: {
      change(index, path) {
        this.$router.push(path);
        this.nav=index;
      },

      getindex() {
         let path = this.$route.path;
         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;
             case "/message/news?id=126":
             this.nav = "5";
             break;
             case "/message/news?id=127":
             this.nav = "5";
             break;
         }
      }

    },
  }
</script>

<style scoped>
.nav-sty:hover{
  cursor: pointer;
  color:#FF5203
}
  .nav {
    width: 100%;
    border-bottom: .01rem solid #E3E3E6
  }

  .nav-list>div {
    font-size: .16rem;
    color: rgba(0, 0, 0, 1);
    width: 1.14rem;
    padding: 0.12rem 0rem;
    text-align: center;
    font-weight: bold;
  }

  .nav-list>.active {
    color: #FB5133;
    border-bottom:.03rem  solid  #FB5133
  }
</style>
