<script setup>
import { putProfileUpdatePwdApi } from '@/api/elevator'
import { ACCESS_TOKEN_KEY } from '@/constants/storage'
import { tryFormValidate } from '@/helper/async'
import { useUserStore } from '@/store/user'

const form = ref(null)
const model = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})
const rules = ref({
  oldPassword: {
    type: 'string',
    required: true,
    message: '请输入旧密码',
    trigger: ['change']
  },
  newPassword: {
    type: 'string',
    required: true,
    message: '请输入新密码',
    trigger: ['change']
  },
  confirmPassword: {
    type: 'string',
    required: true,
    message: '请输入确认密码',
    trigger: ['change']
  }
})

const { setUserInfo } = useUserStore()
const submit = async () => {
  // 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
  const [isOk] = await tryFormValidate(form)

  if (isOk) {
    const { oldPassword, newPassword, confirmPassword } = model.value
    if (newPassword !== confirmPassword) {
      return uni.$u.toast('两次密码输入不一致')
    }
    const { error, result } = await putProfileUpdatePwdApi({
      oldPassword,
      newPassword
    })
    if (!error) {
      uni.$u.toast('修改成功')
      uni.setStorageSync(ACCESS_TOKEN_KEY, '')
      setUserInfo({})
      uni.reLaunch({
        url: '/pages/views/login/index'
      })
    } else {
      const { msg } = result
      uni.$u.toast(msg || '修改失败，请稍后重试')
    }
  } else {
    uni.$u.toast('请核对填写的信息')
  }
}

const showPwd = ref({
  oldPassword: false,
  newPassword: false,
  confirmPassword: false
})
const pwdType = ref({
  oldPassword: 'password',
  newPassword: 'password',
  confirmPassword: 'password'
})
const switchPwdVisible = (key) => {
  showPwd.value[key] = !showPwd.value[key]
  pwdType.value[key] = pwdType.value[key] === 'password' ? 'text' : 'password'
}
</script>

<template>
  <view min-h-100vh px-30>
    <up-form
      ref="form"
      label-width="80"
      label-position="left"
      :model="model"
      :rules="rules"
    >
      <up-form-item label="旧密码" prop="oldPassword" border-bottom>
        <up-input
          v-model="model.oldPassword"
          :border="`${'none'}`"
          :type="pwdType.oldPassword"
          placeholder="请输入旧密码"
        />
        <template #right>
          <view w-60 h-60 f-c-c @tap="switchPwdVisible('oldPassword')">
            <up-icon v-if="showPwd.oldPassword" name="eye-fill" />
            <up-icon v-else name="eye-off" />
          </view>
        </template>
      </up-form-item>
      <up-form-item label="新密码" prop="newPassword" border-bottom>
        <up-input
          v-model="model.newPassword"
          placeholder="请输入新密码"
          :type="pwdType.newPassword"
          :border="`${'none'}`"
        />
        <template #right>
          <view w-60 h-60 f-c-c @tap="switchPwdVisible('newPassword')">
            <up-icon v-if="showPwd.newPassword" name="eye-fill" />
            <up-icon v-else name="eye-off" />
          </view>
        </template>
      </up-form-item>
      <up-form-item label="确认密码" prop="confirmPassword" border-bottom>
        <up-input
          v-model="model.confirmPassword"
          :border="`${'none'}`"
          :type="pwdType.confirmPassword"
          placeholder="请输入确认密码"
        />
        <template #right>
          <view w-60 h-60 f-c-c @tap="switchPwdVisible('confirmPassword')">
            <up-icon v-if="showPwd.confirmPassword" name="eye-fill" />
            <up-icon v-else name="eye-off" />
          </view>
        </template>
      </up-form-item>
    </up-form>

    <up-button
      type="primary"
      text="完成"
      custom-style="margin-top: 30px"
      @click="submit"
    />
  </view>
</template>
