<!--本文件由FirstUI授权予长沙壹润信息科技发展有限公司（手机号：1   5  6 16260  1 9 5，身份证尾号： 5 037  5T）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
<template>
	<view class="fui-wrap">
		<image src="/static/images/logo.png" class="fui-logo"></image>
		<view class="fui-text">Hello FirstUI ！</view>

		<view class="fui-btn__box">
			<fui-button :text="isLogin?'退出登录':'登录'" @click="btnLogin"></fui-button>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		//登录状态
		computed: mapState(['isLogin']),
		data() {
			return {

			}
		},
		onLoad() {

		},
		methods: {
			...mapMutations(['login', 'logout']),
			btnLogin() {
				if (!this.isLogin) {
					//请求接口
					//....
					let token = 'testToken';
					//保存登录信息，修改状态
					this.login({
						token
					});
					this.fui.toast('登录成功！')
				} else {
					//退出登录
					this.logout()
					this.fui.toast('退出登录成功！')
				}
			}
		}
	}
</script>

<style>
	.fui-wrap {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding: 0 32rpx;
		box-sizing: border-box;
	}

	.fui-logo {
		width: 200rpx;
		height: 200rpx;
		border-radius: 24rpx;
		margin: 96rpx 0 32rpx;
	}

	.fui-text {
		font-size: 40rpx;
		text-align: center;
		padding-bottom: 64rpx;
	}
	.fui-btn__box{
		width: 100%;
	}
</style>