<template>
	<view class="u-page">
		<uni-section title="使用uni-ui表单" type="line">
			<uni-card :is-shadow="false" :isFull="true" :border="true">
				<text>
					使用uni-ui的组件创建表单，提交时使用的request.api.js中的网络请求方式，在VUEX里发起登录请求并将结果保存到本地。先调用VUEX，在VUEX中发送网络请求。
				</text>
			</uni-card>
			<uni-card title="uni-ui的表单" :thumbnail="avatar" sub-title="输入框为uni-easyinput" extra="使用uni-forms"
				note="Tips">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="账号:" name="userName">
						<uni-easyinput prefixIcon="person" type="text" v-model="formData.userName"
							placeholder="请输入账号" />
					</uni-forms-item>
					<uni-forms-item label="密码:" name="password">
						<uni-easyinput prefixIcon="locked" type="password" v-model="formData.password"
							placeholder="请输入密码" />
					</uni-forms-item>
				</uni-forms>
				<button @click="dologin">登录</button>
			</uni-card>
		</uni-section>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar: '/static/uniui.png',
				vavatar: '/static/uview/common/logo.png',
				// 表单数据
				formData: {
					userName: 'admin',
					password: '111111'
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
							required: true,
							errorMessage: '账号不可以为空'
						}]
					},
					// 对passwd字段进行必填验证
					passwd: {
						rules: [{
							required: true,
							errorMessage: '密码不可以为空'
						}]
					}
				},
			}
		},
		methods: {
			dologin() {
				let _this = this
				this.$refs.form
					.validate()
					.then(r => {
						_this.$store
							.dispatch('login', _this.formData)
							.then(uinfo => {
								console.log('MMMM:', uinfo)
								getApp().globalData.username = uinfo.name
								getApp().globalData.token = uinfo.token
								console.log('gd--:', getApp().globalData)
								// uni.redirectTo({
								// 	url: '/pages/index/index',
								// })
								uni.switchTab({
								    url: '../home/AddFragment'
								});

							})
							.catch(er => {
								console.log('EEEE:', er)
							})
					})
					.catch(err => {
						console.log('eeee:', err)
					})
			}
		},
	}
</script>

<style></style>
