<template>
  <div v-loading="loading">
    <el-image :src="require('../../assets/bg_main_new2.jpg')" />

    <el-form :rules="rules" ref="changePwdForm" :model="formData" class="changePwd_form">
      <el-button type="text">{{userInfo1}}</el-button>
      <el-form-item v-if="userInfo2">
        <el-button type="text">{{userInfo2}}</el-button>
      </el-form-item>
      <el-form-item prop="oldPwd">
        <el-input v-model="formData.oldPwd" autocomplete="off" type="password" show-password clearable
                  prefix-icon="el-icon-lock" placeholder="请输入原密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pwd">
        <el-input v-model="formData.pwd" autocomplete="off" type="password" show-password clearable
                  prefix-icon="el-icon-lock" placeholder="请输入新密码"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input v-model="formData.checkPass" autocomplete="off" type="password" show-password clearable
                  prefix-icon="el-icon-lock" placeholder="请再次输入新密码"
        ></el-input>
      </el-form-item>

    </el-form>

    <div class="changePwd_bottom">
      <el-button type="primary" @click="goHome" class="changePwd_bottom_button">回到上一页</el-button>
      <el-button type="primary" @click="change" class="changePwd_bottom_button">修改密码</el-button>
    </div>
  </div>
</template>

<script>
  import {changePwd,userOne} from '../../api'
  import {decryptData_ECB} from "@/api/tool/sm4";
  import {validatePasswordCH} from "@/util/ruoyi";

  export default {
    name: 'ChangePwd',
    data() {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else if (value.length < 8 || value.length > 20) {
          callback(new Error("密码长度在 8 到 20 个字符"));
        } else if (!validatePasswordCH(value)) {
          callback(new Error("密码包含数字丶字母丶特殊字符三种"));
        } else {
          if (this.formData.checkPass !== '') {
            this.$refs.changePwdForm.validateField('checkPass');
          }
          callback();
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.formData.pwd) {
          callback(new Error('两次输入密码不一致!'));
        } else if (!validatePasswordCH(value)) {
          callback(new Error("密码包含数字丶字母丶特殊字符三种"));
        } else {
          callback();
        }
      };
      return {
        loading: false,
        userInfo1: '',
        userInfo2: '',
        formData: {
          oldPwd: '',
          pwd: '',
          checkPass: ''
        },
        rules: {  //数据校验规则
          oldPwd: [
            {required: true, message: '请输入原密码', trigger: 'blur'}
          ],
          pwd: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
        },
      }
    },
    methods: {
      async one() {
        let result = await userOne();
        decryptData_ECB(result, ["userName", "phone"]);
        if (result.data ){
          let user = result.data;
          this.userInfo1 =
                  `账号:${user.loginName}(${user.dept.name})`;
          this.userInfo2 = (user.userName && user.phone) ?
                  `姓名:${user.userName||'无'} 手机:${user.phone||'无'} ` : '';
        }
      },
      goHome() {
        this.$router.replace("/my/index")
      },
      change() {
        this.$refs['changePwdForm'].validate((v) => {
          if (v) {
            this.requestChangePwd();
          }
        });
      },
      async requestChangePwd() {
        this.loading = true;
        let result = await changePwd(this.formData, "GET");
        this.loading = false;

        if (result.code == 0) {
          this.$message.success('修改成功');

          this.$router.replace('/main');
        }

      }

    },
    mounted() {
      this.one();
    }
  }
</script>


<style scoped>
  .changePwd_form {
    margin-left: 10%;
    margin-right: 10%;
  }

  .changePwd_bottom {
    margin-top: 50px;
    text-align: center
  }

  .changePwd_bottom_button {
    width: 38%;
  }
</style>
