<template>
  <div class="container2">
    <div class="left">
      <div class="hms">{{ hours }}</div>
      <div class="ymd">{{ currentDate }}</div>
    </div>
    <div class="right">
      <img :src="imgSrc" />
      <div class="text1">
        <div class="one">{{ text }}</div>
        <div class="two">{{ temperature }}</div>
        <!-- <div class="three">{{ city }}</div> -->
      </div>
    </div>
  </div>
</template>
  
<script>
import { getTianQi } from "@/api/tianqi";
export default {
  data() {
    return {
      // city: "",
      imgSrc: "",
      temperature: 0,
      text: "",
      hours: 0,
      currentDate: "",
    };
  },
  mounted() {
    this.getTianQi();
    this.getFormatDate();
    setInterval(() => {
      this.getFormatDate();
      // console.log('哈哈');
    }, 1000);
  },
  destroyed() {

  },
  methods: {
    async getTianQi() {
      let res = await getTianQi();
      // console.log(res.data.data);
      this.imgSrc = `http://www.wlcbsyzl.cn/bdata/assets/js/vendor/safety/weather/white/${res.data.data.code}@1x.png`;
      // this.city = res.data.data.city;
      this.temperature = res.data.data.temperature + "℃";
      this.text = res.data.data.text;
    },
    getFormatDate() {
      var date = new Date();
      let day = date.getDay();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      var hour = date.getHours();
      var minutes = date.getMinutes();
      var seconds = date.getSeconds();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      if (hour >= 0 && hour <= 9) {
        hour = "0" + hour;
      }
      if (minutes >= 0 && minutes <= 9) {
        minutes = "0" + minutes;
      } if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
      }
      var week;

      switch (day) {
        case 1:
          week = "周一";
          break;
        case 2:
          week = "周二";
          break;
        case 3:
          week = "周三";
          break;
        case 4:
          week = "周四";
          break;
        case 5:
          week = "周五";
          break;
        case 6:
          week = "周六";
          break;
        case 0:
          week = "周日";
          break;
      }

      this.currentDate = date.getFullYear() + "/" + month + "/" + strDate + "/" + week;
      this.hours = hour + ":" + minutes + ":" + seconds
    },
  },
};
</script>
  
<style scoped lang="scss">
.container2 {
  display: flex;
  width: 17.8646vw;
  height: 2.7956vh;

  /* background-color: #00ffff;  */
  /* border: 1px solid #00ffff;  */
  .hms {
    font-size: .5vw;
    color: #fff;
    font-weight: 700;
  }

  .ymd {
    font-size: .5vw;
    color: #fff;
  }

  .left {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .right {
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .text1 {
    display: flex;
    //   flex-direction: column;
    justify-content: space-around;
    align-items: center;
    /* font-size: 12px; */
    color: #fff;
  }

  img {
    width: 1.0417vw;
    height: 2.1505vh;
  }

  .one {
    font-size: 0.5208vw;
    font-weight: 700;
    margin-right: .4167vw;
  }

  .two {
    font-size: 0.5208vw;
  }

  // .three {
  //   font-size: 0.5208vw;
  // }
}
</style>