<template>
    <view class="waper">
        <view class="color"></view>
        <view class="logo">
            <image src="../../static/img/logo.png" mode=""></image>
        </view>
        <view class="title">乐游南川景区检票端</view>
        <view class="form">
            <view class="list">
                <view>账号</view>
                <view>
                    <input type="text" placeholder="请输入您的登录账号" v-model="username" placeholder-class="placeholder" />
                </view>
            </view>
            <view class="list">
                <view>密码</view>
                <view>
                    <input type="password" placeholder="请输入您的登录密码" v-model="password" placeholder-class="placeholder" />
                </view>
            </view>
			<view class="remember">
				<u-checkbox-group placement="column" size="24rpx" icon-size="12px">
					<u-checkbox label="记住密码" name="true" v-model="checkboxValue" @change="checkboxChange"
						:checked="checkboxValue" activeColor="#03AE80" labelColor="#999">
					</u-checkbox>
				</u-checkbox-group>
			</view>
        </view>
        <view class="btn" @click="login">登录</view>
    </view>
</template>

<script>
export default {
    data () {
        return {
            username: '',
            password: '',
			checkboxValue: false
        }
    },
	onLoad() {
		//取出缓存中的账号、密码
		const HBremember = uni.getStorageSync("HBremember");
		const HBuserName = uni.getStorageSync("HBuserName");
		const HBpassword = uni.getStorageSync("HBpassword");
		if (HBremember && HBuserName && HBpassword) {
			this.username = HBuserName;
			this.password = HBpassword;
			this.checkboxValue = HBremember;
		}
	},
    methods: {
        async login () {
            // const sunmi_print = uni.requireNativePlugin('Sunmi-Print-Inner')
            // sunmi_print.connect(res => {
            //     console.log(res)
            //     if(res.connect == "hello"){
            //         sunmi_print.printInit()
            //         //打印一张自检页
            //         sunmi_print.printBitmap({
            //             url:"http://img.pconline.com.cn/images/upload/upc/tx/itbbs/1607/06/c3/23806812_1467754402821_1024x1024.jpg",
            //             align:1
            //         })
            //     }
            // })
            // return false;
            if (!this.username) {
                uni.showToast({ mask: true, title: '请输入账号', icon: 'none' })
                return false;
            }
            if (!this.password) {
                uni.showToast({ mask: true, title: '请输入密码', icon: 'none' })
                return false;
            }
            uni.showLoading({ mask: true })
            let info = await this.$http.login({ username: this.username, password: this.password });
            uni.hideLoading();
            uni.showToast({ mask: true, title: info.code == 200 ? '登录成功' : info.msg, icon: info.code == 200 ? 'success' : 'none' });
            if (info.code == 200) {
                uni.setStorageSync("tourism_token", info.token);
				if (this.checkboxValue) {
					uni.setStorageSync("HBremember", this.checkboxValue);
					uni.setStorageSync("HBuserName", this.username);
					uni.setStorageSync("HBpassword", this.password);
				} else {
					// 销毁缓存中的账号、密码
					uni.removeStorageSync("HBremember");
					uni.removeStorageSync("HBuserName");
					uni.removeStorageSync("HBpassword");
				}
                setTimeout(() => {
                    uni.reLaunch({ url: '/pages/index/index' })
                }, 1500)
            }
        },
		checkboxChange(n) {
			this.checkboxValue = !this.checkboxValue;
		}
    }
}
</script>

<style lang="scss">
page{ background: linear-gradient( 180deg, #FBFDFF 0%, rgba(243,244,248,0) 100%); }
.waper{
    width: 100%; position: relative; box-sizing: border-box; padding: 212rpx 40rpx 0;
    .color{ width: 460rpx; height: 460rpx; position: absolute; left: -80rpx; top: -132rpx; background: rgba(43, 117, 233, 0.1); filter: blur(100px); }
    .logo{
        width: 100rpx; height: 100rpx;
        image{ border-radius: 10rpx; }
    }
    .title{ margin-top: 30rpx; line-height: 50rpx; color: #333; font-size: 36rpx; font-weight: 600; }
    .form{
        width: 100%; margin-top: 80rpx;
        .list{
            width: 100%; margin-bottom: 40rpx;
            &:last-child{ margin-bottom: 0; }
            view{
                &:first-child{ line-height: 50rpx; color: #333; font-weight: 500; font-size: 36rpx; line-height: 42rpx; }
                &:last-child{
                    height: 80rpx; border-bottom: 2rpx solid #EBEBEB;
                    input{ width: 100%; height: 100%; font-size: 28rpx; color: #333; }
                    .placeholder{ color: #999; }
                }
            }
        }
    }
    .btn{ width: 100%; margin-top: 120rpx; height: 90rpx; line-height: 90rpx; text-align: center; font-size: 32rpx; font-weight: 500; color: #fff; background: #03AE80; border-radius: 20rpx; }
}
</style>