<template>
  <view class="bg-white rounded-[12px] overflow-hidden mb-[12px]">
    <view class="flex items-center p-[12px] border-bottom">
      <view class="text-[16px] font-[500] text-[#000000] leading-[24px] flex-1">入住信息</view>
      <view class="right">
        <Stepper v-model="count" unit="间" />
      </view>
    </view>

    <view class="border-box pl-[12px] pr-[12px]">
      <view class="border-box border-b border-[#e5e8ee] pt-[12px] pb-[12px] flex items-center"
        v-for="(item, index) in userFormList" :key="index">
        <view class="text-[14px] font-[500] text-[#525866] mr-[12px]"> 住客姓名 </view>
        <view class="right">
          <input class="border-box px-[4px] py-[2px] text-[15px] text-[#000000] leading-[20px]"
            v-model.trim="item.visitorName" placeholder="请输入姓名" maxlength="11" />
        </view>
      </view>

      <view class="flex items-center pt-[12px] pb-[12px]">
        <view class="text-[14px] font-[500] text-[#525866] mr-[12px]"> 联系手机 </view>
        <view class="right">
          <input class="border-box px-[4px] py-[2px] text-[15px] text-[#000000] leading-[20px]"
            v-model.trim="userFormList[0].contactPhone" placeholder="请输入联系手机" maxlength="11" />
        </view>
      </view>
    </view>
  </view>
</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>
