<template>
  <div class="navbar">
    <div class="logoBox">
      <router-link key="expand" class="sidebar-logo-link" to="/">
        <div><img v-if="logo" :src="logo" class="sidebar-logo" /></div>
        <h1 class="sidebar-title">用安数智中台</h1>
      </router-link>
    </div>
    <div class="navright">
		<TagsView></TagsView>
	</div>
  </div>
</template>

<script>
import TagsView from "./TagsView"
import { mapGetters } from "vuex";
import Cookies from "js-cookie";
import Breadcrumb from "@/components/Breadcrumb";
import TopNav from "@/components/TopNav";
import Hamburger from "@/components/Hamburger";
import Screenfull from "@/components/Screenfull";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import RuoYiGit from "@/components/RuoYi/Git";
import RuoYiDoc from "@/components/RuoYi/Doc";
import logoImg from "@/assets/logo/daishu.png";
import { OrganGetUserCompany } from "@/api/apis/organization.js";
import { GetMessageData, ReadMessage } from "@/api/apis/messageManagement.js";
import { getInfo, setInfo, getCompanyId, setCompanyId } from "@/utils/auth";
import { downloadFromMinio } from "@/api/apis/auth";
import { PersonDetail } from "@/api/apis/personnelSettings";
export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
	TagsView,
    RuoYiDoc,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.$store.state.settings.topNav;
      },
    },
    total() {
      return (
        this.personalMessage.length +
        this.auditMessage.length +
        this.systemMessage.length
      );
    },
  },
  watch: {},
  filters: {
    timeDate(row) {
      if (!row) {
        return;
      }
      return row.replace("T", " ");
    },
  },
  data() {
    return {
      activeName: "second",
      PersonName: "",
      companyList: [],
      logo: logoImg,
      personalMessage: [], //个人消息
      auditMessage: [], //审核消息
      systemMessage: [], //
      openHoverType: false,
      selectHoverType: false,
      personInfo: {},
    };
  },
  mounted() {
    this.personInfo = JSON.parse(getInfo());
    this.PersonName = JSON.parse(getInfo()).personName;
    // this.getCompanyList();
    // this.getMessageData();
    // this.getInfoDetail(JSON.parse(getInfo()).personID)
  },
  methods: {
    changeCompany(name, id) {
      this.$store.commit("SET_COMPANYID", id);
      this.personInfo.departmentName = name;
      setInfo(JSON.stringify(this.personInfo));
    },
    // 获得详情
    async getInfoDetail(id) {
      let params = {
        id: id,
      };
      let res = await PersonDetail(params);
      if (res.success == "true") {
        this.getFile(res.data[0].headImageID);
      }
    },
    async getFile(id) {
      let res = await downloadFromMinio({ filesID: id });
      const myBlob = new window.Blob([res], { type: "image/jpeg" });
      const qrUrl = window.URL.createObjectURL(myBlob);
      this.$store.commit("SET_AVATAR", qrUrl);
      // this.avatar = qrUrl
    },
    selectHover() {
      if (!this.selectHoverType) {
        this.$refs.selectRef.toggleMenu();
      }
      this.selectHoverType = true;
    },
    selectLeave() {
      setTimeout(() => {
        if (!this.openHoverType) {
          this.$refs.selectRef.toggleMenu();
          this.selectHoverType = false;
        }
      }, 500);
    },
    optionHover() {
      this.openHoverType = true;
    },
    visibleChange(row) {
      if (row == false) {
        this.selectHoverType = false;
        this.openHoverType = false;
      }
    },
    optionLeave() {
      setTimeout(() => {
        if (!this.openHoverType) {
          this.$refs.selectRef.toggleMenu();
          this.selectHoverType = false;
        }
        this.openHoverType = false;
      }, 200);
      // this.openHoverType = false;
      // if()
      // this.$refs.selectRef.toggleMenu();
      // this.selectHoverType = false
    },
    handleClick(tab, event) {
      console.log(tab, event);
      // this.activeName = tab
    },
    // 初始化消息
    async getMessageData() {
      let param = {};
      let res = await GetMessageData(param);
      if (res.code) {
        // 个人消息
        this.personalMessage = Object.assign([], res.data[0]);

        // 审核消息,
        this.auditMessage = Object.assign([], res.data[1]);
        // 系统消息
        this.systemMessage = Object.assign([], res.data[2]);
      }
    },
    // 全部已读
    async handleMessageAll() {
      let param = {
        id: "ALl",
      };
      let res = await ReadMessage(param);
      if (res.code == 1) {
        this.getMessageData();
        this.$message({
          message: res.message,
          type: "success",
        });
      }
      if (res.code == 0) {
        this.$message.error(res.message);
      }
    },
    async getCompanyList() {
      let res = await OrganGetUserCompany({});
      if (res.code == 1) {
        this.companyList = res.data[0];
        let companyID = this.$store.state.user.companyID
          ? this.$store.state.user.companyID
          : JSON.parse(getCompanyId());
        // getCompanyId()
      }
    },
    toggleSideBar() {
      this.$store.dispatch("app/toggleSideBar");
    },
    refreshSelectedTag() {
      let view = this.$route;
      this.$tab.refreshPage(view);
      // if (this.$route.meta.link) {
      // 	this.$store.dispatch('tagsView/delIframeView', this.$route)
      // }
    },
    async logout() {
      this.$confirm("确定要退出系统吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$store.dispatch("LogOut").then(() => {
            Cookies.remove("automaticLogin");
            // location.href = '/login';
            this.$router.replace({ path: "/login" });
            // this.$router.push("/login");
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
}
.navbar {
  display: flex;
  margin-left: 24px;
  margin-top: 26px;
  height: 98px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;
  background: transparent;
  .navright {
	padding: 0 20px;
    margin-left: 0.9vw;
    width: 88vw;
    height: 98px;
    background: #ffffff;
    border-radius: 16px;
  }
}

.companyList {
  cursor: pointer;
  margin: 5px 0;
}

.companyList:hover {
  color: #55aaff;
}
::v-deep .el-tabs__nav-scroll {
  display: flex;
  justify-content: center;
}

::v-deep .el-tabs__header {
  margin: 0;
}

::v-deep .el-dropdown-menu {
  padding-bottom: 0;
}

::v-deep .el-button {
  border: 0 solid transparent;
}

::v-deep .el-button:hover,
.el-button:focus {
  border-color: transparent;
}

::v-deep .el-dropdown-menu {
  user-select: none;
  padding-bottom: 0 !important;
}

::v-deep .el-popper[x-placement^="bottom"] {
  padding-bottom: 0 !important;
}

::v-deep .el-input__inner {
  border: 1px solid transparent !important;
  width: 190px !important;
}

::v-deep .el-input--suffix .el-input__inner {
  padding-right: 0;
}

.logoBox {
  width: 8.4vw;
  height: 98px;
  background: #1478f6;
  border-radius: 16px 16px 0px 0px;
  border-bottom: 1px solid #fff;
}

.sidebar-logo-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sidebar-logo {
  width: 48px;
  height: 48px;
  margin-top: 13px;
}

.sidebar-title {
  color: #fff;
  display: block;
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
}
</style>
