<template>
  <a-modal
    :title="title"
    :width="modalWidth"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form" class="addModel clearfix">
      <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="旧密码">
        <a-input type="password" placeholder="请输入旧密码" v-decorator="[ 'oldPwd', validatorRules.oldPwd]"/>
      </a-form-item>

      <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="新密码">
        <a-input type="password" placeholder="请输入新密码" v-decorator="[ 'newPwd', validatorRules.newPwd]"/>
      </a-form-item>
      <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="确认新密码">
        <a-input type="password" @blur="handleConfirmBlur" placeholder="请确认新密码"
                 v-decorator="[ 'rePwd', validatorRules.rePwd]"/>
      </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

  import { postAction } from '@/api/manage'
  export default {
    name: "UserPassword",
    data () {
      return {
        countdown: 60,// 倒计时秒数
        codeMsg: '获取验证码', // 按钮上的文字
        timer: null,// 定时器
        title:"修改密码",
        modalWidth:500,
        visible: false,
        confirmLoading: false,
        verifiedCode: "",
        // 按钮上的文字
        validatorRules:{
          oldPwd:{
            rules: [{
              required: true, message: '请输入旧密码!',
            }],
          },
          newPwd:{
            rules: [{
              required: true, message: '请输入新密码!',
            }, {
              validator: this.validateToNextPassword,
            }],
          },
          rePwd:{
            rules: [{
              required: true, message: '请确认新密码!',
            }, {
              validator: this.compareToFirstPassword,
            }],
          },
          inputCode: {rules: [{required: true, message: '请输入验证码!'}, {validator: this.validateInputCode}]}
        },
        confirmDirty:false,
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },

        form:this.$form.createForm(this),
        url: "auth/ciop/mgr/changePwd",
        codeurl:"auth/ciop/mgr/codemessage",
        username:"",
      }
    },
    methods: {
      //密码加密
      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;
      },
      show(uname){
        if(!uname){
          this.$message.warning("当前系统无登陆用户!");
          return
        }else{
          this.username = uname
          this.form.resetFields();
          this.visible = true;
        }
      },
      handleCancel () {
        this.close()
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.disableSubmit = false;
        this.selectedRole = [];
        this.codeMsg = "获取验证码";
        clearInterval(this.timer);
        this.timer=null;
        this.countdown=60

      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            values.oldPwd=encodeURIComponent(this.getPass(values.oldPwd))
            values.newPwd=encodeURIComponent(this.getPass(values.newPwd))
            values.inputCode=encodeURIComponent(this.getPass("XXXXXX"))
            values.rePwd=values.newPwd
            let params = Object.assign(values)
            postAction(this.url,params).then((res)=>{
              if(res.code!=200){
                that.$message.error(res.message);
                that.close();
              }else{
                that.$message.success(res.message);
                this.visible=false
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
        })
      },
      validateToNextPassword  (rule, value, callback) {
        const form = this.form;
        if (value && this.confirmDirty) {
          form.validateFields(['confirm'], { force: true })
        }
        callback();
      },
      compareToFirstPassword  (rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue('newPwd')) {
          callback('两次输入的密码不一样！');
        } else {
          callback()
        }
      },
      handleConfirmBlur(e) {
        const value = e.target.value
        this.confirmDirty = this.confirmDirty || !!value
      },
      validateInputCode(rule, value, callback) {
        if (value!='') {
          callback();
        } else {
          callback();
        }
      },


    }
  }
</script>

<style lang="less" scoped>
    .addModel {
        .ant-form-item{
            width: 100%;
            float: left;
            /deep/ .ant-form-item-label{
                width: 20%;
                margin-right: 10px;
            }
            /deep/ .ant-form-item-control-wrapper{
                width: 65%;
                .ant-input,.ant-select{
                    width: 50%;
                    margin-right: 8px;
                }
            }
        }

    }
</style>

