<template>
  <div class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
    <div class="flex items-center  p-[12px] border-b border-ink-200">
      <div class="text-[16px] font-medium text-black leading-[24px] flex-1">
        {{ t("booking.user.stayInfo") }}
      </div>
      <div class="right">
        <Stepper v-model="count" :unit="t('booking.user.roomUnit')" />
      </div>
    </div>

    <div class=" pl-[12px] pr-[12px]">
      <div class=" border-b border-ink-200 pt-[12px] pb-[12px] flex items-center" v-for="(item, index) in userFormList"
        :key="index">
        <div class="text-[14px] font-medium text-ink-600 mr-[12px]">{{ t("booking.user.guestName") }}</div>
        <div class="right">
          <input class=" px-4 py-2 text-[15px] text-black leading-[20px]" v-model.trim="item.visitorName"
            :placeholder="t('booking.user.namePlaceholder')" maxlength="11" />
        </div>
      </div>

      <div class="flex items-center  pt-[12px] pb-[12px]">
        <div class="text-[14px] font-medium text-ink-600 mr-[12px]">{{ t("booking.user.contactPhone") }}</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.user.phonePlaceholder')" maxlength="11" />
        </div>
      </div>
    </div>
  </div>
</template>

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

const { t } = useI18n();

const props = defineProps({
  modelValue: {
    type: Number,
    default: 1,
  },
  userFormList: {
    type: Object,
    default: () => ({
      visitorName: "",
      contactPhone: "",
    }),
  },
});

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

<style></style>
