<template>
  <div class="MainLayout">
    <div class="main-title">{{title}}</div>
    <div class="main-left">
      <!--  天气    -->
      <div v-show="isHome" class="main-home">天气</div>
      <!--  返回首页    -->
      <div v-show="!isHome" class="main-back" @click="back">首页</div>
    </div>
    <div class="main-right">
      <!-- 时间     -->
      <div v-show="isHome" class="main-time">{{currentTime}}</div>
      <!--  天气    -->
      <div v-show="!isHome" class="main-home">天气</div>
    </div>
    <div class="main-bottom">青莲食品</div>
    <div class="content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainLayout",
  data() {
    return {
      title: '',
      isHome: true,
      currentTime: '',
      timer4: null
    }
  },
  watch: {
    $route(newVal) {
      if(newVal) {
        this.title = newVal.meta.title;
        if (newVal.name === 'Home') {
          this.isHome = true;
          this.initTime();
        } else {
          this.isHome = false;
          clearInterval(this.timer4);
        }
      }
    }
  },
  methods: {
    initTime() {
      var _this = this;
      this.timer4 = setInterval(function() {
        var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var hour = date.getHours();
        var minutes = date.getMinutes() ;
        var seconds = date.getSeconds();
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        if(hour >=1&& hour <= 9) {
          hour = "0" + hour;
        }
        if(minutes >=1&& minutes <= 9) {
          minutes = "0" + minutes;
        }
        if(seconds >=1&& seconds <= 9) {
          seconds = "0" + seconds;
        }
        _this.currentTime = year + '-' + month + '-' + strDate+"  "+hour+":" +minutes+":" +seconds;
      }, 1000)
    },
    back() {
      this.$router.push('/')
    }
  },
  mounted() {
    this.title = this.$route.meta.title;
    if (this.$route.name === 'Home') {
      this.isHome = true;
      this.initTime();
    } else {
      this.isHome = false;
      if(this.timer4) {
        clearInterval(this.timer4)
      }
    }
  }
}
</script>

<style scoped>
  .MainLayout {
    width: 100vw;
    height: 100vh;
    background: url("../assets/u1.jpg") no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 20px 20px;
    position: relative;
  }
  .content {
    width: 100%;
    height: 100%;
    background: url('../assets/home.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 70px 60px;
  }
  .main-title {
    width: 230px;
    height: 52px;
    line-height: 52px;
    position: absolute;
    top: 25px;
    left: 50.5%;
    text-align: center;
    transform: translate(-50%, 0);
    color: #66FFFF;
    font-size: 18px;
    font-weight: 600;
  }
  .main-left {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 15px;
    left: 150px;
  }
  .main-right {
    width: 180px;
    height: 40px;
    position: absolute;
    top: 15px;
    right: 150px;
  }
  .main-home {
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: white;
  }
  .main-time {
    width: 100%;
    height: 100%;
    line-height: 50px;
    font-size: 16px;
    color: #289882
  }
  .main-bottom {
    width: 200px;
    height: 50px;
    /*background-color: red;*/
    position: absolute;
    line-height: 50px;
    color: #66FFFF;
    font-size: 24px;
    font-weight: 600;
    left: 51%;
    bottom: 35px;
    transform: translate(-50% , 0);
  }
  .main-back {
    width: 180px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
    background: url("../assets/Home/u761.svg") no-repeat;
    background-size: 100% 100%;
    color: white;
    cursor: pointer;
  }
</style>