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

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

  <!-- 联系方式 -->
  <div class="bg-white rounded-12 overflow-hidden">
    <div
      class="border-box border-bottom font-size-16 font-500 color-000 line-height-24 p-12"
    >
      联系方式
    </div>
    <div class="flex flex-items-center border-box p-12">
      <div class="font-size-14 font-500 color-525866 mr-12">联系人姓名</div>
      <div 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"
        />
      </div>
    </div>

    <div class="flex flex-items-center border-box p-12">
      <div class="font-size-14 font-500 color-525866 mr-12">手机号码</div>
      <div 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"
        />
      </div>
    </div>
  </div>
</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>
