<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, ref } from "vue";
import ChatCardAI from "./ChatCardAI.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>
.top-bg-content {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  flex-direction: column;
}

.top-item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  margin-bottom: -6px;
}

.top-item-left {
  width: 118px;
  height: 52px;
}

.top-item-right {
  width: 130px;
  height: 130px;
}
</style>
