<style lang="scss">
@import "./main.scss";
</style>
<template>
  <div class="main">
    <!-- 顶部标题栏主体 -->
    <div class="main-header-con">
      <div class="logo-con flex_center">
        <img
          src="https://yun.tuisnake.com/shopmanager/161b5462-7aea-4cb3-970b-769ba0699472.png"
          key="max-logo"
        />
      </div>
      <div class="flex-between main-header">
        <div class="nav-list pointer">
          <div
            @mouseover="handleMoveOn"
            @mouseleave="handleMoveOut"
            :id="item.id"
            v-for="item in navList"
            class="nav-item"
            :class="curModel == item.id ? 'nav-item-active' : ''"
            @click="handleChangeModel(item)"
          >
            {{ item.title }}
            <div
              v-if="hover == item.id && curMenu && curMenu.length > 0"
              class="nav-item-modal"
            >
              <div v-for="curMenuItem in curMenu">
                <div class="nav-title">{{ curMenuItem.title }}</div>
                <div>
                  <div
                    class="mt_12"
                    v-for="childMenuItem in curMenuItem.children"
                  >
                    {{ childMenuItem.title }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="header-avator-con">
          <!-- 用户头像 -->
          <div class="user-dropdown-menu-con">
            <Row
              type="flex"
              justify="end"
              align="middle"
              class="user-dropdown-innercon"
            >
              <Dropdown
                transfer
                trigger="hover"
                @on-click="handleClickUserDropdown"
              >
                <div class="dropList">
                  <span class="main-user-name">{{ userInfo.nickName }}</span>
                  <Icon type="md-arrow-dropdown" />
                  <Avatar
                    :src="avatarPath"
                    style="background: #fff; margin-left: 10px"
                  ></Avatar>
                </div>
                <DropdownMenu slot="list">
                  <DropdownItem name="personalCenter">{{
                    $t("userCenter")
                  }}</DropdownItem>
                  <DropdownItem name="changePass">{{
                    $t("changePass")
                  }}</DropdownItem>
                  <DropdownItem name="loginOut" divided>{{
                    $t("logout")
                  }}</DropdownItem>
                </DropdownMenu>
              </Dropdown>
            </Row>
          </div>
        </div>
      </div>
    </div>
    <!-- 左侧菜单 -->
    <div class="sidebar-menu-con menu-bar">
      <shrinkable-menu></shrinkable-menu>
    </div>
    <div class="single-page-con">
      <div class="single-page">
        <router-view></router-view>
      </div>
    </div>
    <!-- 全局加载动画 -->
    <circleLoading class="loading-position" v-show="loading" />
  </div>
</template>

<script>
import shrinkableMenu from "./main-parts/shrinkable-menu/shrinkable-menu-new.vue";
import circleLoading from "@/components/lili/circle-loading.vue";
import Cookies from "js-cookie";
import util from "@/libs/util.js";
import { logout } from "@/api/index";
export default {
  components: {
    shrinkableMenu,
    circleLoading,
  },
  data() {
    return {
      sliceNum: 5, // 展示nav数量
      userInfo: "", // 用户信息
      tipsMessage: "", // 通知消息
      domainLogo: "",
      hover: "",
      curMenu: [],
    };
  },
  computed: {
    loading() {
      return this.$store.state.app.loading;
    },
    avatarPath() {
      return localStorage.avatorImgPath;
    },
    navList() {
      return this.$store.state.app.navList;
    },
    curModel() {
      return this.$store.state.app.curModel;
    },
  },
  methods: {
    handleMoveOn(e) {
      this.hover = e.target.id;
      let curMenu = this.$store.state.app.menuList.filter(
        (item) => item.id == this.hover
      );
      this.curMenu = curMenu;
      console.log(this.curMenu);
    },
    handleMoveOut(e) {
      this.hover = "";
    },
    init() {
      // 菜单初始化
      let userInfo = JSON.parse(Cookies.get("userInfoManager"));

      this.userInfo = userInfo;
      let currWidth = document.body.clientWidth;
      if (currWidth <= 1200) {
        this.sliceNum = 2;
      }
      window.document.title = "机械手 - 管理后台";
    },
    handleChangeModel(type) {
      this.$store.commit("setCurModel", type.id);
      this.$store.commit("setCurrNav", [type.name]);
      window.localStorage.setItem("curModel", type.id);
      window.localStorage.setItem("currNav", JSON.stringify([type.name]));
    },
    //用户头像下方抽屉点击
    handleClickUserDropdown(name) {
      //个人中心
      if (name === "personalCenter") {
        util.openNewPage(this, "personal-center");
        this.$router.push({
          name: "personal-center",
        });
      }
      //修改密码
      else if (name === "changePass") {
        util.openNewPage(this, "change-password");
        this.$router.push({
          name: "change_password",
        });
      }
      // 退出登录
      else if (name === "loginOut") {
        logout().then((res) => {
          this.$store.commit("logout", this);
          this.$store.commit("setAdded", false);
          this.setStore("accessToken", "");
          this.setStore("refreshToken", "");
          this.$router.push({ path: "/login" });
        });
      }
    },
    //宽度动态计算
    resize() {
      let currWidth = document.body.clientWidth;
      let count = currWidth / 300;
      if (count > 6) {
        this.sliceNum = 6;
      } else {
        this.sliceNum = count;
      }
    },
  },
  watch: {
    $route(to, from) {
      localStorage.currentPageName = to.name;
    },
  },
  mounted() {
    this.init();
    let that = this;
    this.resize();
    window.addEventListener("resize", function () {
      that.resize();
    });
  },
  created() {},
};
</script>
