<template>
  <div class="navbar">
    <hamburger
      id="hamburger-container"
      :is-active="sidebar.opened"
      class="hamburger-container"
      @toggleClick="toggleSideBar"
    />
    <div class="right-menu" flex>

      <div flex>
        <tags-view  />
<!--        -->
<!--        <router-link :to="item.path" class="indexRouter" :style="{-->
<!--				color: activePage == index ? '#1478f6' : ''}" v-for="(item,index) in lagerScreenMenuData" :key="index">-->
<!--        <div @click="handlerClick(item,index)" flex>-->
<!--            <i :class="item.meta.icon"></i>-->
<!--            <p>{{item.meta.title}}</p>-->
<!--        </div>-->
<!--        </router-link>-->
<!--        <breadcrumb id="breadcrumb-container" class="breadcrumb-container" v-if="!topNav" />-->
      </div>
      <el-dropdown class="avatar-container right-menu-item hover-effect" style="display:flex;">
        <!-- trigger="click" -->
        <div class="avatar-wrapper" flex="cross:center">
          <img :src="avatar" class="user-avatar" v-if="avatar" />
          <img
            src="../../assets/images/person.png"
            class="user-avatar"
            v-else
          />
          <!-- <i class="el-icon-caret-bottom" /> -->
          <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 @click.native="setting = true">
            <span>布局设置</span>
          </el-dropdown-item>
          <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 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";
import { authApi } from "@/api/apis/auth";
import tagsView from '@/layout/components/TagsView/index.vue'
export default {
  components: {
    Breadcrumb,
    TopNav,
    Hamburger,
    Screenfull,
    SizeSelect,
    Search,
    RuoYiGit,
    RuoYiDoc,
    tagsView
  },
  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: {},
			activePage: 0,
      lagerScreenMenuData:[]
    };
  },
  mounted() {
    this.personInfo = JSON.parse(getInfo());
    this.PersonName = JSON.parse(getInfo()).personName;
    this.getLagerScreenMenuData();
    // this.getMessageData();
    // this.getInfoDetail(JSON.parse(getInfo()).personID)
  },
  methods: {
    handlerClick(item,index){
      this.activePage = index
    },
    async getLagerScreenMenuData(){
      let params = {
        formType:"4"
      }
      let res = await authApi("moduleService", "module", "queryTypeList","",params);
      if(res.status == "200"){
        this.lagerScreenMenuData = res.attribute
      }
    },
    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>
.indexRouter {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 4vh;
  color: #333333;
  white-space: nowrap;
}
.indexRouter:hover {
  color: #1478f6;
}
.indexRouter i {
  margin-right: 5px;
}
.navbar {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
}

::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 {
  float: left;
  cursor: pointer;
  line-height: 50px;
  padding: 5px 15px;
}

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

.sidebar-logo {
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 12px;
}

.sidebar-title {
  display: inline-block;
  margin: 0;
  color: #212121;
  font-weight: 600;
  font-size: 18px;
  font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;
  vertical-align: middle;
}

.item-box {
  color: #999999;
  font-size: 13px;
  line-height: 22px;
  padding: 10px 25px;
  border-bottom: 1px solid whitesmoke;
}

.item-box:hover {
  background-color: #f8f8f8;
}

.item-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  color: #696969;
  padding-bottom: 5px;
}

.item-time {
  color: #2697ff;
  margin-top: 5px;
}

.newsTips {
  background-color: #ff5722;
  padding: 2px 6px;
  color: white;
  margin-left: 2px;
  font-size: 12px;
  border-radius: 3px;
  position: relative;
  top: -2px;
}

.navbar {
  height: 80px;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1002;
  background: #fafafa;
  padding: 8px 0;
  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .personName {
    font-size: 14px;
    margin-left: 5px;
  }

  .refreshWindow {
    cursor: pointer;
    line-height: 46px;
    padding: 0 15px;
    float: left;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .hamburger-container {
    line-height: 46px;
    height: 100%;
    float: left;
    cursor: pointer;
    transition: background 0.3s;
    -webkit-tap-highlight-color: transparent;

    &:hover {
      background: rgba(0, 0, 0, 0.025);
    }
  }

  .breadcrumb-container {
    float: left;
  }

  .topmenu-container {
    position: absolute;
    left: 50px;
  }

  .errLog-container {
    display: inline-block;
    vertical-align: top;
  }

  .right-menu {
    background: #fff;
    border-radius: 16px;
    height: 100%;
    width: calc(100% - 151px);
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 15px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      color: #5a5e66;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background 0.3s;

        &:hover {
          // background: rgba(0, 0, 0, 0.025);
        }
      }
    }

    .avatar-container {
      margin-right: 15px;

      .avatar-wrapper {
        // margin-top: 5px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 33px;
          height: 33px;
          border-radius: 50%;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -20px;
          // top: 25px;
          font-size: 12px;
        }
      }
    }
  }
}

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

.companyList:hover {
  color: #55aaff;
}
</style>
