<template>
  <div class="MenuContainer">
    <!-- Logo 和 公司 -->
    <div class="logoBox">
      <img v-if="logo" :src="logo" class="sidebar-logo" />
    </div>
    <!-- 菜单 -->
    <div class="menuBox">
      <div
        v-for="(item, index) in menuData"
        :key="index"
        class="newsSider"
        :class="{ active: activeType(item.path) }"
        v-if="item.show"
        @click="jumpRoute(item)"
      >
        <div
          class="badge"
          v-if="
            item.icon == 'icon-xiaoxi' &&
            !isNaN(messageCount) &&
            messageCount > 0
          "
        >
          {{ messageCount > 100 ? "99+" : messageCount }}
        </div>
        <i class="newsSider-icon iconfont" :class="item.icon"> </i>
        <p class="newsSider-title">
          {{ item.title }}
        </p>
      </div>
    </div>
    <!-- 头像 -->
    <div class="avatar-container">
      <div class="searchBox">
        <i class="el-icon-search"></i>
      </div>
      <el-dropdown placement="right-start" style="width: 100%">
        <div class="avatar-wrapper">
          <img :src="avatar" class="user-avatar" v-if="avatar" />
          <div class="text" v-else>{{ PersonName.slice(-2) }}</div>
          <p class="personName">{{ PersonName }}</p>
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/user/profile">
            <el-dropdown-item>个人中心</el-dropdown-item>
          </router-link>
          <el-dropdown-item divided @click.native="logout">
            <span>退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Cookies from "js-cookie";
import { getInfo, setInfo, getCompanyId, setCompanyId } from "@/utils/auth";
import { PersonDetail } from "@/api/apis/personnelSettings";
import logoImg from "@/assets/logo/tranLogo.png";
import personImg from "@/assets/images/person.png";
import { OrganGetUserCompany } from "@/api/apis/organization.js";
import { GetMessageCount } from "@/api/apis/messageManagement.js";
export default {
  computed: {
    ...mapGetters(["avatar"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    messageCount() {
      let count = this.$store.getters.messageCount;
      return count * 1;
    },
  },
  watch: {
    // 确保路由跳转完以后再赋值
    $route(to, form) {
      let route = { ...to };
      if (this.currentPath == to.path) {
        route.meta.affix = true;
        this.$store.dispatch("tagsView/updateVisitedView", route);
      }
    },
  },
  data() {
    return {
      logo: logoImg,
      PersonName: "",
      companyName: "用安数智中台",
      menuData: [],
      // companyList: [], //公司
      personInfo: {},
      currentPath: "",
      fixedMenu: [
        {
          title: "首页",
          path: "/index",
          icon: "icon-shouye",
          show: true,
        },
        {
          title: "工作台",
          path: "/Workbench",
          icon: "icon-gongzuotai",
          show: true,
        },
      ],
      permissionsMenu: [
        {
          title: "主数据中心",
          path: "/MasterDataCenter",
          icon: "el-icon-coin",
          show: false,
        },
        {
          title: "应用管理",
          path: "/ApplicationCenter",
          icon: "el-icon-menu",
          show: false,
        },
        {
          title: "集成任务",
          path: "/IntegrationTaskCenter",
          icon: "el-icon-data-line",
          show: false,
        },
        {
          title: "业务中心",
          path: "/businessCenter",
          icon: "el-icon-postcard",
          show: false,
        },
      ],
    };
  },
  created() {
    this.$router
      .push({
        path: "/index",
      })
      .then(() => {
        this.currentPath = this.$route.path;
        this.$store.dispatch("settings/changeSetting", {
          key: "showTagsView",
          value: false,
        });
      });
  },
  mounted() {
    // this.GetMessageCount();
    this.DetermineMenuPermission();
    this.personInfo = JSON.parse(getInfo());
    this.PersonName = JSON.parse(getInfo()).personName;
    // this.getInfoDetail(JSON.parse(getInfo()).personID);
  },
  methods: {
    async GetMessageCount() {
      let res = await GetMessageCount({});
      if (res.code == 1) {
        let count = 0;
        res.data[0].forEach((item) => {
          count += item.count * 1;
        });
        this.$store.commit("SET_MESSAGE_COUNT", count);
      }
    },
    activeType(path) {
      let type = false;
      if (path === this.currentPath) {
        type = true;
      } else {
        type = false;
      }
      return type;
    },
    // 判断当前有没有菜单权限 主数据中心 应用管理
    DetermineMenuPermission() {
      this.menuData = [];
      let routeList = localStorage.getItem("routeList")
        ? localStorage.getItem("routeList")
        : null;
      this.permissionsMenu.forEach((aItem) => {
        if (routeList != null && routeList.includes(aItem.title)) {
          aItem.show = true;
        }
      });
      this.menuData = [...this.fixedMenu, ...this.permissionsMenu];
    },
    // 路由跳转
    jumpRoute(item) {
      if (item.path == this.currentPath) {
        return;
      }
      this.currentPath = item.path;
      this.$tab.closeAllPage();
      this.$store.dispatch("tagsView/clearVisted");
      this.$router
        .push({
          path: item.path,
        })
        .then(() => {
          // 隐藏标签栏
          this.$store.dispatch("settings/changeSetting", {
            key: "showTagsView",
            value: false,
          });
        });
    },
    // 获得详情
    async getInfoDetail(id) {
      let params = {
        id: id,
      };
      let res = await PersonDetail(params);
      if (res.success == "true") {
        let qrUrl =
          res.data[0].headImageUrl == null
            ? ""
            : res.data[0].headImageUrl.split("/wwwroot")[1];
        this.$store.commit("SET_AVATAR", qrUrl);
      }
    },
    async logout() {
      this.$confirm("确定要退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.commit("REMOVE_ROUTER");
          this.$store.dispatch("tagsView/delAllViews");
          this.$store.dispatch("LogOut").then(() => {
            Cookies.remove("automaticLogin");

            this.$router.replace({ path: "/login" });
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.searchBox {
  text-align: center;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  background: #e7e7e7;
  border-radius: 50%;
  margin: 0 auto 10px;
}
.MenuContainer {
  width: 100px;
  height: 100%;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1999;
  padding-top: 8px;
}
// ----------logo
.logoBox {
  width: 90%;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-bottom: 1px solid #eaeaea;
  background: #c73b26;
  border-radius: 10px;
}
.sidebar-logo {
  margin: 10px 0;
  width: 70px;
  height: 50px;
  vertical-align: middle;
}
// ------------公司
.companyTitle {
  font-weight: bold;
  color: #000;
  margin: 10px 0 15px 0;
}
.companyBox {
  margin: 8px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: 12px;
  div {
    width: 75px;
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 显示省略号 */
  }
  i {
    transform: rotate(90deg); /* 将文字旋转90度 */
  }
}
.companyItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 10px;
  margin: 5px 0;
  border-radius: 8px;
}
.checkBox {
  color: transparent;
  font-size: 18px;
  font-weight: bold;
}
.companyItem:hover {
  background: #f6f6f6;
}
.selectedCompany {
  background: #f6f6f6;
  .checkBox {
    color: #1478f6;
  }
}
// ---------------菜单
.menuBox {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 5px 15px 10px;
  width: 100%;
  height: calc(100% - 180px);
  overflow-y: auto;
}
/* 定制滚动条样式 */
.menuBox::-webkit-scrollbar {
  background-color: transparent; /* 背景色为透明色 */
  box-shadow: 0px 1px 3px transparent inset;
}

/* 定制滚动条轨道样式 */
.menuBox::-webkit-scrollbar-track {
  background-color: transparent; /* 轨道背景色为透明色 */
  box-shadow: 0px 1px 3px transparent inset;
}

/* 定制滚动条滑块样式 */
.menuBox::-webkit-scrollbar-thumb {
  background-color: transparent; /* 滑块颜色为透明色 */
  box-shadow: 0px 1px 3px transparent inset;
}
.newsSider {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 0;
  cursor: pointer;
  position: relative;
  .badge {
    position: absolute;
    width: 38px;
    height: 18px;
    background: #ff3b30;
    border-radius: 40px;
    font-size: 12px;
    line-height: 16px;
    color: #ffffff;
    text-align: center;
    left: 28px;
    top: -8px;
    border: 1px solid #ffffff;
  }
  &-icon {
    width: 44px;
    height: 44px;
    line-height: 44px;
    font-size: 20px;
    margin-bottom: 7px;
    text-align: center;
    background: #fff;
    border-radius: 12px;
    color: #000;
  }
  &-title {
    font-size: 12px;
    padding-bottom: 5px;
  }
}
::v-deep .newsSider.active .newsSider-icon {
  background: #1478f6;
  color: #fff;
}

::v-deep .newsSider.active .newsSider-title {
  // color: #000;
}
// -----------头像
.avatar-container {
  position: absolute;
  bottom: 20px;
  width: 90%;
  padding-top: 10px;
  border-top: 1px solid #eaeaea;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  .avatar-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    font-size: 12px;

    .user-avatar {
      cursor: pointer;
      width: 28px;
      height: 28px;
      border-radius: 4px;
      margin-bottom: 8px;
    }
    .text {
      cursor: pointer;
      width: 28px;
      height: 28px;
      line-height: 24px;
      border-radius: 4px;
      margin-bottom: 8px;
      background: #1478f6;
      color: #ffffff;
      text-align: center;
    }
  }
}
</style>
