<template>
  <section style="padding: 4px 12px" class="flex items-center gap-8px">
    <Icon :icon="weatherInfo.icon" :size="32" />
    <section>{{ weatherInfo.dayWeather }}</section>
    <section> {{ weatherInfo.nightTemp }}℃ ~ {{ weatherInfo.dayTemp }}℃</section>
    <section>{{ weatherInfo.dayWindDir }} {{ weatherInfo.dayWindPower }}级</section>
  </section>
</template>

<script setup lang="ts">
const weatherInfo: any = ref({})
const AMap = (window as any).AMap

const init = () => {
  AMap.plugin('AMap.Weather', function () {
    const weather = new AMap.Weather()
    weather.getForecast('锦州市', (err, data) => {
      weatherInfo.value = data.forecasts[0]
      weatherInfo.value.icon = setIcon(weatherInfo.value.dayWeather)

    })
  })
}

const setIcon = (weather: any) => {
  if (['平静', '晴'].includes(weather)) return 'svg-icon:weather-qing'
  if (weather.includes('雨')) return 'svg-icon:weather-yu'
  if (weather.includes('雪')) return 'svg-icon:weather-xue'
  if (['阴天', '多云'].includes(weather)) return 'svg-icon:weather-yin'
  if (weather.includes('风')) return 'svg-icon:weather-feng'
  return 'svg-icon:weather-yin'
}
init()
</script>

<style scoped lang="scss"></style>
