<template>
	<view class="container">
		<view class="fs-bg__primary fs-pt200 fs-pl30 fs-pb160">
			<view class="fs-size__h1 fs-color__white">系统登录</view>
			<view class="fs-size__h4 fs-color__white fs-mt12">欢迎来到园林养护智慧平台</view>
		</view>
		<view class="fs-p30 fs-bg__white fs-radius__48 fs-mt-60">
			<view class="fs-flex__center">
				<image src="/static/images/1.png" style="width:400rpx;height:280rpx;"></image>
			</view>
			<tui-form ref="form" :showMessage="false">
				<tui-input marginTop="20" placeholder="请输入账号" v-model="formData.username"></tui-input>
				<tui-input marginTop="20" password placeholder="请输入密码" v-model="formData.password"></tui-input>
			</tui-form>
			<view class="fs-mt96 fs-align__center fs-flex__center">
				<tui-button width="520rpx" height="86rpx" shadow shape="circle" :loading="isLoading" :disabled="isLoading" @click="onSubmit">立即登录</tui-button>
			</view>
		</view>
	</view>
</template>

<script>
import { apiAccountLogin } from '@/api/app'
const rules = [
	{
		name: "username",
		rule: ["required"],
		msg: ["请输入账号"]
	}, 
	{
		name: "password",
		rule: ["required"],
		msg: ["请输入密码"]
	}
]
export default {
	data() {
		return {
			formData: {
				username: '',
				password: '',
				isSkipCaptchaVerify: true
			},
			isLoading: false
		}
	},
	onLoad() {
		// 取消监听位置上报
		uni.stopLocationUpdate()
	},
	methods: {
		onSubmit() {
			this.$refs.form.validate(this.formData, rules).then(res => {
				if (!res.isPass) {
					uni.$tui.toast(res.errorMsg)
					return
				}
				this.isLoading = true
				apiAccountLogin({data:{...this.formData}}).then(res => {
					// 设置登录信息
					this.login(res)
					uni.$tui.href('/pages/index', 1)
				}).finally(() => {
					this.isLoading = false
				})
			})
		}
	}
}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}
</style>
