<template>
  <div class="form">
    <a-form size="large" ref="formRef" :model="form" class="form" @submit="changePassword">
      <a-form-item field="oldpassword" label="输入旧密码"
        :rules="[ { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
        :validate-trigger="['change']">
        <a-input-password placeholder="请输入旧密码(未设置请留空)" allow-clear v-model="form.oldpassword">
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item field="password" label="新密码"
        :rules="[{ required: true, message: '密码不能为空' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
        :validate-trigger="['change']">
        <a-input-password placeholder="请设置新密码" allow-clear v-model="form.password">
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>

      <a-form-item field="password2" label="重复新密码"
        :rules="[{ required: true, message: '请再次输入密码' }, { maxLength: 16, minLength: 8, message: '密码长度需在8~16位之间' }]"
        :validate-trigger="['change']">
        <a-input-password placeholder="请再次输入密码" allow-clear v-model="form.password2">
          <template #prefix>
            <icon-lock />
          </template>
        </a-input-password>
      </a-form-item>
      
      <a-button class="button" type="primary" html-type="submit" :loading="state.button">更改密码</a-button>
    </a-form>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ChangePassword } from '@/api/user'
import { useUserStore } from '@/store/modules/user'
import { Notification, Message } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

let formRef = ref(null)

let state = reactive({
  button: false,
})

let form = reactive({
  oldpassword: '',
  password: '',
  password2: ''
})

const changePassword = async () => {
  try {
    state.button = true
    const v = await formRef.value.validate()
    if (v) return
    if(form.password !== form.password2)
      return Message.error('请确保两次输入的密码一致！')

      let { oldpassword, password } = form
      oldpassword = btoa(oldpassword)
      password = btoa(password)

    const res = await ChangePassword({oldpassword, password })
    if (!res || res.code !== 0) throw new Error(res?.msg ?? '更新密码失败！请稍后再试')

    Message.success('更新密码成功！请重新登录')
    userStore.logout()
    router.push('/login')
  } catch (error) {
    Notification.error({
      title: '更新密码失败！',
      content: error.message || ''
    })
  } finally {
    state.button = false
  }
}
</script>

<style scoped lang="less">
.form {
  width: min(100%, 560px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.button {
  width: 150px;
}

:deep(.arco-form-item-label-col > label) {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .form {
    width: 100%;
    align-items: stretch;
  }

  .button {
    width: 100%;
  }

  :deep(.arco-form-item) {
    margin-bottom: 12px;
  }

  :deep(.arco-form-item-label-col),
  :deep(.arco-form-item-wrapper-col) {
    flex: 0 0 100%;
    max-width: 100%;
  }

  :deep(.arco-form-item-label-col) {
    margin-bottom: 4px;
  }
}
</style>
