<template>
  <div class="flex w-full">
    <div class="flex flex-col flex-1 min-width-0 mr-[12px]">
      <div class="flex flex-row items-center justify-between min-width-0">
        <span class="flex-1 min-width-0 text-[20px] font-semibold text-white truncate">
          {{ mainPageDataModel.welcomeContent }}
        </span>
        <!-- <span class="shrink-0 text-[20px] font-semibold text-white mt-[4px]">
          {{ weatherText }}
        </span> -->
      </div>

      <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />
    </div>

    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
      :displayWidth="spriteStyle.displayWidth" :fps="16" />
  </div>
</template>

<script setup>
import { defineProps, computed, onMounted, ref } from "vue";
import SpriteAnimator from "@/components/SpriteAnimator/index.vue";
import NoticeMessage from "../NoticeMessage/index.vue";
// import { getLocalWeather } from "@/api/home";

// const weatherText = ref('');

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

const initPageImages = computed(() => {
  return props.mainPageDataModel?.initPageImages || {};
});

const spriteStyle = computed(() => {
  const images = initPageImages.value;
  return {
    backgroundImageUrl: images.backgroundImageUrl,
    ipLargeImage: images.ipLargeImage,
    frameWidth: images.ipLargeImageWidth,
    frameHeight: images.ipLargeImageHeight,
    totalFrames: images.ipLargeTotalFrames,
    columns: images.ipLargeColumns,
    displayWidth: 105,
  };
});

// 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) => {
//   if (weatherTextMap[text]) return weatherTextMap[text];
//   if (text.includes("晴")) return "☀️";
//   if (text.includes("云")) return "☁️";
//   if (text.includes("雨")) return "🌧️";
//   if (text.includes("雷")) return "⛈️";
//   if (text.includes("雪")) return "🌨️";
//   if (text.includes("雾") || text.includes("霾")) return "😷";
//   if (text.includes("风")) return "🌬️";
//   if (text.includes("沙")) return "🌪️";
//   return "❓";
// }
//
// const weatherTextMap = {
//   // 晴 / 云
//   "晴": "☀️",
//   "少云": "🌤️",
//   "晴间多云": "⛅",
//   "多云": "☁️",
//   "阴": "☁️",
//
//   // 风
//   "有风": "🌬️",
//   "平静": "🍃",
//   "微风": "🌬️",
//   "和风": "🌬️",
//   "清风": "🌬️",
//   "强风/劲风": "💨",
//   "疾风": "💨",
//   "大风": "💨",
//   "烈风": "💨",
//   "风暴": "🌪️",
//   "狂爆风": "🌪️",
//   "飓风": "🌀",
//   "龙卷风": "🌪️",
//
//   // 雨
//   "阵雨": "🌦️",
//   "雷阵雨": "⛈️",
//   "雷阵雨并伴有冰雹": "⛈️",
//   "小雨": "🌧️",
//   "中雨": "🌧️",
//   "大雨": "🌧️",
//   "暴雨": "🌧️",
//   "大暴雨": "🌧️",
//   "特大暴雨": "🌧️",
//   "强阵雨": "🌦️",
//   "毛毛雨/细雨": "🌦️",
//
//   // 雪
//   "小雪": "🌨️",
//   "中雪": "🌨️",
//   "大雪": "❄️",
//   "暴雪": "❄️",
//   "雨夹雪": "🌨️",
//   "阵雪": "🌨️",
//
//   // 雾霾 / 沙尘
//   "雾": "🌁",          // 有能见度的雾（城市感）
//   "轻雾": "🌫️",        // 轻微雾气
//   "浓雾": "🌁",        // 更厚的雾（用城市雾更直观）
//   "大雾": "🌁",
//   "强浓雾": "🌁",
//   "特强浓雾": "🌁",
//
//   // 😷 霾（偏污染）
//   "霾": "😷",         // 直接表达空气差（用户感知最强）
//   "中度霾": "😷",
//   "重度霾": "🤢",     // 更严重一点
//   "严重霾": "☠️",     // 极端情况（视觉冲击强）
//
//   "扬沙": "🌪️",
//   "浮尘": "🌪️",
//   "沙尘暴": "🌪️",
//   "强沙尘暴": "🌪️",
//
//   // 特殊
//   "热": "🔥",
//   "冷": "🥶"
// };

</script>

<style scoped></style>
