<template>
	<div class="home-warp" style="background-color: inherit">
		<div class="home">
			<van-form @submit="onSubmit" label-align="top">
				<van-cell-group inset>
					<van-field
						v-model="username"
						name="用户名"
						label="用户名"
						placeholder="用户名"
						:rules="[{ required: true, message: '请填写用户名' }]"
					/>
					<van-field
						v-model="password"
						type="password"
						name="密码"
						label="密码"
						placeholder="密码"
						:rules="[{ required: true, message: '请填写密码' }]"
					/>

					<van-field
						v-model="result"
						
						readonly
						name="picker"
						label="选择器"
						placeholder="点击选择城市"
						@click="showPicker = true"
					/>
					<van-popup v-model:show="showPicker" position="bottom">
						<van-picker
							:columns="columns"
							@confirm="onConfirm"
							@cancel="showPicker = false"
						/>
					</van-popup>
					<van-field name="checkbox" label="复选框">
						<template #input>
							<van-checkbox v-model="checked" shape="square" />
						</template>
					</van-field>
					<van-field name="checkboxGroup" label="复选框组">
						<template #input>
							<van-checkbox-group
								v-model="groupChecked"
								direction="horizontal"
							>
								<van-checkbox name="1" shape="square"
									>复选框 1</van-checkbox
								>
								<van-checkbox name="2" shape="square"
									>复选框 2</van-checkbox
								>
							</van-checkbox-group>
						</template>
					</van-field>
				</van-cell-group>
				<div style="margin: 16px">
					<van-button round block type="primary" native-type="submit">
						提交
					</van-button>
				</div>
			</van-form>
		</div>
	</div>
</template>

<script setup>
import { showLoadingToast, closeToast } from 'vant';
import { ref } from 'vue'

const showPicker = ref(false)
const username = ref('')
const password = ref('')
const checked = ref('')
const groupChecked = ref([])
const result = ref('')
const columns = ref([
      { text: '杭州', value: 'Hangzhou' },
      { text: '宁波', value: 'Ningbo' },
      { text: '温州', value: 'Wenzhou' },
      { text: '绍兴', value: 'Shaoxing' },
      { text: '湖州', value: 'Huzhou' },
    ])
	const onConfirm = ({ selectedOptions }) => {
      result.value = selectedOptions[0]?.text;
      showPicker.value = false;
    };
	showLoadingToast({
        message: '加载中...',
        forbidClick: true,
        duration: 0,
      });
// @ is an alias to /src
</script>
