<template>
  <view class="flex border-box w-full">
    <view class="flex flex-col flex-full min-width-0 mr-12">
      <view class="flex flex-row flex-items-center flex-justify-between min-width-0">
        <text class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{ mainPageDataModel.welcomeContent }}</text>
        <text class="flex-shrink-0 font-size-20 font-500 color-white mt-4"> {{ weatherText }} </text>
      </view>

      <NoticeMessage :sceneName="props.mainPageDataModel.sceneName" />
    </view>

    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
      :displayWidth="spriteStyle.displayWidth" :fps="16" />
  </view>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { defineProps, computed } from "vue";
import SpriteAnimator from "@/components/Sprite/SpriteAnimator.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 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>
