<!--
  @description: 系统设置->用户管理-重置密码
  @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="400px"
    >
      <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>
            <tr>
              <td>姓名</td>
              <td>{{ fromData.realName }}</td>
            </tr>
            <tr>
              <td>手机号码</td>
              <td>{{ fromData.mobilePhone }}</td>
            </tr>
            <tr>
              <td>邮箱</td>
              <td>{{ fromData.email }}</td>
            </tr>
          </table>
          <table class="from_table mt10">
            <tr>
              <td><el-form-item label="密码" prop="password" /></td>
              <td>
                <gx-input v-model="fromData.password" type="password" gx-placeholder="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 { resetPasswordOfSystem } from '@/api/common/user'
/* 公用方法 */
import { passWord } 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: '',
        realName: '', // 真实姓名
        userName: '', // 用户名
        email: '', // 邮箱
        password: '', // 密码
        mobilePhone: '', // 手机号码
        repeatPassword: '' // 确认新密码
      },
      rules: {
        password: [{ 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 = { ...this.fromData, ...data }
    },
    // 确定
    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.password = this.$Encrypt.encryptLong(this.fromData.password) // 非对称加密
          data.repeatPassword = this.$Encrypt.encryptLong(this.fromData.repeatPassword) // 非对称加密
          // data.password = this.$Base64.encode(this.fromData.password)// 加密
          // data.repeatPassword = this.$Base64.encode(this.fromData.repeatPassword)// 加密
          resetPasswordOfSystem(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>
