<template>
  <el-col :span="20" :offset="2">
    <div class="logo-header">
      <img class="logoImg" src="../assets/img/log.png" />
    </div>
    <!--v-show="roles.indexOf(item.id) >= 0"-->
    <el-col :offset="0" :span="18">
      <el-col
        :offset="0"
        :span="3"
        v-for="(item, index) of menuData"
        :key="item.id"
        @click.native="secondNavClick(item,index)"
        style="text-align: center"
      >
        <span
          class="lineStyle"
          :class="{superactive:index == checkindex,menu_item:true}"
        >{{item.name}}</span>
        <div class="box" v-if="index==1 && getRemindCount.auditCount >0">
          <!-- <span class="box-text">{{index==1? getRemindCount.auditCount+'项审核':getRemindCount.distributeCount+'份作业'}}</span> -->
          <span class="box-text">{{getRemindCount.auditCount+'项审核'}}</span>
          <!-- <span class="box-text">{{getRemindCount.distributeCount+'份作业'}}</span> -->
        </div>
        <div class="box-one" v-if="index==3 && getRemindCount.distributeCount >0">
          <span class="box-text">{{getRemindCount.distributeCount+'份作业'}}</span>
        </div>
      </el-col>
    </el-col>
      <!-- <div class="logoutBtn"> -->
          <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>
      <!-- </div> -->
    <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 {
      hiddenModel: false,
      accessToken: localStorage.getItem("accessToken"), //token
      BASE_URL: IMG_BASE_URL,
      menuData: [
          {
          id: "1",
          name: "质检作业",
          href: "GetCheckHomeWork"
        }
      ],
      checkindex: 0
    };
  },
  watch: {
    navsData(n) {
      this.navsData = n;
      this.initNav();
    }
  },
  computed: {
    ...mapGetters(["name", "avatar", "roles", "getRemindCount"])
  },
  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("/Qualityinspector/" + "GetCheckHomeWork");
      } 
    },
    //  账号管理、退出登录
    Loginout() {
      this.$confirm("您确定退出吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$store.dispatch("LogOut", {
            accessToken: this.accessToken
          });
        })
        .catch(() => {
          // console.log(err)
          this.$message("已取消操作!");
        });
    }
  },
  mounted() {
    this.checkindex = sessionStorage.getItem("tabIndex");
    // this.initNav();
  }
};
</script>
<style scoped>
/*.mainHeader{*/
/*height: 110px;*/
/*line-height:110px;*/
/*}*/
.main {
  background-color: #fff;
  margin: 16px;
  padding: 0 !important;
  min-height: 980px;
}
.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;
}
.superactive {
  color: #52cc60 !important;
  border-bottom: 2px solid #52cc60;
}
.menu_item + .menu_item {
  border-left: 1px solid #ffffff;
}
.logo-header {
  display: inline-block;
  float: left;
  /* margin-left: 6.5%; */
}
.logoImg {
  width: 136px;
  height: 52px;
}
.sishuLogo {
  margin-left: 125px;
}
.userstyle {
  width: 50px;
  height: 50px;
  border-radius: 25px;
}
.lineStyle {
  color: #999999;
  font-size: 18px;
  text-align: center;
}
.loginMock {
  color: #333333;
  font-size: 14px;
  display: inline-block;
}
.out {
  margin-left: 2%;
  font-size: 14px;
  color: #666666;
  display: inline-block;
  cursor: pointer;
}
.logoutBtn{
   display: inline-block;
  cursor: pointer;
  width: 400px;
}
.out-img {
  width: 16px;
  height: 18px;
}
.aside-right {
  position:relative;
  /* right:-32%;
  float: right;
  margin-right: 0%; */
}
.box-items {
  position: relative;
}
.box-text {
  color: #ffffff;
  font-size: 14px;
  position: absolute;
  top: -37px;
  left: 0;
  height: 34px;
  min-width: 75px;
  display: inline-block;
}
.box {
  position: relative;
  top: -130px;
  left: 100px;
  min-width: 75px;
  height: 34px;
  background: #ff6767;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 17px;
  display: inline-block;
}
.box-one {
  position: relative;
  top: -130px;
  left: 80px;
  min-width: 75px;
  height: 34px;
  background: #ff6767;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 17px;
  display: inline-block;
}
.box:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 100%;
  top: 25px;
  left: -5px;
  border-top: 5px solid transparent;
  border-right: 18px solid #ff6767;
  border-bottom: 5px solid transparent;
  transform: rotate(-45deg);
}
.box-one:before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  right: 100%;
  top: 25px;
  left: -5px;
  border-top: 5px solid transparent;
  border-right: 18px solid #ff6767;
  border-bottom: 5px solid transparent;
  transform: rotate(-45deg);
}
.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>
