<template>
  <SvgIcon :name="skyIcon" />
</template>
<script>
import SvgIcon from "../svgIcon.vue";
export default {
  components: { SvgIcon },
  name: "WeatherIcon",
  props: {
    weather: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      skyconSvg: {
        CLEAR_DAY: "weather-clear-daytime",
        CLEAR_NIGHT: "weather-clear-night",
        PARTLY_CLOUDY_DAY: "weather-cloudy-daytime",
        PARTLY_CLOUDY_NIGHT: "weather-cloudy-night",
        CLOUDY: "weather-cloudy",
        LIGHT_HAZE: "weather-haze",
        MODERATE_HAZE: "weather-haze",
        HEAVY_HAZE: "weather-haze",
        LIGHT_RAIN: "weather-rain",
        MODERATE_RAIN: "weather-rain",
        HEAVY_RAIN: "weather-rain",
        STORM_RAIN: "weather-rain",
        FOG: "weather-fog",
        LIGHT_SNOW: "weather-snow",
        MODERATE_SNOW: "weather-snow",
        HEAVY_SNOW: "weather-snow",
        STORM_SNOW: "weather-snow",
        DUST: "weather-dust",
        SAND: "weather-sand",
        WIND: "weather-gale",
        // 雷阵雨: "weather-thunder-shower",
        // 冰雹: "weather-hail",
        // 雨夹雪: "weather-sleet",
      },
    };
  },
  computed: {
    skyIcon() {
      return this.skyconSvg[this.weather];
    },
  },
};
</script>
