<template>
  <el-col :span="24" class>
    <el-col :span="2" :offset="2">
      <img class="logoImg" src="../assets/img/log.png" />
    </el-col>

    <!-- v-show="roles.indexOf(item.id) >= 0" -->
    <el-col
      :span="2"
      v-for="(item, index) of menuData"
      :key="item.index"
      @click.native="secondNavClick(item,index)"
      style="text-align: center"
    >
      <span class="lineStyle" :class="{navactive:index == checkindex,menu_item:true}">{{item.name}}</span>
    </el-col>

    <el-col :span="4" :offset="10">
      <div class="loginMock">
        <img class="userstyle" :src="BASE_URL + avatar" alt />
        <!-- <img class="userstyle" src="../assets/img/user.jpg"> -->
        <span>{{name}}</span>
        <i class="el-icon-caret-bottom"></i>
      </div>
      <div class="out">
        <img src="../assets/img/out.png" alt class="out-img" />
        <span @click="LoginoutBtn">退出</span>
      </div>
    </el-col>
    <el-col :span="1"></el-col>
    <!--是否通过-->
    <div class="showModel" @click="allShowModel()" v-if="hiddenModel"></div>
    <div class="model" v-if="hiddenModel">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel()"
              class="model-text-items-close"
            />
          </div>
          <div>{{name}}老师您确定退出吗？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="ApplyOperate()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel()">否</div>
        </div>
      </div>
    </div>
  </el-col>
</template>

<script>
import { mapGetters } from "vuex";
import { IMG_BASE_URL } from "@/config";
export default {
  name: "navMenu",
  // props: {
  //   navsData: Array
  // },
  data() {
    return {
      accessToken: localStorage.getItem("accessToken"), //token
      BASE_URL: IMG_BASE_URL,
      hiddenModel: false,
      menuData: [
        {
          id: "1",
          name: "学习管理员",
          href: "SchoolManager"
        },
        {
          id: "2",
          name: " 在线批改老师",
          href: "TeacherApporval"
        },
        {
          id: "3",
          name: "报错警告",
          href: "TeacherPay"
        }
      ],
      checkindex: 0
    };
  },
  watch: {
    navsData(n) {
      this.navsData = n;
      this.initNav();
    }
  },
  methods: {
    // 初始化处理
    // initNav() {
    //   this.menuData = JSON.parse(JSON.stringify(this.navsData));
    // },
    LoginoutBtn() {
      this.hiddenModel = true;
    },
    allShowModel() {
      this.hiddenModel = false;
      this.$message("已取消操作!");
    },
    ApplyOperate() {
      this.$store.dispatch("LogOut", {
        accessToken: this.accessToken
      });
    },
    secondNavClick(val, index) {
      sessionStorage.setItem("tabIndex", index);
      this.checkindex = sessionStorage.getItem("tabIndex");
      console.log(sessionStorage.getItem("tabIndex"));
      if (sessionStorage.getItem("tabIndex") == 0) {
        this.$router.push("/home/" + "SchoolManager");
      } else if (sessionStorage.getItem("tabIndex") == 1) {
        this.$router.push("/home/" + "TeacherApporval");
      } else if (sessionStorage.getItem("tabIndex") == 2) {
        this.$router.push("/home/" + "TeacherPay");
      }
    }
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles"])
  },
  mounted() {
    this.checkindex = sessionStorage.getItem("tabIndex");
    // this.initNav();
  }
};
</script>
<style scoped>
/*.mainHeader{*/
/*height: 110px;*/
/*line-height:110px;*/
/*}*/
.menu_item {
  cursor: pointer;
  color: #999999;
  font-size: 9px;
  font-family: serif;
  box-sizing: border-box;
  height: 80%;
  text-align: center;
  padding-bottom: 19px;
  /*display: inline-block;*/
}
.menu_item:hover {
  color: #52cc60;
  border-bottom: 2px solid #52cc60;
}
.el-input__inner,
.el-checkbox__inner,
.el-textarea__inner,
.el-button {
  font-size: 0.3125rem;
  text-align: center;
  line-height: 0 !important;
  padding: 12px 20px !important;
}
.navactive {
  color: #52cc60 !important;
  border-bottom: 2px solid #52cc60;
}
.menu_item + .menu_item {
  border-left: 1px solid #ffffff;
}
.logoImg {
  width: 136px;
  height: 52px;
}
.sishuLogo {
  margin-left: 125px;
}
.userstyle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.lineStyle {
  color: #999999;
  font-size: 18px;
}
.loginMock {
  color: #333333;
  font-size: 14px;
  display: inline-block;
}
.out {
  margin-left: 40px;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.out-img {
  width: 16px;
  height: 18px;
  display: inline-block;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.model {
  z-index: 1001;
  width: 40%;
  height: auto;
  position: fixed;
  top: 30%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}

.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}

.model-btn {
  display: flex;
  justify-content: space-around;
  margin-bottom: 44px;
  cursor: pointer;
}
.model-btn-items {
  width: 154px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 18px;
  border-radius: 4px;
}
.main-gay {
  background: rgba(246, 247, 251, 1);
  color: #7e7e7e;
}
.model-grdeen {
  background-color: #52cc60;
  color: #fff;
}
.model-text-items-close {
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: -5px;
}
.model-text-items {
  position: relative;
  color: #000000;
  font-size: 24px;
  text-align: center;
  padding: 40px 0 50px 0;
  margin: 0 33px;
}
</style>
