<template>
  <a-form
    ref="securityFormRef"
    :model="securityformData"
    class="form"
    :label-col-props="{ span: 8 }"
    :wrapper-col-props="{ span: 16 }"
    layout="vertical"
  >
    <a-form-item
      field="oldPass"
      label="原密码"
      show-colon
      :rules="[
        {
          required: true,
          minLength: 6,
          message: '原密码不能为空，且长度必定大于6位'
        }
      ]"
    >
      <a-input-password
        v-model="securityformData.oldPass"
        placeholder="请输入原登录密码"
      />
    </a-form-item>
    <a-form-item
      field="newPass"
      label="新密码"
      show-colon
      :rules="[{ required: true, validator: validatePass }]"
    >
      <a-input-password
        v-model="securityformData.newPass"
        placeholder="请输入登录新密码"
      />
    </a-form-item>
    <a-form-item
      field="checkPass"
      label="确认密码"
      show-colon
      :rules="[{ required: true, validator: validatePass2 }]"
    >
      <a-input-password
        v-model="securityformData.checkPass"
        placeholder="再次确认新密码"
      />
    </a-form-item>
    <a-form-item>
      <a-space>
        <a-button type="secondary" @click="reset"> 重置 </a-button>
        <a-button type="primary" @click="modifyBaseData"> 提交 </a-button>
      </a-space>
    </a-form-item>
  </a-form>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { FormInstance } from '@arco-design/web-vue/es/form'
import { setSelfInfo } from '@/api/client'
import useUser from '@/hooks/user'
import { Modal } from '@arco-design/web-vue'
import { useUserStore } from '@/store'
import { Md5 } from 'ts-md5'

const userStore = useUserStore()
const { getRouter } = userStore
const { logout } = useUser(getRouter)
const securityFormRef = ref<FormInstance>()
const securityformData = reactive({
  oldPass: '',
  newPass: '',
  checkPass: ''
})

const validatePass = (value: any, callback: any) => {
  if (value === undefined || value.length <= 5) {
    callback('密码不能为空，且必须不能小于六位')
  } else {
    if (securityformData.checkPass !== '') {
      if (!securityFormRef.value) return
      securityFormRef.value.validateField('checkPass', () => null)
    }
    callback()
  }
}
const validatePass2 = (value: any, callback: any) => {
  if (value === '') {
    callback('请再次输入密码')
  } else if (value !== securityformData.newPass) {
    callback('两次密码不匹配')
  } else {
    callback()
  }
}
const times = ref(5)
/**
 * 修改个人基本信息
 */
const modifyBaseData = async () => {
  const valid = await securityFormRef.value?.validate()
  if (!valid) {
    const { newPass, oldPass } = securityformData
    await setSelfInfo({
      old_pass: Md5.hashStr(oldPass),
      new_pass: Md5.hashStr(newPass)
    })
    await reset()
    const timer = setTimeout(() => {
      modal.close()
      logout()
    }, 5000)
    const modal = Modal.success({
      title: '密码修改成功',
      okText: '立即退出',
      content: `登录信息过期，需重新登录，${times.value}秒后将退出登录！`,
      onOk: () => {
        logout()
        clearTimeout(timer)
      }
    })
  }
}

/**
 * 重置表单
 */
const reset = async () => {
  await securityFormRef.value?.resetFields()
}
</script>

<script lang="ts">
export default {
  name: 'BaseSetting'
}
</script>

<style scoped lang="less">
.form {
  width: 540px;
  margin: 0 auto;
}
</style>
