<!--
 * @Author: donghao donghao@supervision.ltd
 * @Date: 2025-03-06 15:42:11
 * @LastEditors: donghao donghao@supervision.ltd
 * @LastEditTime: 2025-03-07 13:52:19
 * @FilePath: \vite-ai\data-dashboard\src\components\Navbar.vue
 * @Description: 标题栏
-->
<script setup lang="ts">
// import { useNav } from "@/layout/hooks/useNav";
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

const logout = () => {
  userStore.logout()
}

// TODO 完善整个导航栏交互
defineOptions({
  name: "DsNavbar"
});

// const { logout } = useNav();
//获取并刷新日期
const currTime = ref({
  date: "",
  time: "",
  week: ""
});

function _formatNum(value) {
  if (value <= 9) {
    return "0" + value;
  }
  return value;
}

function getTime() {
  const nowDate = new Date();
  const date =
    nowDate.getFullYear() +
    "/" +
    _formatNum(nowDate.getMonth() + 1) +
    "/" +
    _formatNum(nowDate.getDate());
  const time =
    _formatNum(nowDate.getHours()) +
    ":" +
    _formatNum(nowDate.getMinutes()) +
    ":" +
    _formatNum(nowDate.getSeconds());
  let week = "";
  switch (nowDate.getDay()) {
    case 0:
      week = "星期天";
      break;
    case 1:
      week = "星期一";
      break;
    case 2:
      week = "星期二";
      break;
    case 3:
      week = "星期三";
      break;
    case 4:
      week = "星期四";
      break;
    case 5:
      week = "星期五";
      break;
    case 6:
      week = "星期六";
      break;
    default:
      break;
  }
  return {
    date,
    time,
    week
  };
}

const getDataTime = () => {
  currTime.value = getTime();
  setTimeout(getDataTime, 1000);
};
onMounted(() => {
  getDataTime();
});
</script>

<template>
  <div class="flex justify-between h-full align-middle Navbar_wrap">
    <div class="flex items-center left">
      <div class="bg_logo" />
    </div>
    <div class="flex">
      <!-- <div class="center_title" /> -->
      <h1 class="center_title">5G铁路货车装卸作业智能监控平台</h1>
    </div>

    <div class="flex items-center justify-end right">
      <div class="date_box ff1">
        <span>{{ currTime.date }}</span><span>{{ currTime.week }}</span><span>{{ currTime.time }}</span>
      </div>
      <div class="bg_user_icon" @click="logout" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.Navbar_wrap {
  // bgNav
  // background: url("@/assets/dataScreen/common/bgNav.svg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 64px;
  line-height: 64px;
  .left {
    width: 30vw;
    padding-left: 24px;

    .bg_logo {
      // background: url("@/assets/dataScreen/common/logo.svg") no-repeat;
      width: 111px;
      height: 36px;
    }
  }

  .center_title {
    // margin-top: 19px;
    // background: url("@/assets/dataScreen/common/title.svg") no-repeat center center;
    width: 670px;
    text-align: center;
    // height: 36px;
    font-size: 32px;
    // line-height: 2;
  }

  .right {
    width: 30vw;

    .date_box {
      color: #009dff;
      font-size: 16px;
      margin-right: 15px;

      &>span {
        padding-left: 5px;
      }
    }

    .bg_user_icon {
      background: url("@/assets/common/userIcon.svg") no-repeat;
      width: 40px;
      height: 32px;
      // border: 1px solid #009dff;
      opacity: 0.6;
      margin-right: 15px;
    }
  }
}
</style>
