<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">
            <a-button
                    size="small"
                    type="primary"
                    htmlType="submit"
                    class="code-button"
                    :loading="loginBtn"
                    @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
                  v-decorator="['password',validatorRules.password]"
                  size="large"
                  type="password"
                  autocomplete="false"
                  placeholder="新密码(6-12位数字和字母组合)">
            <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
          </a-input>
        </a-form-item>

        <a-form-item>
          <a-input
                  v-decorator="['password2',validatorRules.password2]"
                  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>

          <router-link :to="{name: '/user/Login'}" class="back_login">返回登录</router-link>
          <a-button
                  size="small"
                  type="primary"
                  htmlType="submit"
                  class="login-button"
                  :loading="loginBtn"
                  @click.stop.prevent="handleSubmit"
                  :disabled="loginBtn">确定
          </a-button>
      </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 {timeFix} from "@/utils/util"
import Vue from 'vue'
import {ACCESS_TOKEN} from "@/store/mutation-types"
import JGraphicCode from '@/components/jeecg/JGraphicCode'
import {
    register,registercode
} from '@/api/system'

export default {
  components: {
    TwoStepCaptcha,
    JGraphicCode
  },
  data() {
    return {
      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'}]},
        password2: {rules: [{required: true, message: '请再次输入密码!'},{validator:  this.validateToNextPassword}]},
        mobile: {rules: [{validator: this.validateMobile}]},
        captcha: {rule: [{required: true, message: '请输入验证码!'}]},
        inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]}
      },

      codeDisabled: false,// 是否禁用按钮
      countdown: 60,// 倒计时秒数
      codeMsg: '获取验证码', // 按钮上的文字
      timer: null,// 定时器
      verifiedCode: "",
      inputCodeContent: "",
      inputCodeNull: true,
    }
  },
  created() {
    Vue.ls.remove(ACCESS_TOKEN)
    this.getRouterData();
  },
  methods: {
    // 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 data={
          username:this.form.getFieldValue("username")
        }
        registercode(data).then(res=>{
          if (res.code==200){
            this.$notification.success({
              message: res.message,
            });
            return null;
          }
          this.$notification.error({
            message: res.message,
          });
        })
        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 = 60;
              this.timer = null;
              this.codeDisabled = false;
            }
          }
        }, 1000)
      }
    },
    handleSubmit() {
      let that = this

      let loginParams = {
        smsCode: "xxxx"
      };
      let data={
          account:"",
          verificationCode:"",
          newPwd:"",
          rePwd:''
      }
      // 确定修改密码
      that.form.validateFields(['username', 'password', 'password2', 'inputCode'], {force: true}, (err, values) => {
        if (!err) {
          values.password = encodeURIComponent(this.getPass(values.password));
          values.password2 = encodeURIComponent(this.getPass(values.password2));
          let data = {
            account: values.username,
            verificationCode: values.inputCode,
            newPwd: values.password,
            rePwd: values.password
          }
          register(data).then(res => {
            if (res.code==200) {
              this.registerSuccess(res.data);
              return null;
            }
            this.registerRrror(res.data)
          })
        }
      })

    },
  requestFailed(err) {
    this.$notification['error']({
      message: '登录失败',
      description: ((err.response || {}).data || {}).message || err.message || "请求出现错误，请稍后再试",
      duration: 4,
    });
    this.loginBtn = false;
  },
    registerSuccess(data) {
      this.$notification.success({
        message: data,
        description: `${timeFix()}，请再次登录`,
      });
    },
    registerRrror(data) {
      this.$notification.warn({
        message: data,
      });
    },
    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 {
        callback("您输入的验证码不正确!");
      }
    },
    inputCodeChange(e) {

    },
    getRouterData() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          'username': this.$route.params.username
        });
      })
    },
   validateToNextPassword  (rule, value, callback) {
    const form = this.form;
    if (value!= form.getFieldValue("password")) {
      callback("两次输入的密码不一样！");
    }
    callback();
  },
    //密码加密
    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;
    }
  }
}
</script>

<style lang="less" scoped>
  @import '~@/assets/less/style';
  .main{
    .caption{
      width: 666vw/@vw;
      height: 792vw/@vw;
      background: url("~@/assets/bg_content_new.jpg") no-repeat center;
      background-size: cover;
      float: left;
    }
    .form{
      width: calc(100% - 666vw/@vw);
      height: 792vw/@vw;
      box-sizing: border-box;
      padding:80vw/@vw 80vw/@vw 0 60vw/@vw;
      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;
      }
      .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;
      }
      .back_login{
        width:290vw/@vw;
        height:80vw/@vw;
        margin-right: 10vw/@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);
        text-decoration: none;
        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
        line-height: 80vw/@vw;
        display: inline-block;
        white-space: nowrap;
        text-align: center;
        border: 1px solid transparent;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
      }
      /deep/ .user-layout-login button.login-button{
        width:290vw/@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>
