<template>
  <div class="avue-top">
    <div class="top-bar__left">
      <div
        class="avue-breadcrumb"
        :class="[{ 'avue-breadcrumb--active': isCollapse }]"
        v-if="showCollapse"
      >
        <i v-if="showNavIcon" class="icon-navicon" @click="setCollapse"></i>
      </div>
    </div>
    <div class="top-bar__title">
      <div class="top-bar__item top-bar__item--show" v-if="showMenu">
        <top-menu ref="topMenu"></top-menu>
      </div>
    </div>
    <div class="top-bar__right">
      <top-theme></top-theme>
      <router-link to="/tenant/news/index" v-if="$store.state.user.auth === '2'">
        <div class="top-bar__item top-bar__item--show">
          <el-button type="text" style="padding:0;color:#fff;font-weight: 400;">
            <i v-if="notice.count > 0" class="el-icon-bell" style="color:red"></i>
            <i v-else class="el-icon-bell"></i>
            <span>客户消息&nbsp;</span>
            <span v-if="notice.count > 0">({{notice.count}})</span>
            <span v-else-if="notice.count > 10">(99+)</span>
          </el-button>
        </div>
      </router-link>
      <div style="margin-top:2px">
        <img class="top-bar__img" src="/manage/img/head.png" />
        <span class="top-bar__name">{{userInfo.real_name}}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown" style="margin-top:-5px">

            <!-- <el-dropdown-item>
            <router-link to="/">{{$t('navbar.dashboard')}}</router-link>
            </el-dropdown-item>-->
            <!-- <el-dropdown-item>
            <router-link to="/info/index">{{$t('navbar.userinfo')}}</router-link>
            </el-dropdown-item>-->
            <el-dropdown-item>
              <router-link to="/tenant/account/index">{{$t('navbar.accountsafe')}}</router-link>
            </el-dropdown-item>
            <el-dropdown-item v-if="auth === '2' && loginType === 'Type-S'" divided>
              <a href="http://www.jlhrms.com/#/" target="_blank">{{$t('navbar.experienceEntrance')}}</a>
            </el-dropdown-item>
            <!-- <el-dropdown-item>
            <router-link to="/tenant/set/index">{{$t('navbar.set')}}</router-link>
            </el-dropdown-item>-->
            <!-- <el-dropdown-item>
            <router-link to="/tenant/company/index">{{$t('navbar.companyindex')}}</router-link>
            </el-dropdown-item>-->
            <el-dropdown-item @click.native="logout" divided>{{$t('navbar.logOut')}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>
<script>
import { resetRouter } from "@/router/router";
import { mapGetters, mapState } from "vuex";
import { fullscreenToggel, listenfullscreen } from "@/util/util";
import topLock from "./top-lock";
import topMenu from "./top-menu";
import topSearch from "./top-search";
import topTheme from "./top-theme";
import topLogs from "./top-logs";
import topColor from "./top-color";
import topNotice from "./top-notice";
import topLang from "./top-lang";
let interval;

export default {
  components: {
    topLock,
    topMenu,
    topSearch,
    topTheme,
    topLogs,
    topColor,
    topNotice,
    topLang,
  },
  name: "top",
  data() {
    return {};
  },
  filters: {},
  created() {},
  mounted() {
    listenfullscreen(this.setScreen);
    if (this.loginType === 'Type-S') {
      this.$store.dispatch("workGetUnreadCount");
    } else {
      this.$store.dispatch("getUnreadCount");
    }
    interval = setInterval(() => {
      if (this.loginType === 'Type-S') {
        this.$store.dispatch("workGetUnreadCount");
      } else {
        this.$store.dispatch("getUnreadCount");
      }
    }, 60000);
  },
  computed: {
    ...mapState({
      showDebug: (state) => state.common.showDebug,
      showTheme: (state) => state.common.showTheme,
      showLock: (state) => state.common.showLock,
      showFullScren: (state) => state.common.showFullScren,
      showCollapse: (state) => state.common.showCollapse,
      showSearch: (state) => state.common.showSearch,
      showMenu: (state) => state.common.showMenu,
      showColor: (state) => state.common.showColor,
      showNavIcon: (state) => state.user.auth === "2" || !state.notPc,
      auth: (state) => state.user.auth,
      loginType: (state) => state.user.userInfo.login_type,
    }),
    ...mapGetters([
      "userInfo",
      "isFullScren",
      "tagWel",
      "tagList",
      "isCollapse",
      "tag",
      "logsLen",
      "logsFlag",
      "notice",
    ]),
  },
  methods: {
    handleScreen() {
      fullscreenToggel();
    },
    setCollapse() {
      this.$store.commit("SET_COLLAPSE");
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    logout() {
      this.$confirm(this.$t("logoutTip"), this.$t("tip"), {
        confirmButtonText: this.$t("submitText"),
        cancelButtonText: this.$t("cancelText"),
        type: "warning",
      }).then(() => {
        this.$store.dispatch("LogOut").then(() => {
          resetRouter();
          this.$store.dispatch('jlHelpShow', false)
          this.$router.push({ path: "/login" });
        });
      });
    },
  },
  destroyed() {
    clearInterval(interval);
  },
};
</script>

<style lang="scss" scoped>
</style>
