<template>
  <view class="ss-p-x-30 ss-p-y-30">
		<!-- <picker mode="date" :value="formData.birthday" start="" end="" @change="bindDateChange">
			<view class="uni-input">{{ formData.birthday }}</view>
		</picker> -->
		<view class="color-primary text-center font-size-18 ss-m-b-100">
			请选择您的出生日期
		</view>
    <uni-forms ref="formRef" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="76px" label-align="right">
      <uni-forms-item required label="出生日期" name="birthday">
        <uni-datetime-picker v-model="formData.birthday" type="date" />
			</uni-forms-item>
			<view class="f-horizon-center">
				<button type="primary" size="default" class="send-button"  @click="handleSubmit">提 交</button>
			</view>
		</uni-forms>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'

const formRef = ref(null)
const formData = ref({
	birthday: ''
})
const rules = {
	birthday: {
		rules: [{required: true, errorMessage: '请选择您的出生日期' }]
	}
}

const bindDateChange = (e) => {
  console.log(e.detail.value, 'change')
	formData.value.birthday = e.detail.value
}

const handleSubmit = async () => {
	const valid = await unref(formRef).validate()
  if (!valid) return

	console.log('submit', formData.value.birthday)

	uni.setStorageSync('birthday', formData.value.birthday)

	uni.reLaunch({
		url: `/pages/drawLots/index`
	})
}
</script>

<style lang="scss" scoped>
:deep {
	.uni-picker {
		height: 60px !important;
	}
}
</style>