<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="密码" prop="password">
        <el-input v-model.trim="form.password" show-password style="width:250px;" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmpassword">
        <el-input v-model.trim="form.confirmpassword" show-password style="width:250px;" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="setPassWord">保 存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import request from '@/utils/request'
export default {
  name: 'Setpassword',
  data() {
    return {
      form: {
        password: '',
        confirmpassword: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{4,40}$/, message: '由英文和数字组成的密码' }
        ],
        confirmpassword: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9]{4,40}$/, message: '由英文和数字组成的密码' }
        ]
      }
    }
  },
  methods: {
    // 编辑密码
    setPassWord() {
      if (this.form.password == '') {
        this.$message.error('请输入密码')
        return false
      }

      if (this.form.confirmpassword == '') {
        this.$message.error('请确认密码')
        return false
      }

      if (this.form.confirmpassword !== this.form.password) {
        this.$message.error('两次密码输入不一致')
        return false
      }

      request({
				  url: '/auth/newPass',
				  method: 'post',
				  data: {
          credential: this.form.password
				  }
      }).then(res => {
        this.$message({
					  type: 'success',
					  offset: 60,
					  message: '设置成功!'
        })

        this.form.password = ''
        this.form.confirmpassword = ''
      })
    }
  }
}
</script>

<style>
</style>
