v
<template>
  <div class="p-3">
    <div class="bg-white/50 rounded-[20px]">
      <div class="flex items-center justify-between pl-3 pr-3">
        <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
          :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
          :displayWidth="spriteStyle.displayWidth" :fps="16" />
        <div class="welcome-text text-[14px] font-medium font-family-misans-vf text-[#171717] leading-[24px]">
          {{ welcomeContent }}
        </div>
      </div>

      <ChatMoreTips :guideWords="guideWords" />
    </div>
  </div>
</template>

<script setup>
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
import { getCurrentConfig } from "@/constants/base";
import ChatMoreTips from "../ChatMoreTips/index.vue";
import SpriteAnimator from "@/components/SpriteAnimator/index.vue";

const props = defineProps({
  mainPageDataModel: {
    type: Object,
    default: () => {
      return {
        initPageImages: {
          backgroundImageUrl: "",
          logoImageUrl: "",
          welcomeImageUrl: "",
        },
        welcomeContent:
          "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
        guideWords: [
          "定温泉票",
          "定酒店",
          "优惠套餐",
          "亲子玩法",
          "了解交通",
          "看看酒店",
          "看看美食",
        ],
      };
    },
  },
});

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

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

const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
const guideWords = computed(() => props.mainPageDataModel.guideWords);

// Welcome 可视状态与高度
const instance = getCurrentInstance();

// 测量欢迎区域高度
const measureWelcomeHeight = (callback) => {
  uni
    .createSelectorQuery()
    .in(instance)
    .select(".welcome-content")
    .boundingClientRect((res) => {
      if (res && res.height) {
        callback(res);
      }
    })
    .exec();
};

defineExpose({ measureWelcomeHeight });
</script>
