<!--
  @description: header-用户自己修改密码
  @author: 肖文龙
  @routerPath:
  @date:  2020/09/13
-->
<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      title="修改密码"
      custom-class="el-dialog__body-p0"
      width="500px"
    >
      <div class="main mb10">
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="fromData"
          :inline-message="true"
        >
          <table class="tableData">
            <tr>
              <td>用户名</td>
              <td>{{ fromData.userName }}</td>
            </tr>
          </table>
          <table class="from_table mt10">
            <tr>
              <td><el-form-item label="原密码" prop="oldPassword" /></td>
              <td>
                <el-input v-model="fromData.oldPassword" />
              </td>
            </tr>
            <tr>
              <td><el-form-item label="新密码" prop="password" /></td>
              <td>
                <gx-input v-model="fromData.password" gx-placeholder="passWord" type="password" />
              </td>
            </tr>
            <tr>
              <td><el-form-item label="确认新密码" prop="repeatPassword" /></td>
              <td>
                <gx-input v-model="fromData.repeatPassword" type="password" gx-placeholder="repeatPassword" />
              </td>
            </tr>
          </table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveData">
          确定
        </el-button>
        <el-button @click="dialogVisible = false">
          取消
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/* api */
import { resetPasswordOfUser } from '@/api/common/user'
/* 公用方法 */
import { passWord, characters1_auto } from '@/assets/js/validate'
import { restoreInitialValue } from '@/assets/js/utils' // 常用方法
import website from '@/assets/js/config/website' // 获取Encrypt公钥

export default {
  data() {
    return {
      title: '', // 标题 新增用户 编辑用户
      editDisable: false,
      dialogVisible: false, // 弹框状态
      // 用户信息
      fromData: {
        id: '', // 用户id
        oldPassword: '', // 原密码
        password: '', // 密码
        repeatPassword: '', // 确认新密码
        userName: '' // 用户名
      },
      rules: {
        // 原密码
        oldPassword: [
          { required: true, validator: characters1_auto, trigger: 'blur' }
        ],
        // 密码
        password: [
          { required: true, validator: characters1_auto, trigger: 'blur' },
          { required: true, validator: passWord, trigger: 'blur' }
        ],
        repeatPassword: [{ required: true, validator: this.rePwd, trigger: 'blur' }] // 确认新密码
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        // 初始化
        restoreInitialValue(this.fromData)
      }
    }
  },
  methods: {
    // 打开弹框
    open(data) {
      this.dialogVisible = true
      this.fromData.userName = data.userName // 用户名
      this.fromData.id = data.id // 用户id
    },
    // 确定
    saveData() {
      // 设置公钥
      this.$Encrypt.setPublicKey(website.publicKey)
      // 点击编辑的确定按钮
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const data = {}
          data.id = this.fromData.id
          data.userName = this.fromData.userName
          data.oldPassword = this.$Encrypt.encryptLong(this.fromData.oldPassword) // 非对称加密
          data.password = this.$Encrypt.encryptLong(this.fromData.password) // 非对称加密
          data.repeatPassword = this.$Encrypt.encryptLong(this.fromData.repeatPassword) // 非对称加密
          // data.oldPassword = this.$Base64.encode(this.fromData.oldPassword)// 加密
          // data.password = this.$Base64.encode(this.fromData.password)// 加密
          // data.repeatPassword = this.$Base64.encode(this.fromData.repeatPassword)// 加密
          resetPasswordOfUser(data).then(() => {
            this.dialogVisible = false
            this.$message({
              message: '更新成功',
              type: 'success'
            })
          })
        }
      })
    },
    // 确认新密码
    rePwd(rule, value, callback) {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.fromData.password) {
        callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>
