<template>
  <!-- 首页 -->
  <div class="homePage">
    <!-- 顶部 -->
    <div
      id="oneMapHeader"
      :class="[
        'oneMapHeader',
        'animate__animated',
        showPanel2 ? 'animate__fadeOutUp' : 'animate__fadeInDown',
      ]"
    >
      <!-- 标题 -->
      <div id="titleFont">延安市智慧城管</div>
      <!-- 标题左侧展示组件 -->
      <div class="Location">
        <el-icon size="18" style="margin-right: 5px; vertical-align: bottom"
          ><LocationFilled
        /></el-icon>
        延安
      </div>
      <div class="Timer">
        <span class="date">{{ dates }}</span>
        <span class="time">{{ times }}</span>
        <span class="date week">{{ weeks }}</span>
      </div>
      <div class="Wather"></div>
      <!-- 标题右侧功能组件 -->
      <router-link to="/user/profile">
        <div class="goHome header_icon"></div>
      </router-link>
      <div class="goClose_com header_icon" @click="logout()"></div>
    </div>
    <!-- 中间内容部分 -->
    <div id="HomePageBody">
      <!-- 菜单 -->
      <div class="ZhuanTi ZhuanTi1" @click="ZhuanTIGO(1)">
        <div class="ZhuanTiName">城市生命线</div>
      </div>
      <div class="ZhuanTi ZhuanTi2" @click="ZhuanTIGO(2)">
        <div class="ZhuanTiName">海绵城市</div>
      </div>
    </div>
    <!-- 底部菜单 -->
    <div id="BottomMenuBox">
      <Transition name="slide-fade">
        <div v-show="AllData.BottmBackGroundShow" class="BottmBackGround"></div>
      </Transition>
    </div>
  </div>
</template>

<script setup name="homePage">
import useUserStore from "@/store/modules/user";
const router = useRouter();
const userStore = useUserStore();
import { fullscreenToggel } from "@/utils/util";
// 时间以及天气
const timer = ref(null);
const dates = ref(null);
const weeks = ref(null);
const times = ref(null);
const AllData = reactive({
  BottmBackGroundShow: false,
});
const showPanel2 = ref(true);
// 获取当前时间
const formatTime = () => {
  let date = new Date();
  let year = date.getFullYear(); // 年
  let month = date.getMonth() + 1; // 月
  let day = date.getDate(); // 日
  let hour = date.getHours(); // 时
  hour = hour < 10 ? "0" + hour : hour; // 如果只有一位，则前面补零
  let minute = date.getMinutes(); // 分
  minute = minute < 10 ? "0" + minute : minute; // 如果只有一位，则前面补零
  let second = date.getSeconds(); // 秒
  second = second < 10 ? "0" + second : second; // 如果只有一位，则前面补零
  let weekAry = new Array(
    "星期日",
    "星期一",
    "星期二",
    "星期三",
    "星期四",
    "星期五",
    "星期六"
  );
  weeks.value = weekAry[date.getDay()];
  dates.value = `${year}-${month}-${day}`;
  times.value = `${hour}:${minute}:${second}`;
};
const currentTime = () => {
  clearInterval(timer.value);
  timer.value = setInterval(() => {
    formatTime();
  }, 500);
};
// 点击跳转专题图
const ZhuanTIGO = (num) => {
  userStore.ZhuanTiType = num;
  router.push({
    path: "/oneMap",
    name: "oneMap",
    meta: { title: "一张图", icon: "dashboard", affix: true, noCache: true },
    query: { type: "FullScreen" },
  });
};
// 退出登录
const logout = () => {
  userStore.logOut().then(() => {
    location.href = "/";
  });
};
onMounted(() => {
  fullscreenToggel();
  currentTime();
  showPanel2.value = false;
  AllData.BottmBackGroundShow = true;
});
</script>

<style scoped lang="scss">
.homePage {
  width: 100%;
  height: 100vh;
  background: black;
  position: relative;
  background: url("@/assets/images/MenHU/bj_img@2x.png") no-repeat center;
  background-size: cover;
  // 顶部
  #oneMapHeader {
    width: 100%;
    height: 100px;
    background: url("@/assets/images/Sponge_screen/db_img.png") no-repeat center;
    background-size: cover;
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    #titleFont {
      width: 634px;
      height: 47px;
      position: absolute;
      left: 50%;
      margin-left: -317px;
      top: 20px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      font-size: 38px;
      color: #ffffff;
      line-height: 35px;
      font-style: italic;

      background: linear-gradient(0deg, aqua 0%, #ffffff 80%, #ffffff 100%);

      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      text-align: center;
      letter-spacing: 15px;
    }

    .Location {
      position: absolute;
      top: 15px;
      left: 20px;
      height: 15px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      font-size: 14px;
      color: #ffffff;
      line-height: 13px;
      font-style: italic;
      height: 18px;
      line-height: 18px;
      display: inline-block;
    }
    .Timer {
      position: absolute;
      top: 15px;
      left: 90px;
      height: 18px;
      line-height: 18px;

      .time {
        display: inline-block;
        width: auto;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 12px;
        color: #ffffff;
        height: 18px;
        line-height: 18px;
        font-style: italic;
        margin: 0 10px;
      }

      .date {
        display: inline-block;
        width: auto;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        font-size: 12px;
        color: #ffffff;
        height: 18px;
        line-height: 18px;
        font-style: italic;
      }
    }

    .header_icon {
      width: 22px;
      height: 22px;
      position: absolute;
      top: 10px;
      cursor: pointer;
    }
    .goHome {
      background: url("@/assets/images/MenHU/sz.png") no-repeat center;
      background-size: contain;
      right: 100px;
    }
    .goClose_com {
      background: url("@/assets/images/MenHU/tc.png") no-repeat center;
      background-size: contain;
      right: 50px;
    }
  }
  // 底部
  #BottomMenuBox {
    position: absolute;
    bottom: 0;
    width: 952px;
    height: 162px;
    left: 50%;
    margin-left: -476px;
    z-index: 999;

    .BottmBackGround {
      position: absolute;
      bottom: 0;
      width: 952px;
      height: 62px;
      background: url("@/assets/images/Sponge_screen/menu/DB_img.png") no-repeat center;
      background-size: cover;
    }
  }
  // 中部内容
  #HomePageBody {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    .ZhuanTi {
      width: 316px;
      height: 378px;
      cursor: pointer;
      margin: 85px;
      position: relative;
      &:hover {
        transform: scale(1.05);
        box-shadow: 0px 0px 10px aqua;
      }

      .ZhuanTiName {
        width: 100%;
        height: 40px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 30px;
        color: #ffffff;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: 70px;
      }
    }
    .ZhuanTi1 {
      background: url("@/assets/images/MenHU/cssmx@2x.png") no-repeat center;
      background-size: cover;
    }
    .ZhuanTi2 {
      background: url("@/assets/images/MenHU/hmcs@2x.png") no-repeat center;
      background-size: cover;
    }
  }
}

/*
    进入和离开动画可以使用不同
    持续时间和速度曲线。
  */
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  transform: translateY(80px);
  opacity: 0;
}
</style>