<template>
  <div class="bg-white rounded-12 overflow-hidden mb-12">
    <div class="flex flex-items-center border-box p-12 border-bottom">
      <div class="font-size-16 font-500 color-000 line-height-24 flex-full">
        入住信息
      </div>
      <div class="right">
        <Stepper v-model="count" unit="间" />
      </div>
    </div>

    <div class="border-box pl-12 pr-12">
      <div
        class="border-box border-bottom pt-12 pb-12 flex flex-items-center"
        v-for="(item, index) in userFormList"
        :key="index"
      >
        <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="item.visitorName"
            placeholder="请输入姓名"
            maxlength="11"
          />
        </div>
      </div>

      <div class="flex flex-items-center border-box pt-12 pb-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>
  </div>
</template>

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

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>
