<template>
  <div>
    <div class="head">
      <div class="left">{{ time }}</div>
      <div class="center">
        <img src="@/assets/images/newimg.png" />
        <div>
          <img src="@/assets/images/jt.png" />
          <p>区间测速统计大屏</p>
          <img
            src="@/assets/images/jt.png"
            style="transform: rotate(-180deg)"
          />
        </div>
      </div>
      <div class="right">
        <div class="user">
          <div>
            <span class="user-nickname"> {{ userStore.nickName }} </span>
            <span class="typename">{{ userStore.nickName }}</span>
          </div>
          <img :src="userStore.avatar" class="user-avatar" />
        </div>
        <div class="signOut" @click="logout">退出登录</div>
      </div>
    </div>
    <statisticalTable />
  </div>
</template>
<script setup>
import statisticalTable from "../statisticalTable/index.vue";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
import { ElMessageBox } from "element-plus";
function logout() {
  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      userStore.logOut().then(() => {
        location.href = "/index";
      });
    })
    .catch(() => {});
}
const time = ref("");
formatTime();
setInterval(() => {
  formatTime();
}, 1000);
function formatTime() {
  function formatDateTime(date) {
    let year = date.getFullYear();
    let month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以要加1，并且需要补零
    let day = ("0" + date.getDate()).slice(-2); // 日期补零
    let hours = ("0" + date.getHours()).slice(-2); // 小时补零
    let minutes = ("0" + date.getMinutes()).slice(-2); // 分钟补零
    let seconds = ("0" + date.getSeconds()).slice(-2); // 秒补零
    return `${year}年${month}月${day}日 ${hours}:${minutes}:${seconds}`;
  }
  time.value = formatDateTime(new Date());
}
</script>
<style lang="scss" scoped>
.head {
  background: linear-gradient(#4f8aff 0%, #1235ca 100%);
  display: flex;
  align-items: center;
  padding: 0px 15px;
  justify-content: space-between;
  height: 60px;
  margin-bottom: 50px;
  color: #fff;
  .center {
    position: relative;
    & > img {
      height: 130px;
    }
    div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #fff;
      display: flex;
      align-items: center;
      p {
        margin: 0px 15px;
        font-weight: 500;
        font-size: 28px;
        color: #ffffff;
      }
    }
  }
  .right {
    display: flex;
    align-items: center;
    height: 100%;
    .signOut {
      cursor: pointer;
    }
    .user {
      display: flex;
      align-items: center;
      border-right: 1px solid #d8d8d8;
      margin-right: 15px;
      height: 100%;
      img {
        width: 38px;
        height: 38px;
        object-fit: cover;
        border-radius: 38px;
        margin: 0px 15px;
      }
      div {
        .user-nickname {
          font-weight: 800;
          font-size: 12px;
          display: block;
        }
        .typename {
          font-size: 12px;
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
