<template>
	<view class="content">
		<view class="top">
			<text class="top-title">管理系统</text>
		</view>
		<form>
			<view class="uni-form-item uni-column">
				<view class="title">账号</view>
				<input class="uni-input" name="input" placeholder="请输入您的账号" v-model="username" />
			</view>
			<view class="uni-form-item uni-column">
				<view class="title">密码</view>
				<input class="uni-input" name="input" type="password" placeholder="请输入您的密码" v-model="password" />
			</view>
			<view class="uni-btn-v">
				<button class="active" @click="login()" v-if="!showstate">登录</button>
				<button type="default" class="unactive" v-if="showstate">登录</button>
			</view>
		</form>
	</view>
</template>
<script>
import { sendlogin } from '@/api/login'
export default {
	name: 'index',
	data() {
		return {
			username: '',
			password: '',
			showstate: true
		}
	},
	computed: {},
	onLoad(option) {},
	onShow() {},
	onPageScroll: function(e) {},
	mounted() {},
	watch: {
		username(newVal, oldVal) {
			if (newVal == 0 || this.password == 0 || newVal == '') {
				this.showstate = true
			} else {
				this.showstate = false
			}
		},
		password(newVal, oldVal) {
			if (newVal !== '' && this.username !== '') {
				this.showstate = false
			} else {
				this.showstate = true
			}
		}
	},
	methods: {
		change(e) {
			if ((this.username == '') & (this.pssworld == '')) {
				this.showstate = true
			} else {
				this.showstate = false
			}
		},
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		login() {
			uni.showLoading({
				title: '登录中...',
				mask: true
			})
			if (this.username == '' || this.pssworld == '') {
				this.showstate = true
			} else {
				this.showstate = false
				let data = {
					username: this.username,
					password: this.password
				}
				sendlogin(data)
					.then(res => {
					})
					.catch(() => {
						this.msg('账号或密码不正确！')
					})
			}
		}
	}
}
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100%;
		.top {
			height: 282px;
			background: url('../../static/images/bg.png');
			background-size: cover;
			.top-title {
				line-height: 282px;
				font-size: 50px;
				color: #040404;
				padding-left: 5%;
			}
		}
		.uni-form-item {
			width: 90%;
			margin-left: 5%;
			margin-bottom: 30px;
			border-bottom: 2px solid #bbbbbb;
			.title {
				padding: 0;
				margin-bottom: 20px;
			}
			.uni-input {
				margin-bottom: 10px;
			}
		}
		.uni-btn-v {
			width: 90%;
			margin-left: 5%;
			font-size: 32px;
			.active {
				color: white;
				background: #2878ff;
			}
			.unactive {
				color: white;
				background: #bdbec0;
			}
		}
	}
</style>
