<template>
    <div class="main clearfix">
        <div class="caption">

        </div>
        <div class="form">
            <span class="form_title">您好，欢迎登陆</span>
            <a-form :form="form" class="user-layout-login" ref="formLogin" id="formLogin">

                <a-form-item>
                    <a-input
                            size="large"
                            v-decorator="['username',validatorRules.username,{ validator: this.handleUsernameOrEmail }]"
                            type="text"
                            placeholder="请输入帐户名">
                        <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                    </a-input>
                </a-form-item>
                <a-form-item>
                    <a-input
                            v-decorator="['password',validatorRules.password]"
                            size="large"
                            type="password"
                            autocomplete="false"
                            placeholder="密码">
                        <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                    </a-input>
                </a-form-item>
                <a-row :gutter="0">
                    <a-col :span="14">
                        <a-form-item>
                            <a-input
                                    v-decorator="['inputCode',validatorRules.inputCode]"
                                    size="large"
                                    type="text"
                                    @change="inputCodeChange"
                                    placeholder="请输入验证码">
                                <a-icon
                                        slot="prefix"
                                        v-if=" inputCodeContent==verifiedCode "
                                        type="smile"
                                        :style="{ color: 'rgba(0,0,0,.25)' }"/>
                                <a-icon slot="prefix" v-else type="frown" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>
                    </a-col>
                </a-row>

                <a-row :gutter="0">
                    <a-col :span="14">
                        <a-form-item>
                            <a-input
                                    :disabled="!loginBtn"
                                    v-decorator="['phonecode',validatorRules.phoneCode]"
                                    size="large"
                                    type="text"
                                    placeholder="请输入手机验证码">
                                <a-icon slot="prefix" type="message" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                            </a-input>
                        </a-form-item>
                    </a-col>
                    <a-col :span="10">
                        <a-button
                                size="small"
                                type="primary"
                                htmlType="submit"
                                class="code-button"
                                @click.stop.prevent="getCode"
                                :disabled="!loginBtn">{{ codeMsg }}
                        </a-button>
                        <!--            <j-graphic-code @success="generateCode" style="float: right"></j-graphic-code>-->
                    </a-col>
                </a-row>
                <div style="top:10px;float: left;font-size: 12px;color: #8b8b8b">
                    <a-checkbox v-model="single" disabled></a-checkbox>&nbsp;
                    我已阅读<a @click="commitmentSubmit">《用户个人信息保护承诺书》</a>
                </div>
                <br/>
                <div class="register">
                    <router-link :to="{path: '/user/register'}">找回密码</router-link>
                </div>
                <a-form-item style="margin-top:24vw/@vw">
                    <a-button
                            size="large"
                            type="primary"
                            htmlType="submit"
                            class="login-button"
                            @click.stop.prevent="handleSubmit"
                            :disabled="!loginBtn">{{ buttondata }}
                    </a-button>
                </a-form-item>
            </a-form>

            <two-step-captcha
                    v-if="requiredTwoStepCaptcha"
                    :visible="stepCaptchaVisible"
                    @success="stepCaptchaSuccess"
                    @cancel="stepCaptchaCancel">
            </two-step-captcha>
            <LeakProofModel :v-model="LeakProofModel"></LeakProofModel>
            <commitment ref="commitment" :countNum="countNum" @appendData="appendData" v-show="commitment"></commitment>
        </div>
    </div>
</template>

<script>
    import TwoStepCaptcha from '@/components/tools/TwoStepCaptcha'
    import {mapActions} from "vuex"
    import {getPhoneCode} from "@/api/login"
    import {timeFix} from "@/utils/util"
    import Vue from 'vue'
    import {ACCESS_TOKEN} from "@/store/mutation-types"
    import JGraphicCode from '@/components/jeecg/JGraphicCode'
    import LeakProofModel from '@/views/user/protocol/Leak-proof-model'
    import commitment from '@/views/user/protocol/commitment'
    import {setMaxDigits, RSAKeyPair, encryptedString} from '@/utils/RSA'
    // import AES from "@/api/AES.js";

    export default {
        components: {
            TwoStepCaptcha,
            JGraphicCode,
            LeakProofModel,
            commitment,
        },
        data() {
            return {
                flag: false,
                LeakProofModel: true,
                commitment: false,
                countNum: 0,
                single: false,
                buttondata: "登录",
                customActiveKey: "tab1",
                loginBtn: false,
                // login type: 0 email, 1 username, 2 telephone
                loginType: 0,
                requiredTwoStepCaptcha: false,
                stepCaptchaVisible: false,
                form: this.$form.createForm(this),
                updateTime: '',
                formLogin: {
                    username: "",
                    password: "",
                    captcha: "",
                    mobile: ""
                },
                validatorRules: {
                    username: {rules: [{required: true, message: '请输入用户名!', validator: 'click'}]},
                    password: {rules: [{required: true, message: '请输入密码!', validator: 'click'}]},
                    mobile: {rules: [{validator: this.validateMobile}]},
                    captcha: {rule: [{required: true, message: '请输入验证码!'}]},
                    inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]},
                    phoneCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validatephoneCode}]}
                },
                verifiedCode: "",
                inputCodeContent: "",
                inputCodeNull: true,
                countdown: 0,// 倒计时秒数
                codeMsg: '获取验证码', // 按钮上的文字
                timer: null,// 定时器
            }
        },
        created() {
            Vue.ls.remove(ACCESS_TOKEN)
            this.getRouterData();
        },
        methods: {
            ...mapActions(["Login", "Logout"]),
            // handler
            handleUsernameOrEmail(rule, value, callback) {
                const regex = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/;
                if (regex.test(value)) {
                    this.loginType = 0
                } else {
                    this.loginType = 1
                }
                callback()
            },
            handleTabClick(key) {
                this.customActiveKey = key
                // this.form.resetFields()
            },
            getCode() {
                // 验证码60秒倒计时
                if (!this.timer) {
                    let username = encodeURIComponent(this.getPass(this.formLogin.username));
                    let password = encodeURIComponent(this.getPass(this.formLogin.password));
                    let data = {
                        username: username,
                        password: password
                    }
                    getPhoneCode(data).then(res => {
                        if (res.code == 200) {
                            this.$notification.success({
                                message: res.message ? res.message : "发送成功",
                            });
                            return null;
                        }
                        this.$notification.error({
                            message: res.message ? res.message : "发送错误",
                        });
                    })
                    //初始化倒计时
                    this.countdown = 60;
                    this.timer = setInterval(() => {
                        if (this.countdown > 0 && this.countdown <= 60) {
                            this.countdown--;
                            if (this.countdown !== 0) {
                                this.codeMsg = "重新发送(" + this.countdown + ")";
                            } else {
                                clearInterval(this.timer);
                                this.codeMsg = "获取验证码";
                                this.countdown = 0;
                                this.timer = null;
                            }
                        }
                    }, 1000)
                }
            },

            appendData(data) {
                this.single = data.single;
                this.commitment = data.commitment;
            },
            commitmentSubmit() {
                if (!this.flag) {
                    this.countNum = 0;
                }
                this.commitment = true;
                this.flag = true;
                this.$refs.commitment.setTimer();
            },
            handleSubmit() {
                if (!this.flag) {
                    this.commitmentSubmit();
                    return;
                }
                let that = this
                let loginParams = {
                    smsCode: "xxxx"
                };
                // 使用账户密码登陆
                that.form.validateFields(['username', 'password', 'inputCode', "phonecode"], {force: true}, (err, values) => {
                    if (!err) {
                        loginParams.username = values.username;
                        loginParams.password = encodeURIComponent(this.getPass(values.password));
                        loginParams.remember = that.formLogin.remember;
                        loginParams.phonecode = encodeURIComponent(this.getPass(values.phonecode));
                        //console.log(loginParams);
                        that.Login(loginParams).then((res) => {
                            this.updateTime = res.updateTime
                            // console.log(res.updateTime)
                            this.departConfirm({});
                        }).catch((err) => {
                            that.requestFailed(err);
                        })
                    }
                })
            },
            //密码加密
            getPass(text) {
                /*let keyss = setMaxDigits(130);
                keyss = new RSAKeyPair("10001","","a5d210338760bdbe2baabef73c410582e812dad8d9669d8c6ebfe026450e5cc10005290f17a0474c7351031edbff81bd8217a518bdf1a02855f53105ead0370e8a9e30b8560feab1d333a0b055b29419476b0eea1ea54315662ddfc46ec066f076e9490ec34c825afad9e44cf38e5ab600f3136acfe3a0ac0e672e2cb8e50371");
                let password = encryptedString(keyss,text);*/
                let publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCAcsbUyeRD2lQGPEnu5LbXOL2lycUJwK/8BsoZD3b932l4JehAvOKR/YNzs6EG4gnZ7gaXLCnWbE5kB1wuUooo6bv8fSAg0W5QmM1TH8zaIImdAaN6c8mw5dUS/2VJ/2GHI54R1NJziX9VHecpf2DrHnWngETsNytmXaVl3JiXywIDAQAB";
                let encrypt = new window.JSEncrypt();
                encrypt.setPublicKey(publicKey);
                var encryptPwd = encrypt.encryptLong(text);
                return encryptPwd;
                //return text;

              /* AES 加密
                let publicKey = "MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCAcsbUyeRD2lQGPEnu5LbXOL2lycUJwK/8BsoZD3b932l4JehAvOKR/YNzs6EG4gnZ7gaXLCnWbE5kB1wuUooo6bv8fSAg0W5QmM1TH8zaIImdAaN6c8mw5dUS/2VJ/2GHI54R1NJziX9VHecpf2DrHnWngETsNytmXaVl3JiXywIDAQAB";
                var encrypts = AES.encrypt(text,publicKey);
                return encrypts;
                // var dess = AES.decrypt(encrypts);解密

               */
            },
            stepCaptchaSuccess() {
                this.loginSuccess()
            },
            stepCaptchaCancel() {
                this.Logout().then(() => {
                    this.loginBtn = false
                    this.stepCaptchaVisible = false
                })
            },
            loginSuccess() {
                this.loginBtn = false
                this.$router.push({name: "dashboard"})
                this.$notification.success({
                    message: '欢迎',
                    description: `${timeFix()}，欢迎回来`,
                });
            },
            cmsFailed(err) {
                this.$notification['error']({
                    message: "登录失败",
                    description: err,
                    duration: 4,
                });
            },
            requestFailed(err) {
                this.$notification['error']({
                    message: '登录失败',
                    description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
                    duration: 4,
                });
                // this.loginBtn = false;
            },
            validateMobile(rule, value, callback) {
                if (!value || new RegExp(/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/).test(value)) {
                    callback();
                } else {
                    callback("您的手机号码格式不正确!");
                }

            },
            validateInputCode(rule, value, callback) {
                if (!value || this.verifiedCode == this.inputCodeContent) {
                    callback();
                } else {
                    this.loginBtn = false
                    callback("您输入的验证码不正确!");
                }
            },
            validatephoneCode(rule, value, callback) {
                callback();
            },
            generateCode(value) {
                this.loginBtn = false;
                this.verifiedCode = value.toLowerCase()
            },
            inputCodeChange(e) {
                this.inputCodeContent = e.target.value
                if (!e.target.value || 0 == e.target.value) {
                    this.inputCodeNull = true
                } else {
                    this.inputCodeContent = this.inputCodeContent.toLowerCase()
                    this.inputCodeNull = false
                }

                if (this.verifiedCode == this.inputCodeContent) {
                    this.form.validateFields(['username'], {force: true}, (err, values) => {
                        if (!err && this.countdown == 0) {
                            clearInterval(this.timer);
                            this.codeMsg = "获取验证码";
                            this.countdown = 60;
                            this.timer = null;
                            this.formLogin.username = values.username
                            this.getCode()
                        }
                        this.loginBtn = true
                    })
                }
            },
            departConfirm() {
                this.loginSuccess()
            },
            getRouterData() {
                this.$nextTick(() => {
                    this.form.setFieldsValue({
                        'username': this.$route.params.username
                    });
                })
            },
        }
    }
</script>

<style lang="less" scoped>

    @import '~@/assets/less/style';

    .main {

        .code-button {
            width: calc(100% - 10vw / @vw);
            height: 68vw / @vw;
            margin-left: 10vw / @vw;
            background: #e6e6e6;
            /*border-radius:40vw/@vw;*/
            font-size: 24vw / @vw;
            font-family: PingFang SC;
            font-weight: bold;
            color: #adadad;
        }

        .caption {
            width: 666vw / @vw;
            height: 792vw / @vw;
            background: url("~@/assets/bg_content_new.jpg") no-repeat center;
            background-size: cover;
            float: left;
        }

        .register {
            margin-bottom: 10vw / @vw;
            font-size: 12px;
            width: 50px;
        }

        .form {
            width: calc(100% - 666vw / @vw);
            height: 792vw / @vw;
            padding: 80vw / @vw 80vw / @vw 0 60vw / @vw;
            box-sizing: border-box;
            float: left;

            .form_title {
                font-size: 40vw / @vw;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(51, 51, 51, 1);
                display: inline-block;
                height: 55vw / @vw;
                margin: 25vw / @vw 0vw / @vw 50vw / @vw 0;
                border-bottom: 6vw / @vw solid #57bbff;
            }

            /deep/ .ant-form-item {
                margin-bottom: 24vw / @vw;
            }

            @media (min-width: 1920px) {
                /deep/ .ant-input-affix-wrapper .ant-input-prefix {
                    font-size: 22vw / @vw;
                    top: 38% !important;
                }
            }

            @media (min-width: 1400px) {
                /deep/ .ant-input-affix-wrapper .ant-input-prefix {
                    font-size: 22vw / @vw;
                    top: 40.5% !important;
                }
            }

            /deep/ .ant-input-affix-wrapper .ant-input-prefix {
                font-size: 22vw / @vw;
                top: 39%;
            }

            /deep/ .user-layout-login div .ant-input {
                width: 100%;
                height: 68vw / @vw;
                margin-bottom: 15vw / @vw;
                padding-left: 44vw / @vw;
                background: rgba(245, 245, 245, 1);
                border: 1vw / @vw solid rgba(221, 221, 221, 1);
                opacity: 0.5;
                border-radius: 4vw / @vw;

                &
                ::-webkit-input-placeholder {
                    font-size: 24vw / @vw;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333;
                    line-height: 88vw / @vw;
                }

                &
                ::-moz-placeholder {
                    font-size: 24vw / @vw;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333;
                    line-height: 88vw / @vw;
                }

                &
                :-ms-input-placeholder {
                    font-size: 24vw / @vw;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #333;
                    line-height: 88vw / @vw;
                }

            }
            /deep/ #gc-canvas {
                height: 67vw / @vw;
            }

            /deep/ .user-layout-login button.login-button {
                width: 595vw / @vw;
                height: 80vw / @vw;
                background: rgba(87, 148, 255, 1);
                border-radius: 40vw / @vw;
                font-size: 36vw / @vw;
                font-family: PingFang SC;
                font-weight: bold;
                color: rgba(255, 255, 255, 1);
            }

        }
    }

    /*.user-layout-login {
      margin-top: 20px;

      label {
        font-size: 14px;
      }

      .getCaptcha {
        display: block;
        width: 100%;
        height: 40px;
      }

      .forge-password {
        font-size: 14px;
      }

      button.login-button {
        padding: 0 15px;
        font-size: 16px;
        height: 40px;
        width: 100%;
      }

      .user-login-other {
        text-align: left;
        margin-top: 24px;
        line-height: 22px;

        .item-icon {
          font-size: 24px;
          color: rgba(0, 0, 0, .2);
          margin-left: 16px;
          vertical-align: middle;
          cursor: pointer;
          transition: color .3s;

          &:hover {
            color: #1890ff;
          }
        }

        .register {
          float: right;
        }
      }
    }*/

</style>
<style>
    .valid-error .ant-select-selection__placeholder {
        color: #f5222d;
    }

    .ant-modal-wrap {
        top: 10%
    }

</style>
