<template>
  <el-drawer
    :title="$t('password.title')"
    :visible="true"
    :before-close="clickClose"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :modal-append-to-body="true"
    :append-to-body="true"
    custom-class="drawer-auto-layout"
  >
    <div class="drawer-form">
      <el-form ref="dataForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item :label="$t('password.old')" prop="oldPassword">
          <el-input
            v-model.trim="formData.oldPassword"
            type="password"
            :placeholder="$t('password.placeholderOld')"
          />
        </el-form-item>
        <el-form-item :label="$t('password.new')" prop="newPassword">
          <el-input
            v-model.trim="formData.newPassword"
            type="password"
            :placeholder="$t('password.placeholderNew')"
          />
        </el-form-item>
        <el-form-item :label="$t('password.confirm')" prop="rePassword">
          <el-input
            v-model.trim="formData.rePassword"
            type="password"
            :placeholder="$t('password.placeholderConfirm')"
          />
        </el-form-item>
      </el-form>
    </div>
    <div class="drawer-footer">
      <el-button @click="clickClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" :loading="submitLoading" :disabled="submitLoading" @click="clickSubmit">{{ $t('common.submit') }}</el-button>
    </div>
  </el-drawer>
</template>

<script>
import { resetPassword } from '@/api/ops-system'

export default {
  data() {
    const passwordValid = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('password.required')))
      } else if (value.length < 4) {
        callback(new Error(this.$t('password.invalidLength')))
      } else {
        callback()
      }
    }

    return {
      submitLoading: false,
      formData: {
        newPassword: '',
        oldPassword: '',
        rePassword: ''
      },
      rules: {
        newPassword: [{ required: true, validator: passwordValid, trigger: 'blur' }],
        oldPassword: [{ required: true, validator: passwordValid, trigger: 'blur' }],
        rePassword: [{ required: true, validator: passwordValid, trigger: 'blur' }]
      }
    }
  },
  methods: {
    clickSubmit() {
      this.$refs.dataForm.validate(valid => {
        if (!valid) {
          return false
        }

        if (this.formData.newPassword !== this.formData.rePassword) {
          this.$opsMessage.fail(this.$t('password.mismatch'))
          return false
        }

        this.submitLoading = true
        resetPassword(this.formData).then(() => {
          this.submitLoading = false
          this.$emit('success')
          this.$store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        }).catch(error => {
          this.submitLoading = false
          this.$emit('fail', error)
        })

        return true
      })
    },
    clickClose() {
      if (this.submitLoading) {
        this.$opsMessage.warn(this.$t('password.processing'))
        return
      }
      this.$emit('close')
    }
  }
}
</script>
