<template>
    <div :style="`width: ${width}px`" class="mauto">
      <img v-if="type == '晴'" src="@/assets/weather/01_sunny_color_w64.png"/>
      <img v-if="type == '多云'" src="@/assets/weather/04_sun_cloudy_color_w64.png"/>
      <img v-if="type == '阴'" src="@/assets/weather/03_cloud_color_w64.png"/>
      <img v-if="type == '小雨'" src="@/assets/weather/09_light_rain_color_w64.png"/>
      <img v-if="type == '中雨'" src="@/assets/weather/10_moderate_rain_color_w64.png"/>
      <img v-if="type == '大雨'" src="@/assets/weather/12_rainstorm_color_w64.png"/>
      <img v-if="type == '暴雨'" src="@/assets/weather/13_heavy_rainstorm_color_w64.png"/>
      <img v-if="type.indexOf('雷') > -1" src="@/assets/weather/14_thunderstorm_color_w64.png"/>
      <img v-if="type.indexOf('雾') > -1" src="@/assets/weather/15_fog_color_w64.png"/>
      <img v-if="type.indexOf('雪') > -1" src="@/assets/weather/22_snow_color_w64.png"/>
      <img v-if="type.indexOf('风') > -1" src="@/assets/weather/23_windy_color_w64.png"/>
    </div>
</template>

<script setup>
const props = defineProps({
  type: {
    type: String,
    default: '晴',
    required: false
  },
  width: {
    type: Number,
    default: 32,
    required: false
  }
})
</script>

<style scoped lang="scss">
  img{width: 100%}
</style>