<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-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>
          <a-form-item>
            <a-input
                    :disabled="!loginBtn"
                    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>
          <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>
    </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 {setMaxDigits , RSAKeyPair , encryptedString} from '@/utils/RSA'


export default {
  components: {
    TwoStepCaptcha,
    JGraphicCode
  },
  data() {
    return {
      buttondata:"登录",
      customActiveKey: "tab1",
      loginBtn: false,
      // login type: 0 email, 1 username, 2 telephone
      loginType: 0,
      requiredTwoStepCaptcha: false,
      stepCaptchaVisible: false,
      form: this.$form.createForm(this),
      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 data = {
          username: username,
        }
        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)
      }
    },
    handleSubmit() {
      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(() => {
            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;
    },
    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.png") no-repeat center;
      background-size: cover;
      float: left;
    }
    .register{
      margin-bottom: 10vw/@vw;
    }
    .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;
  }
</style>
