<template>
  <div class="inner-container">
    <el-col :span="3"
      ><el-tabs
        tab-position="left"
        v-model="activeName"
        @tab-click="handleClick"
      >
        <el-tab-pane
          v-for="(item, index) in routerList"
          :key="index"
          :name="item.path"
          :label="item.label"
        ></el-tab-pane>
      </el-tabs>
    </el-col>
    <el-col :span="21" style="background: #f4f4f4;">
      <div style="height: 100%">
        <router-view />
      </div>
    </el-col>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: "",
      showList: [],
      routerList: [
        { label: "竞争对手信息管理", path: "/competitor", name: "competitor" },
        { label: "竞争对手信息审核", path: "/competExa", name: "competExa" },
        { label: "竞争对手信息统计", path: "/compete", name: "compete" },
        { label: "竞争对手信息收集", path: "/competeInfo", name: "competeInfo" },
      ],
    };
  },
  computed: {
    menuList: function () {
      let arr = [];
      this.routerList.map((item) => {
        this.showList.map((row) => {
          if (item.path == row) {
            arr.push(item);
          }
        });
      });
      return arr;
    },
  },
  methods: {
    handleClick(val) {
      if (this.$route.path != this.activeName) {
        this.$router.push(this.activeName);
      }
    },
  },
  mounted() {
    this.activeName = this.$route.path;
  },
  created() {
    JSON.parse(sessionStorage.childrenMenus).map((item) => {
      this.showList.push(item.jspUrl);
    });
  },
  watch: {
    $route(to, from) {
      this.activeName = this.$route.path;
    },
  },
};
</script>
<style>
.el-tabs__content {
  display: none;
}
</style>
