<template>
  <div class="navbar">
    <div class="left-menu">
      <div class="navbar-img">
        <img src="../../../public/images/title.png" />
      </div>
      <div class="navbar-info">门禁设备管理平台</div>
    </div>

    <div class="right-menu">
      <div class="right-menu-time">
        <span>{{ dateFormat(newDate) }}</span>
      </div>
      <el-dropdown
        class="avatar-container right-menu-item hover-effect"
        trigger="click"
      >
        <div class="avatar-wrapper">
          退出
          <svg-icon class="icon" icon-class="退出" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <router-link to="/">
            <el-dropdown-item>首页</el-dropdown-item>
          </router-link>

          <el-dropdown-item divided @click.native="logout">
            <span style="display: block">退出账号</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import ErrorLog from "@/components/ErrorLog";
import SizeSelect from "@/components/SizeSelect";
import Search from "@/components/HeaderSearch";
import { removeToken } from "@/utils/auth"; // gsk 添加

export default {
  components: {
    ErrorLog,
    SizeSelect,
    Search,
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
  },
  data() {
    return {
      newDate: new Date(),
    };
  },
  mounted() {
    let that = this;
    this.timer = setInterval(function () {
      that.newDate = new Date().toLocaleString();
    });
  },
  // 销毁时清除计时器
  beforeDestroy: function () {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },
  methods: {
    async logout() {
      //await this.$store.dispatch('user/logout')
      removeToken();
      this.$router.push(`/login?redirect=${this.$route.fullPath}`);
    },
    dateFormat() {
      var date = new Date();
      var year = date.getFullYear();
      var month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hours =
        date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      var minutes =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      var seconds =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      let week = date.getDay(); // 星期
      let weekArr = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
      ];
      // 拼接 时间格式处理
      return (
        year +
        "年" +
        month +
        "月" +
        day +
        "日 " +
        hours +
        ":" +
        minutes +
        ":" +
        seconds +
        " " +
        weekArr[week]
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.navbar {
  display: flex;
  margin-top: 21px;
  line-height: 50px;
  font-size: 30px;
  font-weight: bold;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);

  .left-menu {
    display: flex;
    flex: 1;

    .navbar-img {
      margin-left: 30px;

      img {
        width: 49px;
      }
    }

    .navbar-info {
      margin-left: 18px;
    }
  }

  .right-menu {
    display: flex;
    font-size: 15px;

    &:focus {
      outline: none;
    }
    .right-menu-time {
      margin-right: 50px;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      margin-left: 20px;
      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-wrapper {
        .icon {
          margin-left: 10px;
        }
      }
    }

    .avatar-container {
      margin-right: 30px;
    }
  }
}
</style>
