<template>
  <view class="welcome-content border-box p-12">
    <view class="wrap rounded-20">
      <view
        class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
      >
        <image
          class="ip relative"
          :src="initPageImages?.logoImageUrl"
          mode="aspectFit"
        />
        <view
          class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
        >
          {{ welcomeContent }}
        </view>
      </view>

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

<script setup>
import { defineProps, computed, getCurrentInstance, defineExpose } from "vue";
import ChatMoreTips from "../ChatMoreTips/index.vue";

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

const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
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>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
