<template>
  <view class="goods-info mb12">
    <view class="hotel-header">
      <image class="hotel-icon" src="./images/icon_house.png"></image>
      <text class="hotel-name">{{ orderData.commodityName }}</text>
    </view>
    <view class="goods-detail">
      <image class="goods-image" :src="orderData.commodityCoverPhoto"></image>
      <view class="goods-description">
        <text class="goods-title">{{ orderData.commodityName }}</text>
        <text class="goods-date">预定时间：{{ orderData.checkInData }}</text>
      </view>
    </view>
    <view class="included-services">
      <text class="services-title">包含服务</text>
      <view class="service-item">
        <text class="service-name">· 精致下午茶</text>
        <text class="service-quantity">1份</text>
      </view>
      <view class="service-item">
        <text class="service-name">· 接机或接站</text>
        <text class="service-quantity">1份</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps } from "vue";

defineProps({
  orderData: {
    type: Object,
    required: true,
    default: () => ({
      id: "",
      createTime: "",
      contactName: "",
      contactPhone: "",
      orderStatus: "0", // 订单状态 0-待支付 1-待确认 2-待使用 3-已取消 4-退款中 5-已退款 6-已完成
      orderType: undefined, // 0-酒店订单, 1-门票订单, 2-餐饮
    }),
  },
});
</script>

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