<template>
	<view class="more-tips">
		<view class="more-tips-scroll">
			<view class="more-tips-item" v-for="(item, index) in itemList" :key="index">
				<text class="more-tips-item-title" @click="sendReply(item.title)">{{ item.title }}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { onMounted, ref } from 'vue';
	const itemList = ref([])
	const emits = defineEmits(['replySent']);

	const sendReply = (text) => {
		emits('replySent', text); // 向父组件传递数据
	}
	
	onMounted(() => {
		initData()
	})
	
	const initData = () => {
		itemList.value = [
			{
				title: '定温泉票',
			},
			{
				title: '定酒店',
			},
			{
				title: '优惠套餐',
			},
			{
				title: '亲子玩法',
			},
			{
				title: '了解交通',
			},
			{
				title: '看看酒店',
			},
			{
				title: '看看美食',
			}
		] 
	}
	
</script>

<style lang="scss" scoped>
	.more-tips {
		width: 100%;
		
		&-scroll {
		    display: flex;
		    flex-direction: row;
		    overflow-x: auto;
		    white-space: nowrap;
		    -webkit-overflow-scrolling: touch; 
		    
		    /* 隐藏滚动条 */
		    scrollbar-width: none; 
		    &::-webkit-scrollbar {
		      display: none; 
		    }
		  }
		
		.more-tips-item {
			border-radius: 8px;
			margin: 4px;
			box-shadow: 0 2px 5px 0px rgba(0,0,0,0.1);
			background-color: #FFFFFF;
			padding: 2px 12px;
			display: flex; 
			flex-direction: column;
			min-width: 46px;
			
			&:first-child {
				margin-left: 12px;
			}
				
			&:last-child {
				margin-right: 12px;
			}
			
			.more-tips-item-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #00A6FF;
				line-height: 24px;
				text-align: center;
			}
		}
	}
</style>
