<template>
  <el-card>
    <div class="weather-container" v-if="!isHistory">
      <div class="header">
        <div class="location">{{ weatherInfo.now.aqiDetail.area }}</div>
        <div class="date">{{ date }}</div>
      </div>
      <el-row :gutter="20" class="weather-details">
        <el-col :span="12">
          <div class="weather-item">
            <div class="icon-placeholder">
              <el-image style="width: 100%; height: 100%" :src="weatherInfo.f3.day_weather_pic" :fit="fit" />
            </div>
            <div class="weather-info">
              <div class="label">天气</div>
              <div class="value">{{ weatherInfo.f3.day_weather }}-{{ weatherInfo.f3.night_weather }}</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">日出日落</div>
              <div class="value">{{ weatherInfo.f3.sun_begin_end }}</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">湿度</div>
              <div class="value">{{ weatherInfo.now.sd }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">温度</div>
              <div class="value">{{ weatherInfo.f3.day_air_temperature }}℃-{{ weatherInfo.f3.night_air_temperature }}℃</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">风向</div>
              <div class="value">{{ weatherInfo.f3.day_wind_direction }}</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">风速</div>
              <div class="value">{{ weatherInfo.f3.day_wind_power }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="update-time">更新时间：{{ datetime }}</div>
    </div>

    <div class="weather-container" v-if="isHistory">
      <div class="header">
        <div class="location">{{ history.area }}</div>
        <div class="date">{{ history.time }}</div>
      </div>
      <el-row :gutter="20" class="weather-details">
        <el-col :span="12">
          <div class="weather-item">
            <div class="icon-placeholder">
              <!-- <el-image style="width: 100%; height: 100%" :src="weatherInfo.f3.day_weather_pic" :fit="fit" /> -->
            </div>
            <div class="weather-info">
              <div class="label">天气</div>
              <div class="value">{{ history.weather }}</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">日出日落</div>
              <div class="value">--</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">湿度</div>
              <div class="value">--</div>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">温度</div>
              <div class="value">{{ history.min_temperature }}℃-{{ history.max_temperature }}℃</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">风向</div>
              <div class="value">{{ history.wind_direction }}</div>
            </div>
          </div>
          <div class="weather-item">
            <div class="icon-placeholder"></div>
            <div class="weather-info">
              <div class="label">风速</div>
              <div class="value">{{ history.wind_power }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div class="update-time">更新时间：{{ datetime }}</div>
    </div>
  </el-card>
</template>

<script>
import { queryWeather,queryWeatherHistory } from "@/api/nh/nhcommon";
import { dateFormat } from '@/utils/date';

export default {
  name: 'WeatherComponent',
  props: {
    stationId: String,
    city: String,
    day: String
  },
  watch: {
    'city'() {
      console.log("===city=watch=" + this.city)
      this.initWeather();
    },
    'day'() {
      console.log("===day=watch=" + this.day)
      let today = dateFormat(new Date(),"yyyy-MM-dd");
      this.isHistory = false;
      if(this.day.length==10 && this.day < today){
        queryWeatherHistory(this.stationId,this.city,this.day).then(res=>{
          this.history = res.data.data;
          
          if(Object.keys(this.history).length>0){
            this.isHistory = true;
          }else{
            this.initWeather();
          }
        
      })
      }
      
    }
  },
  data() {
    return {
      datetime: "",
      date:"",
      history:{},
      isHistory: false,
      weatherInfo: {"now":{"temperature_time":"22:30","rain":"0.0","sd":"76%","aqi":"47","temperature":"21","weather":"多云","wind_direction":"东南风","aqiDetail":{"area":"合肥","no2":"35","o3":"101","num":"255","so2":"7","pm2_5":"22","aqi":"47","pm10":"53","primary_pollutant":"","co":"0.6","quality":"优质","o3_8h":"112"},"weather_pic":"http://app1.showapi.com/weather/icon/night/01.png","wind_power":"1级","weather_code":"01"},"cityInfo":{"c11":"0551","c10":"1","c12":"230000","c15":"37","latitude":31.861,"c17":"+8","c16":"AZ9551","c0":"340100","c1":"101220101","c2":"hefei","c3":"合肥","c4":"hefei","c5":"合肥","c6":"anhui","c7":"安徽","c8":"china","c9":"中国","longitude":117.275},"remark":"","time":"20240602180000","f1":{"jiangshui":"25%","air_press":"1009.1 hPa","night_wind_direction":"东风","weekday":7,"night_weather_pic":"http://app1.showapi.com/weather/icon/night/02.png","night_air_temperature":"18","night_weather_code":"02","day_weather_code":"02","night_weather":"阴","ziwaixian":"最弱","day_wind_power":"3-4级 5.5~7.9m/s","day_weather":"阴","day_wind_direction":"东南风","day_weather_pic":"http://app1.showapi.com/weather/icon/day/02.png","day_air_temperature":"26","night_wind_power":"0-3级 <5.4m/s","sun_begin_end":"05:05|19:12","day":"20240602"},"f2":{"jiangshui":"12%","air_press":"1009.1 hPa","night_wind_direction":"东风","weekday":1,"night_weather_pic":"http://app1.showapi.com/weather/icon/night/02.png","night_air_temperature":"19","night_weather_code":"02","day_weather_code":"01","night_weather":"阴","ziwaixian":"中等","day_wind_power":"0-3级 <5.4m/s","day_weather":"多云","day_wind_direction":"南风","day_weather_pic":"http://app1.showapi.com/weather/icon/day/01.png","day_air_temperature":"31","night_wind_power":"3-4级 5.5~7.9m/s","sun_begin_end":"05:05|19:12","day":"20240603"},"f3":{"jiangshui":"21%","air_press":"1011.1 hPa","night_wind_direction":"东风","weekday":2,"night_weather_pic":"http://app1.showapi.com/weather/icon/night/02.png","night_air_temperature":"20","night_weather_code":"02","day_weather_code":"02","night_weather":"阴","ziwaixian":"最弱","day_wind_power":"3-4级 5.5~7.9m/s","day_weather":"阴","day_wind_direction":"东风","day_weather_pic":"http://app1.showapi.com/weather/icon/day/02.png","day_air_temperature":"29","night_wind_power":"3-4级 5.5~7.9m/s","sun_begin_end":"05:05|19:13","day":"20240604"},"ret_code":0}
    }
  },
  mounted() {
    this.date = dateFormat(new Date(),"yyyy年MM月dd日");
    this.datetime = dateFormat(new Date());
    this.initWeather();
  },
  methods: {
    initWeather() {
      //初始化天气
      console.log("====queryWeather===" + this.stationId)
      queryWeather(this.stationId,this.city).then(res => {
        this.weatherInfo = res.data.data;
      });
    },

  }
}
</script>

<style scoped>
.weather-container {
  font-family: Arial, sans-serif;
  color: #606266;
  height: 280px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.location {
  font-size: 18px;
  font-weight: bold;
}

.date {
  font-size: 14px;
  color: #909399;
}

.weather-details {
  display: flex;
}

.weather-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon-placeholder {
  width: 32px;
  height: 32px;
  /* background-color: #e0e0e0; */
  margin-right: 10px;
  border-radius: 50%;
}

.weather-info {
  display: flex;
  flex-direction: column;
}

.label {
  font-size: 14px;
  color: #909399;
}

.value {
  font-size: 16px;
  font-weight: bold;
}

.update-time {
  font-size: 12px;
  color: #909399;
  text-align: right;
  margin-top: 10px;
}
</style>