<template>
  <div class="qheader">
    <el-header style="height:calc(100vh * 76 / 1080);">
      <div class="header">
        <div class="computer"><img src="../assets/img/computer.png" alt=""></div>
        <div class="title">{{ msg }}</div>

      </div>
      <div>
        <div class="ellink">
          <span class="tit1"> {{ currentTime }}</span>
          <span class="tit2">{{ weekDay }} {{ formattedDate }}</span>
          <img class="tit3" src="../assets/img/Admin.png" alt="">
          <span class="tit4">Admin</span>
          <!-- 点击退出登录 -->
          <img @click="handleOut" class="tit5" src="../assets/img/Back.png" alt="">
        </div>
        <!-- 线条 -->
        <div class="ellink1">

        </div>
        <!-- 当前位置 -->
        <div>
          <span class="titl1">当前位置：</span>
          <span class="titl2">{{ this.$store.state.activeMenuItem }} </span>
          <!-- 当前位置 -->
          <div class="titl3">

            <img src="../assets/img/left.png">
            <span>{{ this.$route.meta.title }}</span>
            <img src="../assets/img/right.png">
          </div>

        </div>
      </div>


    </el-header>
  </div>
</template>
<script>

export default {
  data() {
    return {
      date: new Date(),
      timeInterval: null,
      msg: "无人船数字管理平台",
      userName: localStorage.getItem("userName"),
    };
  },

  methods: {
    handleOut() {
      this.$confirm("此操作将退出系统, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          localStorage.removeItem("role");
          localStorage.removeItem("name");
          localStorage.removeItem("userName");
          localStorage.removeItem("token");
          this.$message({
            type: "success",
            message: "退出成功!",
          });
          // 退出登录页面
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出",
          });
        });
    },

  },
  computed: {
    currentTime() {
      return this.date.toTimeString().slice(0, 8); // 获取时分秒
    },
    weekDay() {
      return this.date.toLocaleDateString(undefined, { weekday: 'short' }); // 获取星期几
    },
    formattedDate() {
      return this.date.toLocaleDateString(); // 获取年月日
    },
  },
  mounted() {

  },
  created() {

    this.timeInterval = setInterval(() => {
      this.date = new Date(); // 更新date以触发计算属性重新计算
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timeInterval); // 清除定时器
  },
};
</script>
<style lang="scss" scoped>
.qheader::v-deep {
  z-index: 0;
  width: 100vw;
  height: calc(100vh * 198 / 1080);
  opacity: 0.96;
  background: rgba(0, 88, 196, 0.96);
  position: relative;

  // 电脑图标
  .computer {
    width: 30px;
    height: 27px;
    // background: #FFFFFF;
    position: absolute;
    left: 32px;
    top: 25px;
  }

  // 无人船数字后台管理系统
  .title {
    width: 253px;
    height: 28px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 26px;
    position: absolute;
    left: 78px;
    top: 24px;
  }

  .el-header {
    padding: 0;

  }


  .ellink {
    .tit1 {
      font-family: SourceHanSansCN;
      font-weight: 400;
      font-size: 20px;
      color: #FFFFFF;
      position: absolute;
      top: 20px;
      right: 196px;

    }

    .tit2 {
      font-family: SourceHanSansCN;
      font-weight: 400;
      font-size: 14px;
      color: #FFFFFF;
      position: absolute;
      top: 47px;
      right: 178px;
    }

    .tit3 {
      position: absolute;
      top: 21px;
      right: 109px;
    }

    .tit4 {
      position: absolute;
      top: 31px;
      right: 61px;
    }

    .tit5 {
      position: absolute;
      top: 30px;
      right: 30px;
    }
  }

  .ellink1 {
    width: 100vw;
    height: 1px;
    background: #F2F5FA;
    opacity: 0.26;
    position: absolute;
    top: 76px;
  }

  .titl1 {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
    opacity: 0.56;
    position: absolute;
    left: 297px;
    top: 101px;
  }

  .titl2 {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 15px;
    color: #FFFFFF;
    position: absolute;
    left: 375px;
    top: 101px;
  }

  .titl3 {
    position: absolute;
    left: 460px;
    top: 96px;
    display: flex;
    flex-direction: row;
    align-items: center;

    >span {
      font-family: Microsoft YaHei;
      font-weight: 400;
      font-size: 15px;
      color: #000000;
      vertical-align: middle;
      width: 106px;
      height: 30px;
      line-height: 30px;
      background: #FFFFFF;
      border-radius: 5px;
      margin-left: 5px;
      margin-right: 5px;

    }
  }
}
</style>