<template>
  <div class="head-container">
    <div class="home-head-box relative">
      <div class="time absolute">
        <div class="f20">{{ datatime }}</div>
        <div class="f18 pl104">{{ hour + ":" + minute + ":" + second }}</div>
      </div>
      <div class="title absolute" @click="goPath">{{ props.title }}</div>

      <div class="title-tow" absolute>
        <div class="back"><span class="ml40">林芝市</span></div>
      </div>
      <!-- <div class="wd absolute">
        <el-icon size="25px" style="top: 6px" color="#86C8EB"><Sunny /></el-icon>
        <span> 温度 1~7°C </span>
      </div> -->
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from "vue-router";
  import { getRecentDay, timeValidate } from "@/utils/tools.js";
  import { ref, onMounted, defineProps, onUnmounted } from "vue";
  const props = defineProps({
    title: {
      type: String,
      default: "警保联动"
    }
  });
  const datatime = ref(getRecentDay(0));
  const minute = ref("00"); //分
  const second = ref("00"); //秒
  const hour = ref("00"); //时
  const day = ref(0);
  const timersfm = ref(null);

  const router = useRouter();

  onMounted(() => {
    timersfm.value = setInterval(() => {
      CurrentTime();
    }, 1000);
  });
  // 获取时分秒
  function CurrentTime() {
    const date = new Date();
    hour.value = date.getHours();
    minute.value = date.getMinutes();
    second.value = date.getSeconds();
    day.value = day.value < 10 ? "0" + day.value : day.value;
    hour.value = hour.value < 10 ? "0" + hour.value : hour.value;
    minute.value = minute.value < 10 ? "0" + minute.value : minute.value;
    second.value = second.value < 10 ? "0" + second.value : second.value;
  }

  function goPath() {
    router.push("/editPassword");
  }
</script>

<style lang="scss" scoped>
  .head-container {
    width: 100%;
    height: 135px;
    position: relative;
    background: #263445;
    z-index: 2;
  }
  .home-head-box {
    width: 100%;
    height: 138px;
    background: url("~@/assets/images/home_head.png") no-repeat center center;
    z-index: 2;
    .title {
      font-size: 36px;
      left: 50%;
      top: 10px;
      transform: translateX(-50%);
      font-family: "YSBTH";
      background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .title-tow {
      background: #fff;
      position: absolute;
      height: 70px;
      width: 500px;
      top: 50px;
      left: calc(50% - 270px);
      font-size: 36px;
      font-family: "YSBTH";
      background: linear-gradient(0deg, #59a6f4 0%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      line-height: 100px;
      .back {
        background: url("~@/assets/images/bi/fbt.png") no-repeat center center;
        height: 100%;
        width: 100%;
      }
    }
    .time {
      font-family: "DigifaceWide";
      color: #fff;
      left: 25%;
      top: 10px;
    }
    .wd {
      right: 25%;
      top: 12px;
      font-size: 16px;
      font-family: "DigifaceWide";
      color: #fff;
    }
    .zbbb {
      position: absolute;
      right: 20px;
      top: 22px;
      font-size: 16px;
      width: 162px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 16px;
      background: url("~@/assets/images/btnbb.png") no-repeat center center;
      background-size: 100% 100%;
    }
  }
</style>
