<template>
  <header>
    <el-row class="headerRowBox">
      <el-col>{{ dateDay }}</el-col>
      <el-col class="time">{{ dataTime }}</el-col>
      <el-col class="weather">
        <!-- <img v-if="weatherObj.weather_pic" :src="weatherObj.weather_pic || ''" alt="" /> -->
        <!-- <span v-if="weatherObj.weather">{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span> -->
        <img :src="$store.state.weaterRes.weather_pic || ''" alt="" />
      </el-col>
      <el-col>{{$store.state.weaterRes.weather || ''}}{{$store.state.weaterRes.temperature || ''}}</el-col>
      <el-col>{{$store.state.weaterRes.wind_direction || ''}}{{$store.state.weaterRes.wind_power || ''}}</el-col>
      <el-col>PM2.5<span>{{$store.state.weaterRes.aqiDetail && $store.state.weaterRes.aqiDetail.pm2_5 || ''}}</span></el-col>
    </el-row>
    <el-row class="headerCenterBox">山东IOT物联网平台</el-row>
    <el-row class="headerRowBox"> 
      <el-col>空气质量：{{$store.state.weaterRes.aqi || ''}}</el-col>
      <el-col>相对湿度：{{$store.state.weaterRes.sd || ''}}</el-col>
    </el-row>
  </header>
</template>

<script>
export default {
  data() {
    return {
      dateDay: "",
      dataTime: "",
      timeArea: "",
      weatherObj: {},
      dataWeekList: ["一", "二", "三", "四", "五", "六", "七"],
    };
  },
  created() {},
  mounted() {
    this.getData();
    setInterval(() => {
      let day = new Date();
      this.dateDay =
        day.getFullYear() +
        "/" +
        (day.getMonth() + 1 < 10
          ? "0" + (day.getMonth() + 1)
          : "" + (day.getMonth() + 1)) +
        "/" +
        (day.getDate() < 10 ? "0" + day.getDate() : day.getDate());
      this.dataTime =
        (day.getHours() < 10 ? "0" + day.getHours() : day.getHours()) +
        ":" +
        (day.getMinutes() < 10 ? "0" + day.getMinutes() : day.getMinutes()) +
        ":" +
        (day.getSeconds() < 10 ? "0" + day.getSeconds() : day.getSeconds());
    }, 1000);
  },
  methods: {
    async getData() {

    },
    async getWeather() {
      let res = await this.$axios.get("/aliWeather");
      if (res.showapi_res_code === 0) {
        this.weatherObj = res.showapi_res_body.now;
      }
    },
  },
  };
</script>

<style lang="scss" scoped>
  header {
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    background: url("../../../assets/image/header.png");
    background-size: 100% 100%;
    font-size: 14px;
    box-sizing: border-box;
    .headerRowBox {
      width: 34%;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      height: 100%;
      &::before{
        display: none;
      }
      .el-col {
        flex: none;
        width: auto;
        height: auto;
        margin-right: 30px;
        span{
          font-size: 20px;
          color: #F6D311;
          margin-left: 10px;
        }
      }
      .time {
        margin-left: 10px;
      }
      .weather {
        display: flex;
        img {
          width: 28px;
          display: block;
        }
      }
    }
    .headerCenterBox{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #1e9dff;
      font-size: 30px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      text-align: center;
      color: #00e6ff;
      letter-spacing: 1px;
    }
    // .headerRightBox {
    //   width: 34%;
    //   display: flex;
    //   align-items: center;
    //   height: 100%;
    //   .el-col {
    //     flex: none;
    //     width: auto;
    //     height: auto;
    //     margin-right: 30px;
    //   }
    // }
  }
</style>