<template>
  <!-- nav--导航 -->
  <div class="navPage">
    <p :class="activeClass == index ? 'active':''" v-for="(itme,key,index) in itmeList" :key="index"
       @click="getItme(itme.path, index)">
      {{itme.title}}
    </p>
  </div>
</template>
<script>

  import {setTimeout} from 'timers';

  export default {
    name: "navPage",
    data() {
      return {
        activeClass: 0,
        // itmeList:[
        //     {text:'首页'},
        //     {text:'规章制度'},
        //     {text:'责任分工'},
        //     {text:'风险点'},
        //     {text:'隐患'},
        //     {text:'文件'},
        // ]
        itmeList: null,
        port: {}
      }
    },
    created: function () {

    },
    computed: {
      currentIndex() {
        if (sessionStorage.getItem('activeIndex')) {
          this.$store.commit('changeIndex', sessionStorage.getItem('activeIndex'))
        }

        return this.$store.state.currentIndex
      }
    },
    watch: {
      currentIndex(val) {
        this.activeClass = val;
        console.log(this.activeClass)
      }
    },
    mounted() {
      let that = this;
      // console.log(that.$page)
      setTimeout(() => {
        that.itmeList = that.deepCopy(that.$page);
        delete that.itmeList.divisionDetail; //删除对象中的divisionDetail
        // console.log(that.itmeList)
        if (that.$route.query.page) {
          that.activeClass = that.$route.query.page;
        } else {
          that.activeClass = that.currentIndex;
        }

        // console.log(that.activeClass, that.currentIndex)
        // this.$store.commit('changeIndex', that.currentIndex)
      }, 500);
    },
    methods: {
      deepCopy(obj) {
        var result = Array.isArray(obj) ? [] : {};
        for (var key in obj) {
          if (obj.hasOwnProperty(key)) {
            if (typeof obj[key] === 'object' && obj[key] !== null) {
              result[key] = this.deepCopy(obj[key]);   //递归复制
            } else {
              result[key] = obj[key];
            }
          }
        }
        return result;
      },
      // 路由导航跳转
      getItme(path, index) {
        this.port = JSON.parse(localStorage.getItem('portData'))
        // this.port = this.$store.state.portUrl

        let that = this;
        console.log('/' + path);
        this.$router.push({
          path: "/" + path,
          query: {
            ...this.port,
            page: index
          }
        })

        setTimeout(() => {
          // console.log('this.$22222222',this.$route.query.page)
          // that.activeClass = that.$route.query.page;

          that.$store.commit('changeIndex', index)
        }, 50);
      }
    }
  }
</script>
<style lang="less" scoped>
  .navPage {
    font-size: 0.1rem;
    height: 0.42rem;
    line-height: 0.42rem;
    background-color: #042B5A;
    p {
      width: 2rem;
      height: 0.42rem;
      font-size: 0.15rem;
      cursor: pointer;
      text-align: center;
      color: #fff;
      display: inline-block;
      background-color: #042B5A;
    }
    p:hover {
      background-color: #127CFF;
      font-weight: bold;
    }
    .active {
      background-color: #127CFF;
      font-weight: bold;
    }
  }
</style>

