<template>
  <div class="containerLayOut">
    <div class="siderBox">
      <div class="logo">
        <img src="../../static/images/logo.png" alt="" />
      </div>
      <el-aside class="elaside" width="220px">
        <el-menu router>
          <el-submenu v-show="divFlag" index="1">
            <template slot="title">
              <span >门店档案信息</span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-show="menuFlag1" index="/admin/shopDataGraph">  数据总览</el-menu-item>
              <el-menu-item v-show="menuFlag2" index="/admin/shopFileManagement"
                > 证件管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-submenu v-show="divFlag2" index="2">
            <template slot="title">
              <span>商品档案信息 </span>
            </template>
            <el-menu-item-group>
              <el-menu-item v-show="menuFlag3"  index="/admin/goodDataGraph">数据总览</el-menu-item>
              <!-- <el-menu-item    index="/admin/goodFileManagement"
                >证件管理</el-menu-item
              > -->
               <el-menu-item v-show="menuFlag4"    @click="jumpTo('/admin/goodFileManagement')" 
                > 证件管理</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item v-show="menuFlag5" index="/admin/configManage">
            <span slot="title">配置管理</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
    </div>
    <div class="mainBox">
      <div class="nav">
        <div class="loginContainer">
          <div>
            <img v-if="avatar" :src="avatar" alt="" />
            <div v-else class="logo"></div>
          </div>
          <span> 嗨 {{ userName }} </span>
          <span class="loginOut" @click="loginOutHandle">退出</span>
        </div>
      </div>

      <div class="mainContainer">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import Const from "@/api/Const.js";
export default {
  name: "AdminIndex",
  data() {
    return {
      divFlag: true,
      divFlag2: true,
      menuFlag1: false,
      menuFlag2: false,
      menuFlag3: false,
      menuFlag4: false,
      menuFlag5: false,
      menuPath: [
        {
          index: 1,
          name: "数据总览",
          path: "/admin/shopDataGraph",
        },
        {
          index: 2,
          name: "证件管理",
          path: "/admin/shopFileManagement",
        },
        {
          index: 3,
          name: "数据总览",
          path: "/admin/goodDataGraph",
        },
        {
          index: 4,
          name: "证件管理",
          path: "/admin/goodFileManagement",
        },
        {
          index: 5,
          name: "配置管理",
          path: "/admin/configManage",
        }
      ],
      userName: "",
      menusList: [],
      avatar: ""
    };
  },
  created() {
    let img = localStorage.getItem("img");
    let name = localStorage.getItem("userName");
    if (img) {
      this.avatar = img;
    }
    if (name) {
      this.userName = name;
    }
    this.initData();
  },
  mounted() { },
  methods: {
    initData(){
      var that = this
      var menus = localStorage.getItem("userMenus")
      this.menusList = JSON.parse(menus);
      this.menusList.forEach((item, index) => {
        that.menuPath.forEach((item2, index2) => {
          if(item.path==item2.path){
            switch(item2.index){
              case 1:
                that.menuFlag1 = true
                break;
              case 2:
                that.menuFlag2 = true
                break;
              case 3:
                that.menuFlag3 = true
                break;
              case 4:
                that.menuFlag4 = true
                break;
              case 5:
                that.menuFlag5 = true
                break;
            }
          }
        });
      });
      if(this.menuFlag1!=true && this.menuFlag2 !=true){
        this.divFlag = false;
      }
      if(this.menuFlag3!=true && this.menuFlag4 !=true){
        this.divFlag2 = false;
      }
         
    },

    loginOutHandle() {
      localStorage.clear();
      this.$router.push("/");
    },
    jumpTo(path){

      
      this.$router.push(path);

    }
  }
};
</script>

<style lang="scss" scoped>
.containerLayOut {
  display: flex;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  .siderBox {
    position: fixed;
    top: 0;
    left: 0;
    width: 220px;
    height: 100vh;
    background-color: #fff;
    .logo {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 220px;
      height: 90px;
      img {
        width: 180px;
        height: 45px;
      }
    }
    .elaside {
      width: 220px;
    }
  }
  .mainBox {
    flex: 1;
    .nav {
      position: fixed;
      left: 220px;
      right: 0;
      z-index: 99;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding-right: 40px;
      display: flex;
      height: 90px;
      background-color: #fff;
      .loginContainer {
        display: flex;
        align-items: center;
        .el-icon-s-custom {
          font-size: 25px;
          color: #edad19;
        }
        > div {
          img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
          }
          .logo {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eee;
          }
        }
        span {
          margin-left: 10px;
          font-size: 22px;
          &.loginOut {
            cursor: pointer;
          }
        }
      }
    }
    .mainContainer {
      padding: 110px 20px 20px 240px;
      width: 100%;
      min-height: 100%;
      background-color: #f9f9f9;
    }
  }
}
</style>