<template>
  <div class="weather">
    <div id="scan" class="weather-icon"></div>
    <span class="weather-text">
      {{weatherList.wea}}&nbsp;{{weatherList.tem_night}}℃~{{weatherList.tem_day}}℃&nbsp;&nbsp;风速:{{weatherList.win_meter}}
     &nbsp;风向:{{weatherList.win}}
    </span>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "WeatherData",
  data(){
    return{
      cityid: '',
      weatherList: {},
    }
  },
  props:['filiale'],
  ready(){
    this.serchWeather()
    setInterval(() => {
      this.serchWeather()
    }, 28800000)
    console.log("ssss"+JSON.stringify(this.filiale))

  },
  methods: {
    serchWeather(){
      // 调用天气接口
      axios.get('https://www.tianqiapi.com/free/day?appid=85841439&appsecret=EKCDLT4I&cityid=' + this.cityid)
        .then((response) => {
          console.log("天气"+JSON.stringify(response.data))
          this.weatherList = response.data
          console.log("22222"+JSON.stringify(this.weatherList))
        })
    }
  },

  watch: {
    'weatherList.wea':{
      handler(val){
        if(val=='多云'||val=='阴转多云'){
          document.getElementById('scan').style.backgroundImage = 'url("../../../../static/images/zhongyi/cloudy.png")'
        }if(val=='晴'){
          document.getElementById('scan').style.backgroundImage = 'url("../../../../static/images/zhongyi/天气-晴.png")'
        }if(val=='霾'){
          document.getElementById('scan').style.backgroundImage = 'url("../../../../static/images/zhongyi/雾.png")'
        }if(val=='暴雨'){
          document.getElementById('scan').style.backgroundImage = 'url("../../../../static/images/zhongyi/暴雨到大暴雨.png")'
        }
        this.serchWeather()
        console.log('f_orgname==>',val)
      },
      immediate: true
    },
    'filiale': {
      handler(val){
        if(val=='山东彤运天燃气有限公司'||val=='临邑中邑燃气有限公司'){
          this.cityid=101120401
        }if(val=='夏津中邑燃气有限公司'){
          this.cityid=101120410
        }if(val=='庆云浩通天燃气有限公司'){
          this.cityid=101120407
        }if(val=='山东中邑燃气有限公司'){
          this.cityid=101120409
        }
        this.serchWeather()
        console.log('f_orgname==>',val)
      },
      immediate: true
    }

  }
}
</script>

<style scoped>
.weather {
  width: 24.021vw;
  height: 2.222vh;
  position: absolute;
  top: 0.926vh;
  left: 1.604vw;
  display: flex;
}

.weather-icon {
  width: 1.667vw;
  height: 2.037vh;
  background-image: url("../../../../static/images/zhongyi/cloudy.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  margin-top: 0.278vh;

}

.weather-text {
  font-family: alhy;
  font-size: 1.9vh;
  font-weight: 400;
  color: #C3DEFF;
  line-height: 3.333vh;
}
</style>
