<template>
  <el-container class="myContainer">
    <el-header class="myHeader">
      <el-menu default-active="1" class="second-router" mode="horizontal" @open="handleOpen" @close="handleClose"
        background-color="transparent" text-color="#fff" @select="handleSelect">
        <template v-for="(item, index) in module">
          <el-menu-item :class="index == choice_status ? 'change-bg' : 'change-bg1'" :index="(index + 1).toString()"
            @click="href_choice(item, index)">
            <div>
              <i :class="item.icon"></i>
              <span v-text="item.name"></span>
            </div>
          </el-menu-item>
        </template>
      </el-menu>
    </el-header>
    <el-main class="myMain">
      <keep-alive>
        <router-view> </router-view>
      </keep-alive>
    </el-main>
  </el-container>
</template>

<style lang="scss">
.myContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;

  .myHeader {
    width: 100%;
    height: 40px !important;
    padding: 0px 60px;

    .el-menu.el-menu--horizontal {
      border: none;

      &>.el-menu-item {
        height: 40px;
        line-height: 40px;
        border-bottom: none !important;

        &:not(:first-child) {
          margin-left: 10px;
        }
      }
    }
  }

  .myMain {
    width: 100%;
    height: calc(100% - 40px);
    padding: 0px 20px !important;
    background-color: transparent;
  }
}
</style>

<script>
import li_hover from "../../assets/img/main/04.png";
import bottom from "../../assets/img/main/bottom.png";
export default {
  name: "xxxl",
  data() {
    return {
      li_hover: li_hover,
      bottom: bottom,
      module: [
        //   { icon: "el-icon-s-opportunity", text: "题库列表", href: "tklb" },
        //   { icon: "el-icon-s-opportunity", text: "题目列表", href: "tmlb" },
        //   { icon: "el-icon-s-opportunity", text: "考试中心", href: "kszx" }
      ],
      index: 0,
      choice_status: 0,
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    href_choice(item, index) {
      this.choice_status = index;
      this.$router.push(item.path);
    },
    handleSelect(key, keyPath) { },
  },
  mounted() {
    this.module = this.$store.state.navList[0].children.
      filter(e => e.meta && e.meta.code == this.$route.meta.parentCode)[0].children.
      filter(e => e.icon);
  },
  computed: {

  }
};
</script>