<template>
  <!-- 选择数量 -->
  <div class=" bg-white p-[12px] rounded-[12px] flex items-center mb-[12px]">
    <div class="flex-1">
      <div class="text-[16px] font-medium text-black leading-[24px]">{{ t("booking.contact.quantity") }}</div>
      <div class="text-[12px] color-A3A3A3 leading-[16px]">{{ t("booking.contact.quantityHint") }}</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-[12px] overflow-hidden">
    <div class=" border-b border-ink-200 text-[16px] font-medium text-black leading-[24px] p-[12px]">
      {{ t("booking.contact.contactInfo") }}
    </div>
    <div class="flex items-center  p-[12px]">
      <div class="text-[14px] font-medium text-ink-600 mr-[12px]">{{ t("booking.contact.contactName") }}</div>
      <div class="right">
        <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].visitorName"
          :placeholder="t('booking.contact.contactNamePlaceholder')" maxlength="20" />
      </div>
    </div>

    <div class="flex items-center  p-[12px]">
      <div class="text-[14px] font-medium text-ink-600 mr-[12px]">{{ t("booking.contact.phone") }}</div>
      <div class="right">
        <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="userFormList[0].contactPhone"
          :placeholder="t('booking.contact.phonePlaceholder')" maxlength="11" />
      </div>
    </div>
  </div>
</template>

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

const { t } = useI18n();

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>
