<template>
  <!-- 选择数量 -->
  <view
    class="border-box bg-white p-12 rounded-12 flex flex-items-center mb-12"
  >
    <view class="flex-full">
      <view class="font-size-16 font-500 color-000 line-height-24"
        >选择数量</view
      >
      <view class="font-size-12 color-A3A3A3 line-height-16">
        请选择套餐数量
      </view>
    </view>
    <view class="right">
      <Stepper v-model="count" />
    </view>
  </view>

   <!-- 使用日期 -->
  <UseDateRange 
    v-if="orderData.reservationEnabled" 
    :openDateRangeList="orderData.openDateRangeList"  
    v-model:selectedDate="reservationDate"
    />

  <!-- 联系方式 -->
  <view class="bg-white rounded-12 overflow-hidden">
    <view class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12">联系方式</view>
    <view class="flex flex-items-center border-box p-12">
      <view class="font-size-14 font-500 color-525866 mr-12"> 联系人姓名 </view>
      <view class="right">
        <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
          v-model.trim="userFormList[0].visitorName" placeholder="请输入联系人" maxlength="20" />
      </view>
    </view>

    <view class="flex flex-items-center border-box p-12">
      <view class="font-size-14 font-500 color-525866 mr-12"> 手机号码 </view>
      <view class="right">
        <input class="border-box px-4 py-2 font-size-15 color-000 line-height-20"
          v-model.trim="userFormList[0].contactPhone" placeholder="请输入联系手机" maxlength="11" />
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, defineProps } from "vue";
import Stepper from "@/components/Stepper/index.vue";
import UseDateRange from "@/components/UseDateRange/index.vue";

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1,
  },
  userFormList: {
    type: Array,
    default: () => [{ visitorName: "", contactPhone: "" }],
  },
  reservationDate: {
    type: String,
    default: null,
  },
  orderData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["update:modelValue", "update:reservationDate"]);
const count = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit("update:modelValue", val);
  },
});
const reservationDate = computed({
  get: () => props.reservationDate,
  set: (val) => {
    emit("update:reservationDate", val);
  },
});
</script>

<style></style>
