<template>
  <div class="current-weather" v-if="state.weather?.current">{{ state.weather.current }}</div>
  <template v-if="state.weather?.hourly?.length">
    <div class="forecast-title">24小时预报</div>
    <div class="weather-forecast">
      <div class="forecast-item" v-for="item in state.weather.hourly" :key="item.time">
        <div class="forecast-time">{{ item.time }}</div>
        <div class="forecast-icon">{{ item.icon }}</div>
        <div class="forecast-temp">{{ item.temp }}</div>
        <div class="forecast-pop" v-if="item.pop && item.pop !== '0'">{{ item.pop }}%</div>
      </div>
    </div>
  </template>
  <template v-if="state.weather?.daily?.length">
    <div class="forecast-title" style="margin-top:12px">7日预报</div>
    <div class="daily-forecast">
      <div class="daily-item" v-for="item in state.weather.daily" :key="item.date">
        <div style="opacity:0.6;font-size:10px">{{ item.date }}</div>
        <div class="daily-icon">{{ item.icon }}</div>
        <div class="forecast-temp">{{ item.tempMin }}°~{{ item.tempMax }}°</div>
      </div>
    </div>
  </template>
</template>

<script setup lang="ts">
import { state } from '../composables/useOverlayState'
</script>

<style scoped>
.current-weather {
  font-size: 17px; font-weight: 600;
  color: var(--text-main);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  margin-bottom: 16px;
  text-align: right;
}
.forecast-title {
  font-size: 11px; font-weight: 600;
  color: var(--text-faint);
  letter-spacing: 0;
  margin-bottom: 9px;
  text-align: right;
}
.weather-forecast {
  display: grid;
  grid-template-columns: repeat(8, minmax(60px, 1fr));
  gap: 7px; overflow: hidden;
}
.forecast-item {
  background: rgba(255,255,255,0.055);
  border-radius: 8px; padding: 9px 8px;
  text-align: center; min-width: 0;
  font-size: 12px; color: var(--text-main);
  border: 1px solid var(--card-line-soft);
}
.forecast-icon { font-size: 22px; margin: 5px 0; }
.forecast-time { color: var(--text-faint); font-size: 10px; }
.forecast-temp { font-weight: 700; margin-top: 2px; font-size: 14px; }
.forecast-pop { font-size: 10px; color: var(--text-faint); margin-top: 2px; }
.daily-forecast {
  display: grid;
  grid-template-columns: repeat(7, minmax(64px, 1fr));
  gap: 7px; overflow: hidden;
}
.daily-item {
  background: rgba(255,255,255,0.04);
  border-radius: 8px; padding: 9px 8px;
  text-align: center; min-width: 0;
  font-size: 12px; color: var(--text-main);
  border: 1px solid var(--card-line-soft);
}
.daily-icon { font-size: 22px; margin: 5px 0; }
.weather-forecast::-webkit-scrollbar,
.daily-forecast::-webkit-scrollbar { display: none; }
@media (max-width: 1500px) {
  .weather-forecast { grid-template-columns: repeat(4, 1fr); }
  .daily-forecast { grid-template-columns: repeat(4, 1fr); }
}
</style>
