<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">
        <span>{{ this.$route.meta.name }}</span>
        <el-popover
          placement="bottom"
          popper-class="map-popover-pc"
          trigger="hover"
          v-model="visible">
          <div class="map-popover-box">
            {{popoverItem.desc}}
            <a :href="popoverItem.url" target="_blank">详情 ></a>
          </div>
          <img src="@/assets/img/question-pc.png" slot="reference" alt="">
        </el-popover>
      </div>
      <div class="nav">
        <div class="nav-box"><span class="nav-img"></span> 导航
          <div class="nav-list">
        <div  v-for="(it, index) in routerList"
            :key="index">
            <router-link
            v-if="it.meta"
            tag="p"
            :to="it.path"
            >{{ it.meta.navTitle }}</router-link>
            <a :href="it.url" v-else target="_blank">{{it.title}}</a>
        </div>
        </div>
        </div>
        
      </div>
    </div>
    <div class="csdn-datav-body">
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible:false,
      routerList: [],
      popoverList:[
        {
          key:'/fans',
          desc:'CSDN铁粉介绍以及说明',
          url:'https://bbs.csdn.net/topics/606708603'
        },
        {
          key:'/force',
          desc:'原力分数的增减原则',
          url:'https://bbs.csdn.net/topics/602534373'
        },
        {
          key:'/interest',
          desc:'技术兴趣分数的增减原则',
          url:'https://bbs.csdn.net/topics/602534373'
        }
      ],
      popoverItem:'',
      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,
      }
    }
  },
  beforeUpdate(){
    this.popoverItem = this.popoverList.find(it=>it.key === this.$route.path)
  },
  created(){
    this.getCurrentDate()
  },
  mounted() {
    this.popoverItem = this.popoverList.find(it=>it.key === this.$route.path)
    this.routerList = this.$router.options.routes.find(it => it.name === 'pcmap').children.filter(it => it.meta)
    this.routerList.push({
      title:'参与项目',
      url:'https://gitcode.net/csdn/csdn-datav'
    })
    setInterval(() => {
      this.getCurrentDate()
    }, 1000)
  }
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.map-popover-pc{
  background:#364366 ;
  border-color: #364366;
  margin-top: 20px !important;
  .popper__arrow,.popper__arrow::after{
    border-bottom-color: #364366 !important;
    // border-color: #364366 !important;
  }
  .map-popover-box{
    color: #fff;
    font-size: 14px;
    a{
      color: #77C0FF;
      font-size: 14px;
    }
  }
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.csdn-datav {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: #0B1224;
    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: 62px;
        width: 120px;
        // height: 100px;
        padding: 4px 0;
        left: -34px;
        background: #1b2b4f;
        border: 2px solid #365a87;
        z-index: 10;
        p,a {
          display: block;
          font-size: 16px;
          font-weight: 500;
          color: #77c0ff;
          height: 44px;
          width: 100%;
          line-height: 44px;
          text-align: center;
          &:hover,&.router-link-active {
            background: #141f38;
          }
        }
      }
      
      .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;
      display: flex;
      align-items: center;
      justify-content: center;

      img{
        width: 20px;
        height: 20px;
        margin-top: 26px;
        margin-left: 4px;
      }
    }
  }
  .csdn-datav-body {
    flex: 1;
    // overflow: auto;
  }
}
</style>