<template>
  <div v-loading="loading">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" class="modifyPass_form">
      <el-form-item label="账号">
        <el-alert
          :title="ruleForm.usercode"
          :closable="false"
          class="user_item"
          type="success"/>
      </el-form-item>
      <el-form-item label="姓名">
        <el-alert
          :title="username"
          :closable="false"
          class="user_item"
          type="success"/>
      </el-form-item>
      <el-form-item label="新密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" auto-complete="off" placeholder="请输入新密码"/>
      </el-form-item>
      <el-form-item label="确认密码" prop="surepassword">
        <el-input v-model="ruleForm.surepassword" type="password" auto-complete="off" placeholder="请再次输入密码" @keyup.enter.native="submitForm"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">保存</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import md5 from 'js-md5'
import { getUserAccount, updatePassword } from '@/api/systemSetup/roleSetting/userManage'
import { validPassword } from '@/utils/validate'

export default {
  name: 'ModifyPass',
  props: {
    rowid: {
      type: Number,
      default: 0
    },
    ispersonal: {
      type: Boolean,
      default: false
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    const validatePass = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('请输入有效的密码（6-32个字符只能是字母、下划线、数字）！'))
      } else {
        if (this.ruleForm.surepassword !== '') {
          this.$refs.ruleForm.validateField('surepassword')
        }
        callback()
      }
    }

    const validatePass2 = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('请输入有效的确认密码（6-32个字符只能是字母、下划线、数字）！'))
      } else {
        if (value !== this.ruleForm.password) {
          callback(new Error('两次输入密码不一致!'))
        }
        callback()
      }
    }

    return {
      username: '', //	string	姓名
      ruleForm: {
        usercode: '', //	string	工号
        password: '', //	string	密码
        surepassword: '' //	string	确认密码
      },
      rules: {
        password: [{
          required: true,
          trigger: 'change',
          validator: validatePass
        }],
        surepassword: [{
          required: true,
          trigger: 'change',
          validator: validatePass2
        }]
      },
      loading: false
    }
  },
  created() {
    if (this.rowid) {
      this.getDetail(this.rowid)
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.ruleForm.password = md5(this.ruleForm.password)
          this.ruleForm.surepassword = md5(this.ruleForm.surepassword)
          updatePassword(this.ruleForm).then(response => {
            this.loading = false
            if (response.state.toLowerCase() === 'success') {
              this.$parent.$layer.close(this.layerid)
              if (!this.ispersonal) {
                this.$parent.getList() // 重新加载父级数据
              }
              this.$message.success(`恭喜你，密码修改成功!`)
            }
          }).catch(() => {
            this.loading = false
          })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    // 详情
    getDetail(rid) {
      getUserAccount(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.usercode = res.F_UserCode
          this.username = res.F_UserName
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
	.modifyPass_form{
		.user_item{
			height: 32px;
		}
	}
</style>
