<template >
  <div class="sigernav">
    <!-- <div class="nav-body">
      <div class="blockall">
        <div v-for="(i, ele) in blocklist" :key="ele" class="block">
          <router-link to="/home">
            <img :src="i.url" alt="" />
            <div>{{ i.name }}</div>
          </router-link>
        </div>
      </div>
      <div class="userinfo">
        <div class="photodiv">
          <img :src="userAvatar" alt="" />
        </div>
        <div class="infotitle">个人信息：</div>
        <div class="infomation">
          <div>姓名：<span>小白</span></div>
          <div>工号：<span>0000001</span></div>
          <div>部门：<span>前端组</span></div>
          <div>岗位：<span>前端工程师</span></div>
        </div>
      </div>
    </div> -->
  </div>
</template>
<script>
import User from "../../../components/main/components/user";
import Fullscreen from "../../../components/main/components/fullscreen";
import Language from "../../../components/main/components/language";
import ErrorStore from "../../../components/main/components/error-store";
import { mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: "sigernav",
  data() {
    return {
      isFullscreen: false,
      blocklist: [
        {
          url: require("../../../assets/images/Foundationsetup1.png"),
          name: "基础配置",
        },
        {
          url: require("../../../assets/images/DigitalFactory.png"),
          name: "数字化工厂",
        },
        { url: require("../../../assets/images/DNC1.png"), name: "DNC" },
        {
          url: require("../../../assets/images/tool1.png"),
          name: "刀具智能管理",
        },
        {
          url: require("../../../assets/images/equipment1.png"),
          name: "设备智能管理",
        },
        {
          url: require("../../../assets/images/Retrospectivemanagement.png"),
          name: "追溯管理",
        },
        {
          url: require("../../../assets/images/Warehouseintelligence.png"),
          name: "仓库智能管理",
        },
        {
          url: require("../../../assets/images/toollifecycle.png"),
          name: "刀具流转管理",
        },
        {
          url: require("../../../assets/images/Qualityintelligence.png"),
          name: "质量智能管理",
        },
        {
          url: require("../../../assets/images/Dashboard.png"),
          name: "Dashboard",
        },
        { url: require("../../../assets/images/Esop.png"), name: "Esop" },
        { url: require("../../../assets/images/pms.png"), name: "生产管理" },
      ],
    };
  },
  components: {
    Language,
    Fullscreen,
    ErrorStore,
    User,
  },
  computed: {
    ...mapGetters(["errorCount"]),
    tagNavList() {
      return this.$store.state.app.tagNavList;
    },
    tagRouter() {
      return this.$store.state.app.tagRouter;
    },
    userAvatar() {
      return this.$store.state.user.avatarImgPath;
    },
    cacheList() {
      const list = [
        "ParentView",
        ...(this.tagNavList.length
          ? this.tagNavList
              .filter((item) => !(item.meta && item.meta.notCache))
              .map((item) => item.name)
          : []),
      ];
      return list;
    },
    menuList() {
      return this.$store.getters.menuList;
    },
    local() {
      return this.$store.state.app.local;
    },
    hasReadErrorPage() {
      return this.$store.state.app.hasReadErrorPage;
    },
    unreadCount() {
      return this.$store.state.user.unreadCount;
    },
  },
  methods: {
    ...mapMutations([
      "setBreadCrumb",
      "setTagNavList",
      "addTag",
      "setLocal",
      "setHomeRoute",
      "closeTag",
    ]),
    ...mapActions(["handleLogin"]),
    turnToPage(route) {
      let { name, params, query } = {};
      if (typeof route === "string") name = route;
      else {
        name = route.name;
        params = route.params;
        query = route.query;
      }
      if (name.indexOf("isTurnByHref_") > -1) {
        window.open(name.split("_")[1]);
        return;
      }
      this.$router.push({
        name,
        params,
        query,
      });
    },
    handleCollapsedChange(state) {
      this.collapsed = state;
    },
    handleCloseTag(res, type, route) {
      if (type !== "others") {
        if (type === "all") {
          this.turnToPage(this.$config.homeName);
        } else {
          if (routeEqual(this.$route, route)) {
            this.closeTag(route);
          }
        }
      }
      this.setTagNavList(res);
    },
    handleClick(item) {
      this.turnToPage(item);
    },
  },
};
</script>
<style lang="less" scoped>
.sigernav {
  font-size: 12px;
  width: 100%;
  height: 100%;
}
.nav-header {
  width: 100%;
  height: 80px;
  position: relative;
  box-shadow: 0 0 5px #347ab8;
  &-left {
    width: 200px;
    height: 100%;
    float: left;
    .text1 {
      .sigernav;
      .text2 {
        margin-top: 10px;
        height: 40px;
        font-size: 280%;
        text-align: right;
        color: #347ab8;
        padding-right: 20px;
        font-weight: 600;
      }
      .text3 {
        height: 20px;
        font-size: 140%;
        text-align: right;
        color: #347ab8;
        font-weight: 600;
      }
    }
  }
  &-center {
    // width: 20%;
    height: 100%;
    float: left;
    line-height: 80px;
    padding-left: 20px;
    font-size: 1.8rem;
    font-weight: 600;
    color: #347ab8;
  }
  &-right {
    position: absolute;
    right: 30px;
    div {
      // margin-top: 8px;
      width: 200px;
      div {
        display: inline-block;
      }
    }
  }
}
.nav-body {
  width: 100%;
  height: calc(~"100% - 80px");
  .blockall {
    width: 70%;
    height: 100%;
    float: left;
    padding-top: 2%;
    .block {
      width: 20%;
      height: 30%;
      // background-color: #347ab8;
      display: inline-block;
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        // padding: 0 15%;
        img {
          display: inline-block;
          width: 100px;
          height: 100px;
          margin-left: 15%;
        }
        div {
          text-align: center;
          font-size: 1.3rem;
          font-weight: 500;
        }
      }
    }
  }
  .userinfo {
    width: 30%;
    height: 100%;
    float: left;
    border-left: 1px solid #eee;
    .photodiv {
      margin-left: 25%;
      width: 50%;
      height: 35%;

      img {
        width: 100%;
        height: 100%;
      }
    }
    .infotitle {
      height: 5%;
      width: 100%;
      font-size: 1.2rem;
      background-color: #ccc;
      font-weight: 400;
      padding-top: 0.4rem;
    }
    .infomation {
      width: 100%;
      height: 60%;
      padding-left: 30%;
      div {
        font-size: 1.5rem;
      }
    }
  }
}
.login-header {
  height: 100%;
}
.blall {
  margin-top: 8px;
}
.bl {
  display: inline-block !important;
  width: 50px !important;
}
</style>
