<template>
	<view class="top-bg-content">
		<view class="top-item1" > 
			<!-- :style="backgroundStyle" -->
			<view class="top-item1-left">
				<image :src="initPageImages.welcomeImageUrl"></image>
				<text>{{ currentDate }} 多云 -3～6℃ gg </text>						  
			</view>
			<view class="top-item1-right">
				<image :src="initPageImages.logoImageUrl"></image>
			</view>			  			  
		</view>
		<ChatCardAI :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: '/static/hello_banner_icon@2x.png',
			welcomeImageUrl: '/static/hello_banner_bg@2x.png'
		}
	  },
	  welcomeContent: {
		  type: String,
		  default: '查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!'
	  }
	})

	// 获取当前日期
	const today = new Date();
	const currentDate = ref(today.getFullYear() + '/' + 
							((today.getMonth() + 1) < 10 ? '0' : '') + (today.getMonth() + 1) + '/' + 
							(today.getDate() < 10 ? '0' : '') + today.getDate());


	// 计算背景样式
	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-item1 {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 0 32px 0 32px;
		margin-bottom: -6px;

		.top-item1-left {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			
			image {
				width: 118px;
				height: 52px;
			}
			text {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 12px;
				color: #1E4C69;
				line-height: 24px;
				text-align: justify;
				font-style: normal;
				text-transform: none;
			}
		}
		
		.top-item1-right {
			image {
				width: 130px;
				height: 130px;
				margin-bottom: -20px;
			}
		}
	}
</style>