<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)">{{
          item
        }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";
const emits = defineEmits(["replySent"]);

defineProps({
  itemList: {
    type: Array,
    default: [
      "定温泉票",
      "定酒店",
      "优惠套餐",
      "亲子玩法",
      "了解交通",
      "看看酒店",
      "看看美食",
    ],
  },
});

const sendReply = (text) => {
  emits("replySent", text); // 向父组件传递数据
};
</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;
    padding-bottom: 12px;
    box-sizing: border-box;
  }

  .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>
