<template>
  <div class="other-container">
    <div style="width: 400px;margin: 6.25rem auto;" >
      <el-form :model="regForm" status-icon :rules="rules" label-width="80px" ref="resetForm" class="reset">


        <el-form-item label="旧的密码" prop="password" class="pr">
          <el-input prop="pass" type="password" v-model="regForm.password" placeholder="旧的密码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="新的密码" prop="newpassword" class="pr">
          <el-input prop="pass" type="password" v-model="regForm.newpassword" placeholder="登入密码" auto-complete="off"></el-input>
        </el-form-item>

        <el-form-item label="确认密码" prop="repassword" class="pr">
          <el-input prop="rePass" type="password" v-model="regForm.repassword" placeholder="确认密码" auto-complete="off"></el-input>
        </el-form-item>


        <div class="submit">
          <el-button type="primary" class="submit-btn" @click="onSubmit()">重置密码</el-button>
        </div>
      </el-form>
    </div>
  </div>

</template>

<script>

  import {mapGetters } from 'vuex'
  import {resetPassword} from '@/api/user.js'
  import md5 from '@/utils/md5'

  export default {
    name: 'application',
    data() {
      return {
        loading:false,
        regForm: {
          repassowrd: "",
          password: "",
          newpassowrd: ""
        },
        rules: {
          password:[
            { required: true, message: "请输入密码", trigger: "blur" }
          ],
          repassword:[
            { required: true, message: "请输入密码", trigger: "blur" },
            { required: true, validator: this.validatePass, trigger: "blur" }

          ],
          newpassword:[
            { required: true, message: "请输入密码", trigger: "blur" },
            {min: 6, message: '至少6位', trigger: 'blur'}
          ]
        }
      }
    },


    methods:{
      validatePass(rule, value, callback) {
        if (value == this.regForm.newpassword) {
          callback();
        } else {
          callback(new Error("两次密码不服"));
        }
      },
      showFinish(){
        let that = this
        this.$msgbox({
          title: "修改密码成功",
          message: "恭喜你-密码修改成功",
          showCancelButton: true,
          cancelButtonText:  "回到主页",
          confirmButtonText: "重新登入",
          beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
              that.$router.push({path:'/login'});
              done();
            }else if (action === 'cancel') {
              that.$router.push({path:'/file-manage'});
              done();
            }else{
              done();
            }
          }
        }).catch((res) => {
          console.log(res)
         });
      },
      onSubmit(){
        let that = this
        this.$refs["resetForm"].validate((valid) => {
          if (!valid) return;
          let {password, newpassword } = this.regForm;
          if( newpassword.length < 6) return
          let param = {password: md5(password),newPassword:md5(newpassword) }
          resetPassword( param).then(res=>{
            if( res.code == 200){
              that.showFinish( )
            }
          })
        })
      }
    }
  }
</script>

<style>
  .ipt-select{
    width: 500px;
  }
</style>
