import { onMounted, ref } from 'vue'
import { getWeather } from '@/http/api'

interface Weather {
  icon?: string
  status?: string
}

export const useWeather = () => {
  const weatherRef = ref<Weather>({})
  const iconRef = ref({})

  function _getWeather() {
    getWeather()
      .then(res => {
        const { data } = res
        weatherRef.value = data as Weather
        weatherIcon()
      })
      .catch(err => {
        console.log('err: ', err)
      })
  }

  function weatherIcon() {
    const status = [
      { icon: 'icon-qingtian', status: '晴' },
      { icon: 'icon-duoyun', status: '云' },
      { icon: 'icon-xiaoyu', status: '雨' },
      { icon: 'icon-xiaoxue', status: '雪' },
      { icon: 'icon-duoyunzhuanyin', status: '阴' }
    ]
    iconRef.value = status.filter(filterStatus)?.[0] ?? status[0]
  }

  function filterStatus(item: any) {
    return weatherRef.value?.status?.includes(item.status)
  }

  onMounted(_getWeather)
  return { weatherRef, iconRef }
}