<template>
    <div class="weather-icon">
        <img v-if="weather.indexOf('雷阵雨') > -1" src="../../assets/weather-icon/leizhenyu.png" :style="{width}" alt="雷阵雨" />

        <img v-else-if="weather.indexOf('暴雪') > -1" src="../../assets/weather-icon/baoxue.png" :style="{width}" alt="暴雪" />
        <img v-else-if="weather.indexOf('大雪') > -1" src="../../assets/weather-icon/daxue.png" :style="{width}" alt="大雪" />
        <img v-else-if="weather.indexOf('中雪') > -1" src="../../assets/weather-icon/zhongxue.png" :style="{width}" alt="中雪" />
        <img v-else-if="weather.indexOf('小雪') > -1" src="../../assets/weather-icon/xiaoxue.png" :style="{width}" alt="小雪" />
        <img v-else-if="weather.indexOf('阵雪') > -1" src="../../assets/weather-icon/zhenxue.png" :style="{width}" alt="阵雪" />
        <img v-else-if="weather.indexOf('雪') > -1" src="../../assets/weather-icon/xiaoxue.png" :style="{width}" alt="雪" />

        <img v-else-if="weather.indexOf('暴雨') > -1" src="../../assets/weather-icon/baoyu.png" :style="{width}" alt="暴雨" />
        <img v-else-if="weather.indexOf('大雨') > -1" src="../../assets/weather-icon/dayu.png" :style="{width}" alt="大雨" />
        <img v-else-if="weather.indexOf('中雨') > -1" src="../../assets/weather-icon/zhongyu.png" :style="{width}" alt="中雨" />
        <img v-else-if="weather.indexOf('小雨') > -1" src="../../assets/weather-icon/xiaoyu.png" :style="{width}" alt="小雨" />
        <img v-else-if="weather.indexOf('阵雨') > -1" src="../../assets/weather-icon/zhenyu.png" :style="{width}" alt="阵雨" />
        <img v-else-if="weather.indexOf('雨') > -1" src="../../assets/weather-icon/xiaoyu.png" :style="{width}" alt="雨" />

        <img v-else-if="weather.indexOf('多云') > -1" src="../../assets/weather-icon/duoyun.png" :style="{width}" alt="多云" />
        <img v-else-if="weather.indexOf('沙尘') > -1" src="../../assets/weather-icon/shachen.png" :style="{width}" alt="沙尘" />
        <img v-else-if="weather.indexOf('雾') > -1" src="../../assets/weather-icon/wu.png" :style="{width}" alt="雾" />
        <img v-else-if="weather.indexOf('扬沙') > -1" src="../../assets/weather-icon/yangsha.png" :style="{width}" alt="扬沙" />
        <img v-else-if="weather.indexOf('阴') > -1" src="../../assets/weather-icon/yin.png" :style="{width}" alt="阴" />


        <img v-else-if="weather.indexOf('晴') > -1" src="../../assets/weather-icon/tianqi-qing.png" :style="{width}" alt="晴" />
        <img v-else src="../../assets/weather-icon/wu.png" alt="" />
    </div>
</template>

<script>
export default {
    name: 'weatherIcon',

    props: {
        weather: {
            type: String,
            require: true
        },

        width: {
            type: String
        }
    },

    data() {
        return {
        }
   }
}
</script>

<style>
    img {
        width: 36px;
    }
</style>