<template>
  <view class="container">
    <view class="form-title">服务预约</view>

    <view class="form-item">
      <text class="label">姓名：</text>
      <input 
        v-model="formData.name" 
        placeholder="请输入您的姓名" 
        class="input"
      />
    </view>

    <view class="form-item">
      <text class="label">电话：</text>
      <input 
        v-model="formData.phone" 
        placeholder="请输入手机号" 
        type="number"
        class="input"
      />
    </view>

    <view class="form-item">
      <text class="label">服务类型：</text>
      <picker mode="selector" :range="serviceOptions" @change="onServiceChange">
        <view class="picker">{{ serviceOptions[formData.serviceIndex] || '请选择服务' }}</view>
      </picker>
    </view>

    <view class="form-item">
      <text class="label">预约时间：</text>
      <picker mode="date" @change="onDateChange">
        <view class="picker">{{ formData.date || '请选择日期' }}</view>
      </picker>
    </view>

    <view class="form-item">
      <text class="label">备注：</text>
      <textarea 
        v-model="formData.remark" 
        placeholder="请输入其他需求（选填）"
        class="textarea"
      />
    </view>

    <button class="submit-btn" @click="submitForm">提交预约</button>
  </view>
</template>

<script setup>
	import {
		ref
	} from "vue"
 import { InsertInfo } from '@/api'
 
     let formData=ref({
        name: '',
        phone: '',
        serviceIndex: 0,
        date: '',
        remark: ''
      })
      let serviceOptions=ref(['营销策划', '会议服务', '庆典活动', '品牌推广', '其他']) 
   
 
 
    const onServiceChange=(e)=> {
      formData.value.serviceIndex = e.detail.value
    }
    const onDateChange=(e)=> {
      formData.value.date = e.detail.value
    }
    const validate=()=> {
      if (!formData.value.name.trim()) {
        uni.showToast({ title: '请输入姓名', icon: 'none' })
        return false
      }
      const phoneReg = /^1[3-9]\d{9}$/
      if (!phoneReg.test(formData.value.phone)) {
        uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
        return false
      }
      if (!formData.value.date) {
        uni.showToast({ title: '请选择预约时间', icon: 'none' })
        return false
      }
      return true
    }
    const  submitForm=async()=> {
      if (!validate()) return

      // 👇 这里可以替换为真实请求，例如：
      // uniCloud.callFunction({ name: 'saveBooking', data: formData.value })

      // 模拟提交成功
      uni.showLoading({ title: '提交中...' })
	  InsertInfo({ info: formData.value }).then(res => {
		   uni.hideLoading()
	  	if (res.status) {
	  		uni.showToast({ title: '预约成功！', icon: 'success' })
			
			setTimeout(() => {
			 formData.value = {
			   name: '',
			   phone: '',
			   serviceIndex: 0,
			   date: '',
			   remark: ''
			 }
			  
			  // 可跳转回首页或保持当前页
			   uni.navigateTo({ url: '/pages/index/index' })
			}, 800)
	  	}
	  })
      
    }
   
 
</script>

<style scoped>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}
.form-title {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin: 40rpx 0;
  color: #333;
}
.form-item {
  background: #fff;
  padding: 20rpx 30rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
}
.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #555;
}
.input, .picker {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}
.textarea {
  flex: 1;
  height: 120rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #eee;
  border-radius: 8rpx;
  padding: 10rpx;
}
.submit-btn {
  margin-top: 60rpx;
  background-color: #3182ce;
  color: white;
  font-size: 32rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 12rpx;
}
</style>