<template>
  <el-row
    class="top"
    element-loading-background="rgba(28,33,41,1)"
  >
    <el-col :span="6">
      <el-col :span="24" class="time">{{ date }}</el-col>
    </el-col>
    <el-col :span="12">
      <el-col :span="24" class="title">派米雷·佘山智地智慧园区</el-col>
    </el-col>
    <el-col :span="6">
      <el-col :span="24" class="logo">
        <el-image :src="`/assets/logo/logo.png`" fit="scale-down"> </el-image>
      </el-col>
      <el-col :span="24" class="weather" v-if="tq">
        <el-col :span="24" class="wd">
          {{ tq }} 
        </el-col>
        <el-col :span="24" class="tq">
          <el-image :src="weather_pic" > </el-image>
        </el-col>
        <el-col :span="24" class="wd">
          温度：{{ temperature }} ℃
        </el-col>
        <el-col :span="24" class="sd">
          湿度：{{ sd }}
        </el-col>
        <!-- <el-col :span="24" class="sd">
          pm2.5：{{weath}}ug/m3
        </el-col> -->
      </el-col>
    </el-col>
  </el-row>
</template>
<script setup>
import axios from 'axios'
const sd = ref(null)
const weather_pic = ref(null)
const temperature = ref(null)
const tq = ref(null)
const date = ref("");
function timeRun(){
  setInterval(function() {
    let myDate = new Date()
    let year = myDate.getFullYear() + '年'
    let month = myDate.getMonth() + 1 > 9 ? (myDate.getMonth() + 1) + '月' : '0' + (myDate.getMonth() + 1)  + '月'
    let day = myDate.getDate() > 9 ?  myDate.getDate() + '日' : '0' + myDate.getDate() + '日 '
    let s = myDate.getHours() > 9 ? myDate.getHours() : '0' + myDate.getHours()
    let f = myDate.getMinutes() > 9 ? myDate.getMinutes() : '0' + myDate.getMinutes()
    let m = myDate.getSeconds() > 9  ? myDate.getSeconds() : '0' + myDate.getSeconds()
    date.value = year + month + day + ' ' + s + ":" + f + ":" + m
  })
}
timeRun()

function weather(){
  axios({
    method: 'get',
    url: 'https://smartpark.caih.com/dxapi/aliWeather?area=上海',
    timeout: 3000,
  }).then(res =>{
      sd.value = res.data.showapi_res_body.now.sd
      temperature.value = res.data.showapi_res_body.now.temperature
      weather_pic.value = res.data.showapi_res_body.now.weather_pic
      tq.value = res.data.showapi_res_body.now.weather
  }).catch(err =>{
  })
}
weather()
setTimeout(()=>{
  weather()
},1000 * 60 * 30)
</script>
<style lang="scss" scoped>
@import "@/assets/styles/common.scss";
  .top {
    width: 100%;
    height: 50px;
    line-height: 50px;
    vertical-align: middle;
    position: fixed;
    left:0;
    z-index: 10;
    overflow: hidden;
    background-color:  rgba(0, 0, 0, 0.4);;
    .time {
      font-size: 16px;
      color: $white;
      margin-left:10px;
    }
    .title {
      width:100%;
      font-size: 28px;
      font-weight: 700;
      letter-spacing: 2.22px;
      text-align: center;
      background: linear-gradient(to bottom, #fff, #000);
        -webkit-background-clip: text;
        color: transparent;
    }
    .logo {
      float: right;
      position: fixed;
      right:10px;
      width:45px;
      margin-top:5px;
    }
    .weather{
      margin-left:30%;
      .tq{
        width:25px;
        vertical-align: middle;
        margin:12px 10px 0 10px;
      }
      .sd{
        margin:0 20px;
      }
    }
  }

</style>

