<template>
  <view class="home-welcome-panel">
    <view class="home-welcome-header">
      <text class="home-welcome-title ellipsis-1">
        {{ props.mainPageDataModel.welcomeContent || "小七欢迎你～" }}
      </text>
      <text v-if="weatherText" class="home-welcome-weather">
        {{ weatherText }}
      </text>
    </view>

    <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
  </view>
</template>
<script setup>
import { onMounted, ref } from "vue";
import NoticeMessage from "../NoticeMessage/index.vue";
import { getLocalWeather } from "@/request/api/MainPageDataApi";

const weatherText = ref("");

const props = defineProps({
  mainPageDataModel: {
    type: Object,
    default: () => {
      return {
        initPageImages: {
          backgroundImageUrl: "",
          logoImageUrl: "",
          welcomeImageUrl: "",
        }
      };
    },
  },
});

const getLocalWeatherData = async () => {
  const res = await getLocalWeather();
  if (res && res.code === 0) {
    const { temperature, weather } = res.data;
    weatherText.value = `${temperature}°C ${getWeatherEmoji(weather)}`;
  }
}

onMounted(() => {
  getLocalWeatherData();
});

const getWeatherEmoji = (text) => {
  const weather = String(text || "");
  if (weatherTextMap[weather]) return weatherTextMap[weather];
  if (weather.includes("晴")) return "☀️";
  if (weather.includes("云")) return "☁️";
  if (weather.includes("雨")) return "🌧️";
  if (weather.includes("雷")) return "⛈️";
  if (weather.includes("雪")) return "🌨️";
  if (weather.includes("雾") || weather.includes("霾")) return "😷";
  if (weather.includes("风")) return "🌬️";
  if (weather.includes("沙")) return "🌪️";
  return "❓";
}

const weatherTextMap = {
  // 晴 / 云
  "晴": "☀️",
  "少云": "🌤️",
  "晴间多云": "⛅",
  "多云": "☁️",
  "阴": "☁️",

  // 风
  "有风": "🌬️",
  "平静": "🍃",
  "微风": "🌬️",
  "和风": "🌬️",
  "清风": "🌬️",
  "强风/劲风": "💨",
  "疾风": "💨",
  "大风": "💨",
  "烈风": "💨",
  "风暴": "🌪️",
  "狂爆风": "🌪️",
  "飓风": "🌀",
  "龙卷风": "🌪️",

  // 雨
  "阵雨": "🌦️",
  "雷阵雨": "⛈️",
  "雷阵雨并伴有冰雹": "⛈️",
  "小雨": "🌧️",
  "中雨": "🌧️",
  "大雨": "🌧️",
  "暴雨": "🌧️",
  "大暴雨": "🌧️",
  "特大暴雨": "🌧️",
  "强阵雨": "🌦️",
  "毛毛雨/细雨": "🌦️",

  // 雪
  "小雪": "🌨️",
  "中雪": "🌨️",
  "大雪": "❄️",
  "暴雪": "❄️",
  "雨夹雪": "🌨️",
  "阵雪": "🌨️",

  // 雾霾 / 沙尘
  "雾": "🌁",          // 有能见度的雾（城市感）
  "轻雾": "🌫️",        // 轻微雾气
  "浓雾": "🌁",        // 更厚的雾（用城市雾更直观）
  "大雾": "🌁",
  "强浓雾": "🌁",
  "特强浓雾": "🌁",

  // 😷 霾（偏污染）
  "霾": "😷",         // 直接表达空气差（用户感知最强）
  "中度霾": "😷",
  "重度霾": "🤢",     // 更严重一点
  "严重霾": "☠️",     // 极端情况（视觉冲击强）

  "扬沙": "🌪️",
  "浮尘": "🌪️",
  "沙尘暴": "🌪️",
  "强沙尘暴": "🌪️",

  // 特殊
  "热": "🔥",
  "冷": "🥶"
};

</script>

<style lang="scss" scoped>
.home-welcome-panel {
  width: 100%;
  height: 92px;
  padding: 12px 12px 0;
  box-sizing: border-box;
  background: $theme-color-50;
}

.home-welcome-header {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.home-welcome-title {
  flex: 1;
  min-width: 0;
  color: $text-color-900;
  font-size: 21px;
  line-height: 28px;
  font-weight: 900;
}

.home-welcome-weather {
  flex-shrink: 0;
  margin-left: 12px;
  color: $text-color-900;
  font-size: 22px;
  line-height: 26px;
  font-weight: 900;
}
</style>
