<template>
  <div class="account-settings-info-view">
    <a-row :gutter="16">
      <a-col :md="24" :lg="16">
        <a-form-model
          ref="form"
          :rules="rules"
          :model="form"
        >
          <a-form-model-item
            label="原密码"
            prop="oldPassword">
            <a-input-password v-model="form.oldPassword" placeholder="原密码"/>
          </a-form-model-item>
          <a-form-model-item
            label="新密码"
            prop="newPassword">
            <a-input-password v-model="form.newPassword" placeholder="新密码"/>
          </a-form-model-item>
          <a-form-model-item
            label="重复一遍新密码"
            prop="confirmNewPassword">
            <a-input-password v-model="form.confirmNewPassword" placeholder="重复一遍新密码"/>
          </a-form-model-item>
          <a-button type="primary" @click="onSubmit()" :loading="loading">提交</a-button>
        </a-form-model>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { logout, modifyPassword } from '@vue2-client/services/user'
import { mapState } from 'vuex'

// 密码复杂度校验正则表达式
const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_+={}[\]|\\:;'",.<>?/]).{8,20}$/

export default {
  name: 'ModifyPassword',
  computed: {
    ...mapState('account', { currUser: 'user' })
  },
  data () {
    return {
      loading: false,
      // 表单Model
      form: {},
      // 校验
      rules: {
        oldPassword: [
          {
            required: true,
            message: '请输入原密码',
            trigger: 'blur'
          }
        ],
        newPassword: [
          {
            required: true,
            message: '请输入新密码',
            trigger: 'blur'
          },
          {
            pattern: passwordRegex,
            message: '密码必须包含数字、大小写字母、特殊字符，且长度在8到20个字符之间',
            trigger: 'blur'
          }
        ],
        confirmNewPassword: [
          {
            required: true,
            message: '请重复输入一遍新密码',
            trigger: 'blur'
          }
        ],
      }
    }
  },
  methods: {
    onSubmit () {
      this.$refs.form.validate(valid => {
        // 验证未通过直接返回
        if (!valid) {
          return false
        }
        if (this.form.oldPassword === this.form.newPassword) {
          this.$message.warn('新密码不可与原密码相同！')
          return false
        }
        if (this.form.newPassword !== this.form.confirmNewPassword) {
          this.$message.warn('两次新密码不一致！')
          return false
        }
        this.loading = true
        modifyPassword(this.currUser.ename, this.form.oldPassword, this.form.newPassword).then(data => {
          if (data) {
            this.$message.success('修改密码成功，请重新登录！')
            logout().finally(res => {
              location.href = '/login'
            })
          } else {
            this.$message.error('修改密码失败，原密码错误，请重试')
          }
        }).catch(e => {
          this.$message.error('修改密码失败：' + e)
        }).finally(() => {
          this.loading = false
        })
      })
    },
  }
}
</script>

<style lang="less" scoped>
</style>
