<template>
  <view class="top-bg-content">
    <view class="top-item">
      <!-- :style="backgroundStyle" -->
      <image
        class="top-item-left"
        :src="initPageImages.welcomeImageUrl"
        mode="aspectFit"
      ></image>
      <image
        class="top-item-right"
        :src="initPageImages.logoImageUrl"
        mode="aspectFit"
      ></image>
    </view>
    <ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
  </view>
</template>

<script setup>
import { defineProps, computed } from "vue";
import ChatCardAI from "../ChatCardAi/index.vue";

const props = defineProps({
  initPageImages: {
    type: Object,
    default: {
      backgroundImageUrl: "",
      logoImageUrl: "",
      welcomeImageUrl: "",
    },
  },
  welcomeContent: {
    type: String,
    default:
      "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
  },
});

// 计算背景样式
const backgroundStyle = computed(() => {
  return {
    backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
    backgroundSize: "cover",
    backgroundPosition: "center",
    backgroundRepeat: "no-repeat",
  };
});
</script>

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