<template>
  <div class="header">
    <div class="header-logo">
      <img src="@/assets/logo.png" slot="reference" />
      <h2 class="conversion">中能智能</h2>
    </div>
    <div class="personalCenter">
      <p class="current-time">{{ currentDate }}</p>
      <el-popover placement="bottom" width="220" trigger="click" style="cursor: pointer">
        <img src="@/assets/portrait.png" slot="reference" />
        <div>
          <div class="cursor-pointer boxmini">
            <p>账号：admin</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>岗位：超级管理员</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>角色：超级管理员</p>
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini">
            <p>主题切换：</p>
            <theme-picker style="float: right; height: 26px; margin: -3px 8px 0 0" @change="themeChange" />
          </div>
          <el-divider></el-divider>
          <div class="cursor-pointer boxmini" @click="skip(1)">
            <p class="logout">退出登录</p>
          </div>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script>
import { userLogout } from "@/api/system";
import ThemePicker from "@/components/ThemePicker";
export default {
  data() {
    return {
      currentDate: "",
    };
  },
  components: {
    ThemePicker,
  },
  mounted() {
    this.updateCurrentDateTime();
    setInterval(this.updateCurrentDateTime, 1000);
  },

  methods: {
    themeChange(val) {
      this.$store.dispatch("settings/changeSetting", {
        key: "theme",
        value: val,
      });
      this.theme = val;
    },
    updateCurrentDateTime() {
      const now = new Date();
      const year = now.getFullYear();
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");
      const hours = now.getHours().toString().padStart(2, "0");
      const minutes = now.getMinutes().toString().padStart(2, "0");
      const seconds = now.getSeconds().toString().padStart(2, "0");

      // 设置当前时间数据
      this.currentDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    skip() {
      userLogout({
        phone: this.$store.state.auth.userInfo.userInfo.userPhone,
      }).then((res) => {
        this.$store.commit("auth/RESET_USER_STATE");
        this.$router.push("/login");
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #fff;
  padding: 0 20px;

  .header-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h2 {
      padding-left: 10px;
      font-weight: 600;
    }

    img {
      width: 40px;
      height: 40px;
    }
  }

  .el-breadcrumb {
    font-size: 16px;
    font-weight: 600;
    color: rgb(143, 143, 143);
    flex: 1;
  }

  .personalCenter {
    display: flex;
    align-items: center;

    .current-time {
      font-size: 12px;
      padding-right: 10px;
    }

    .remind {
      cursor: pointer;
      margin-right: 24px;
    }
  }
}

.boxmini {
  display: flex;

  p {
    font-size: 14px;
    font-weight: 600;
  }

  .logout {
    color: #ff0000;
    text-align: center;
    width: 100%;
  }
}

.el-divider--horizontal {
  margin: 5px 0;
}
</style>
