<template>
  <el-dialog
    title="修改密码"
    :visible.sync="visible"
    width="400px"
    top="25vh"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
    append-to-body
  >
    <!-- <span>修改密码</span> -->
    <input-item
      type="password"
      placeholder="请输入原始密码"
      title="原密码："
      nominate="originalPassword"
      custom-style="width: 320px;line-height:32px;"
      :value="originalPassword"
      :max-length="50"
      :disabled="false"
      :required="true"
      @changeValue="onInput"
    />
    <input-item
      type="password"
      placeholder="请输入新密码"
      title="新密码："
      nominate="newPassword"
      custom-style="width: 320px;line-height:32px; margin: 20px 0"
      :value="newPassword"
      :max-length="50"
      :disabled="false"
      :required="true"
      @changeValue="onInput"
    />
    <input-item
      type="password"
      placeholder="请确认密码"
      title="确认密码："
      nominate="confirmPassword"
      custom-style="width: 320px;line-height:32px;"
      :value="confirmPassword"
      :max-length="50"
      :disabled="false"
      :required="true"
      @changeValue="onInput"
    />
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="confirmModifyPassWord">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script lang="ts">
import { Vue, Component, Watch, Prop } from 'vue-property-decorator'
import { changePassword } from '@/api/base'
import { verification } from '@/utils/index'
import { regNewPassword } from '@/utils/reg'
import InputItem from '@/components/FormItem/Input/index.vue'

import { encryption } from '@/utils/encryption'

//修改密码
@Component({ name: 'modifyPsw', components: { InputItem } })
export default class modifyPsw extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: any
  @Prop({ type: Object, default: () => {} }) modifyParam!: object

  originalPassword = ''
  newPassword = ''
  confirmPassword = ''
  dialogPassword = false
  // 确定修改密码
  confirmModifyPassWord() {
    const verificationPwd = verification([
      { condition: !this.originalPassword, errmsg: '请输入原密码' },
      { condition: !this.newPassword, errmsg: '请输入新密码' },
      {
        condition: !regNewPassword().test(this.newPassword),
        errmsg: '密码位数至少12位，必须包含大小写字母和数字，不可包含非法字符！'
      },
      {
        condition: this.confirmPassword !== this.newPassword,
        errmsg: '两次密码输入不相同！'
      },
      {
        condition: this.originalPassword === this.newPassword,
        errmsg: '新密码和原始密码一样'
      }
    ])
    if (!verificationPwd.success) {
      this.$message.error(verificationPwd.errmsg[0])
      return false
    }
    let params = {
      ...this.modifyParam,
      originalPassword: encryption(this.originalPassword),
      password: encryption(this.newPassword)
    }
    changePassword(params).then((res) => {
      if (res.code !== -1) {
        this.$message.success('密码修改成功')
        this.$emit('refresh', this.newPassword)
        this.cancel()
      }
    })
  }
  /**
   * 输入框组件数据绑定方法事件
   * @param {*} key
   * @param {*} event
   */
  onInput(key, event) {
    this[key] = event
  }
  cancel() {
    this.originalPassword = ''
    this.newPassword = ''
    this.confirmPassword = ''
    this.$emit('close')
  }
}
</script>

<style>
</style>