<template>
    <view class="content">
        <view class="header">
            <image src="@/static/logo.png" mode="aspectFit"></image>
            <text v-if="userinfo.mobile" class="tip">您当前已登陆账号：{{userinfo.username}}</text>
        </view>
        <uni-notice-bar text="在这里,您可以通过邮箱或手机号进行登陆。" />
        <view class="uni-common-mt uni-form">
            <form @submit="formSubmit" @reset="formReset">
                <view class="uni-form-item ">
                    <view class="title">账号</view>
                    <input class="uni-input" name="username" v-model="FormData.username" placeholder="您的手机号或用户名" />
                </view>

                <view class="uni-form-item ">
                    <view class="title">密码</view>
                    <input class="uni-input" name="passwd" v-model="FormData.passwd" type="password" placeholder="" />
                </view>

                <view class="uni-form-item ">
                    <view class="title">持久登陆</view>
                    <view>
                        <switch name="isLong" :checked="isLong==1?true:false" />
                    </view>
                </view>
                <view class="uni-form-item">
                    <view class="help-block">
                        启用后，只有您主动点击退出按钮后，你的登陆状态才会被取消。
                    </view>
                </view>

                <view class="uni-button-group">
                    <uni-row class="demo-uni-row" width="100%">
                        <uni-col :span="12">
                            <button class="btn btn-success" form-type="submit">登陆</button>
                        </uni-col>
                        <uni-col :span="12">
                            <button class="btn btn-default" type="default" form-type="reset">重置</button>
                        </uni-col>
                    </uni-row>
                </view>

                <view class="uni-button-group">
                    <button class="btn btn-info" type="default" @click="goToSms">使用验证码登陆</button>
                    <button class="btn btn-info" type="warn" @click="logout">注销</button>
                    <button :hidden="true" class="btn btn-success" type="primary" @click="authApp">一键授权</button>
                    <button class="btn btn-primary" type="primary" @click="goToReg">注册</button>
                    <button class="btn btn-info" type="default" @click="callMe">技术支持</button>
                </view>
            </form>
        </view>

        <uni-fab ref="fab" :pattern="fabs.pattern" :content="fabs.content" :horizontal="fabs.horizontal"
            :vertical="fabs.vertical" :direction="fabs.direction" @trigger="fabTrigger" @fabClick="fabClick" />

        <view class="footer" v-if="FormData.username">
            您好，您刚填写的用户名是：{{FormData.username}}。如果您在登陆过程中遇到任何问题，请联系技术部门或您的直属管理人员解决。
        </view>
    </view>
</template>

<script>
    import graceChecker from "@/common/graceChecker.js";
    import config from "@/config/ctms.config.js";
    import utils from "@/utils/common.js";
    import ctms from '@/apis/ctms/index.js';
    import hi from '@/common/util.js';

    export default {
        data() {
            return {
                userinfo: {},
                FormData: {
                    username: '',
                    passwd: ''
                },
                isLong: 1,
                uniIdRedirectUrl: '',

                //悬浮按钮
                fabs: {
                    horizontal: 'left',
                    vertical: 'bottom',
                    direction: 'horizontal', //horizontal水平展开；vertical垂直展开
                    pattern: {
                        color: '#7A7E83',
                        backgroundColor: '#fff',
                        selectedColor: '#007AFF',
                        buttonColor: '#fff',
                        iconColor: '#aaa'
                    },
                    content: [{
                            iconPath: '/static/fab/home.png',
                            selectedIconPath: '/static/fab/homeactive.png',
                            text: '首页',
                            active: false,
                            diyfn: 'home'
                        },
                        {
                            iconPath: '/static/fab/guanzhu.png',
                            selectedIconPath: '/static/fab/guanzhuactive.png',
                            text: '关注',
                            active: false,
                            diyfn: 'news'
                        },
                        {
                            iconPath: '/static/fab/me.png',
                            selectedIconPath: '/static/fab/meactive.png',
                            text: '用户',
                            active: false,
                            diyfn: 'user'
                        },

                        {
                            iconPath: '/static/fab/news.png',
                            selectedIconPath: '/static/fab/newsactive.png',
                            text: '公告',
                            active: false,
                            diyfn: 'notice'
                        }
                    ]
                }
            }
        },
        methods: {
            async authApp() {
                //TODO 主包内单独设计一个授权页面，子项目则调用并确认，后端接收用户数据并自动注册绑定到子项目。
                var res = await ctms.user.oneKeyAuth();
                if (res) {
                    this.userinfo = res;
                    utils.toast('授权完成！');
                    uni.navigateBack()
                }
            },
            formSubmit: function(e) {
                var _that = this;
                //定义表单规则
                var rule = [{
                        name: "username",
                        checkType: "notnull",
                        checkRule: "",
                        errorMsg: "用户名不能为空"
                    },
                    {
                        name: "passwd",
                        checkType: "string",
                        checkRule: "8,32",
                        errorMsg: "密码不对"
                    }
                ];
                //进行表单检查
                var formData = e.detail.value;
                var checkRes = graceChecker.check(formData, rule);
                if (!checkRes) {
                    uni.showToast({
                        title: graceChecker.error,
                        icon: "error"
                    });
                    return false;
                }

                //请求封装
                ctms.user.login(formData).then((res) => {
                    if (res) {
                        uni.showToast({
                            title: "登陆成功!",
                            icon: "success"
                        });
                        if (this.uniIdRedirectUrl) {
                            uni.redirectTo({
                                url: this.uniIdRedirectUrl
                            })
                        } else {
                            uni.navigateBack()
                        }
                    }
                });
            },
            formReset: function(e) {
                // utils.debug('清空登陆表单数据')
            },
            async logout() {
                var res = await ctms.user.logout();
                if (res) {
                    uni.reLaunch({
                        url: '../tabbar/index/index'
                    })
                }
                this.userinfo = {};
            },
            goToReg() {
                uni.navigateTo({
                    url: './reg'
                })
            },
            goToSms() {
                uni.navigateTo({
                    url: './loginSms?uniIdRedirectUrl=' + encodeURIComponent(this.uniIdRedirectUrl)
                })
            },
            callMe: function(e) {
                var phone = config.kfPhone;
                // hi.tel(phone);
                uni.makePhoneCall({
                    phoneNumber: phone
                })
            },

            //浮窗按钮相关操作
            fabClick(e) {
                // utils.debug('点击了悬浮按钮')
            },
            fabTrigger(e) {
                var eindex = e.index;
                this.fabs.content[e.index].active = !e.item.active;

                if (!e.item.diyfn) {
                    //未设置这个difyfn字段的，无操作
                    return false;
                }
                var diyfn = e.item.diyfn,
                    dir = config.pageDir,
                    page;
                switch (diyfn) {
                    case 'home':
                        page = 'tabbar/index/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                    case 'news':
                        page = 'news/list/list';
                        break;
                    case 'user':
                        page = 'me/index';
                        break;
                    case 'notice':
                        page = 'tabbar/notice/index';
                        return uni.reLaunch({
                            url: dir + page
                        })
                        break;
                }
                return uni.navigateTo({
                    url: dir + page
                })
            }
        },

        onShow: function() {

        },
        onLoad: function(o) {
            var user = ctms.user.checkLogin();
            this.userinfo = user;
            // 自动跳转到登录页面时会携带uniIdRedirectUrl参数
            if (o.uniIdRedirectUrl) {
                this.uniIdRedirectUrl = decodeURIComponent(o.uniIdRedirectUrl)
            }
        }
    }
</script>

<style>
    @import url("login.css");

    .header {
        display: flex;
        align-items: center;
        flex-direction: column;
    }

    .tip {
        margin-top: 20rpx;
    }

    .desc {
        margin-top: 30rpx;
        display: block;
    }
</style>