<template>
  <div class="csdn-datav">
    <div class="csdn-datav-header">
      <div class="time">
        <p>
          {{ time.hour > 9 ? time.hour : "0" + time.hour }}:{{
            time.min > 9 ? time.min : "0" + time.min
          }}:{{ time.seconds > 9 ? time.seconds : "0" + time.seconds }}
        </p>
        <dl>
          <dd>{{ time.days }}</dd>
          <dt>
            {{ time.year }}-{{
              time.month > 9 ? time.month : "0" + time.month
            }}-{{ time.day > 9 ? time.day : "0" + time.day }}
          </dt>
        </dl>
      </div>
      <div class="title">
        {{ this.$route.meta.name }}
      </div>
      <div class="nav">
        <div class="nav-box"><span class="nav-img"></span> 导航
          <div class="nav-list">
          <router-link
            v-for="(it, index) in routerList"
            :key="index"
            tag="p"
            :to="it.path"
            >{{ it.meta.navTitle }}</router-link
          >
        </div>
        </div>
        
      </div>
    </div>
    <div class="csdn-datav-body">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      routerList: [],
      time: {
        year: '',
        month: '',
        day: '',
        hour: '',
        min: '',
        seconds: '',
        days: '',
      }
    }
  },
  methods: {
    getCurrentDate() {

      var myDate = new Date();

      var year = myDate.getFullYear(); //年

      var month = myDate.getMonth() + 1; //月

      var day = myDate.getDate(); //日

      var hour = myDate.getHours(); //时

      var min = myDate.getMinutes(); //分

      var seconds = myDate.getSeconds(); //秒

      var days = myDate.getDay();

      switch (days) {

        case 1:

          days = '星期一';

          break;

        case 2:

          days = '星期二';

          break;

        case 3:

          days = '星期三';

          break;

        case 4:

          days = '星期四';

          break;

        case 5:

          days = '星期五';

          break;

        case 6:

          days = '星期六';

          break;

        case 0:
          days = '星期日';

          break;
      }
      this.time = {
        year,
        month,
        day,
        hour,
        min,
        seconds,
        days,
      }
    }
  },
  created(){
    this.getCurrentDate()
  },
  mounted() {
    this.routerList = this.$router.options.routes.find(it => it.name === 'pcmap').children.filter(it => it.meta)
    setInterval(() => {
      this.getCurrentDate()
    }, 1000)
  }
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html,
body,
.app {
  width: 100%;
  height: 100%;
}
.csdn-datav {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #111b33;
    background-image: url("@/assets/img/map-back.png");
    background-size: cover;
  .csdn-datav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #77c0ff;
    // padding: 0 30px;
    height: 64px;
    .nav {
      display: flex;
      height: 100%;
      background: #1E2F56;
      min-width: 100px;
      flex: 1;
      align-items: center;
      justify-content: end;
      border-bottom: 1px solid #375A87;
      padding-right: 40px;
      .nav-list {
        display: none;
        position: absolute;
        top: 50px;
        width: 120px;
        height: 100px;
        left: -34px;
        background: #1b2b4f;
        border: 2px solid #365a87;
        z-index: 10;
        p {
          font-size: 16px;
          font-weight: 500;
          color: #77c0ff;
          height: 44px;
          width: 100%;
          line-height: 44px;
          text-align: center;
          &:hover {
            background: #2e4974;
          }
        }
      }
      .nav-box{
        display: flex;
        align-items: center;
        position: relative;
        height: 100%;
        cursor: pointer;
        &:hover {
        .nav-list {
          display: block;
        }
        span {
          color: #77c0ff;
        }
        .nav-img {
          background: url("@/assets/img/nav-hover.png");
          background-size: cover;
        }
      }
      }
      .nav-img {
        width: 14px;
        height: 16px;
        background: url("@/assets/img/nav.png");
        background-size: cover;
        margin-right: 4px;
      }
    }
    .time {
      padding-left: 40px;
      min-width: 330px;
      background: #1E2F56;
      border-bottom: 1px solid #375A87;
      flex: 1;
      font-size: 36px;
      font-weight: 500;
      display: flex;
      height: 100%;
      align-items: center;
      p {
        width: 150px;
      }
      dl {
        font-size: 14px;
        font-weight: 400;
        margin-left: 16px;
      }
    }
    .title{
      // flex: 1;
      width:890px;
      text-align: center;
      background-image: url("@/assets/img/nav-bak.png");
      background-size: cover;
      height: 100%;
      line-height: 64px;
    }
  }
  .csdn-datav-body {
    flex: 1;
    
    overflow: auto;
  }
}
</style>