<!--
 * @Description: 天气组件，调用了高德地图的api
 * @Author: 王晓颖
 * @Date: 2020-08-08 16:39:18
 -->
<template>
  <div class="topWeather">
    <ul class="weather-ul" v-if="weatherInfo.length>0">
      <li class="weather-li" v-for="(day,i) in weatherInfo" :key="i">
        <!--只展示今天昨天数据-->
        <div v-if="i < days">
          <img :src="day.dayWeather | weatherFilter">
          {{i | daysFilter}}&nbsp;
          <!--夜间温度，日间温度-->
          <a class="gradient-text">{{day.nightTemp}}~{{day.dayTemp}}℃</a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import VueAMap from 'vue-amap'
import MapLoader from '@/utils/AMap.js'
VueAMap.initAMapApiLoader({
  key: '23bd4d69ec0930581a100b5a823d8f58',
  plugin: ['AMap.Geolocation', 'AMap.Geocoder'],
  v: '1.4.15',
  uiVersion: '1.0'
})
export default {
  name: 'weather',
  props: {
    city: {
      type: String,
      default: '赣州市'
    }, // 城市
    days: {
      type: Number,
      default: 2
    } // 显示几天数据
  },
  data () {
    return {
      weatherInfo: [] // 天气情况
    }
  },
  filters: {
    daysFilter (day) {
      switch (day) {
        case 0: return '今天'
        case 1: return '明天'
        case 2: return '后天'
        case 3: return '大后天'
      }
    },
    weatherFilter (wether) {
      switch (wether) {
        case '晴': return require(`@/assets/images/weather-qing.png`)
        case '多云': return require(`@/assets/images/weather-duoyun.png`)
        case '阴': return require(`@/assets/images/weather-yin.png`)
        case '雨': return require(`@/assets/images/weather-yu.png`)
        case '小雨': return require(`@/assets/images/weather-xiaoyu.png`)
        default: return require(`@/assets/images/weather-yin.png`)
      }
    }
  },
  created () {
    this.getWeather() // 获取天气
  },
  methods: {
    getWeather () {
      let that = this
      MapLoader().then(AMap => {
        // 加载天气查询插件
        AMap.plugin('AMap.Weather', () => {
          // 创建天气查询实例
          var weather = new AMap.Weather()
          // 执行实时天气信息查询
          weather.getForecast(this.city, (err, data) => {
            console.log(data)
            that.weatherInfo = data.forecasts
          })
        })
      }, e => {
        console.log('地图加载失败', e)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .topWeather{
    width: 2.2rem;
    .weather-ul{
      display: flex;
    }
    .weather-li{
      display: flex;
      align-items: center;
      font-size: .11rem;
      color:#FFF;
      margin-right: .05rem;
    }
    .weather-li img{
      width: .11rem;
      margin-right: .03rem;
    }
    .weather-li a{
      font-size: .11rem;
      font-weight: bolder;
    }
    .weather-li:last-child{
      margin-right: 0;
    }
  }
</style>