<template>
  <view class="form-wrapper">
    <view class="form-header">
      <image class="form-icon" src="./images/icon_minus.png"></image>
      <text class="form-title">游客1</text>
    </view>
    <view class="form-item">
      <text class="form-label">姓 名</text>
      <input class="form-input" v-model="name" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <text class="form-label">手机号</text>
      <input
        class="form-input"
        v-model="phone"
        placeholder="请输入手机号"
        @blur="validatePhone"
      />
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// Local state
const name = ref("");
const phone = ref("");
const phoneError = ref("");

// Methods
const validatePhone = () => {
  const phoneRegex = /^1[3-9]\d{9}$/;
  if (!phone.value) {
    phoneError.value = "手机号不能为空";
  } else if (!phoneRegex.test(phone.value)) {
    phoneError.value = "请输入正确的手机号";
  } else {
    phoneError.value = "";
  }
};
</script>

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
