<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '忘记密码',
    navigationStyle: 'custom',
  },
  notNeedLogin: false,
}
</route>
<template>
  <view class="login-container relative">
    <NavBar />
    <view class="pt-45">
      <view class="mx-15 px-15 shadow-[0_0_10px_rgba(10,68,245,0.1)] rounded-10">
        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/phone.png" mode="aspectFit" />
          <input
            v-model="form.member_username"
            type="text"
            placeholder-class="text-#889BC6"
            class="text-right flex-1 text-14"
            placeholder="请输入用户名"
          />
        </view>

        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
          <input
            v-model="form.old_password"
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请输入旧登录密码"
          />
        </view>

        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
          <input
            v-model="form.member_password"
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请再次新登录密码"
          />
        </view>
        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
          <input
            v-model="form.confirm_member_password"
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请再次输入新登录密码"
          />
        </view>
        <!-- <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
          <input
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请输入支付密码"
          />
        </view>
        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/password.png" mode="aspectFit" />
          <input
            placeholder-class="text-#889BC6"
            type="password"
            class="text-right flex-1 text-14"
            placeholder="请再次输入支付密码"
          />
        </view> -->
        <view class="flex items-center py-15">
          <image class="w-24 h-24" src="@/static/images/login/message.png" mode="aspectFit" />
          <input
            v-model="form.verify_code"
            type="text"
            placeholder-class="text-#889BC6"
            class="text-right flex-1 text-14"
            placeholder="请输入图形验证码"
          />
          <image :src="codeUrl" class="ml-10 w-80 h-30" @click="handleGetCode" />
        </view>
      </view>
      <view
        class="mt-50 text-center py-12 rounded-full mx-15 text-15 text-white btn-gradient"
        @click="handleUpdatePassword"
      >
        确认
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import NavBar from '@/components/NavBar.vue'
import { isLogged, loginRoute } from '@/interceptors/route'
import { getCodeAPI, updateUserAPI } from '@/service'
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const form = ref({
  member_username: '',
  member_password: '',
  confirm_member_password: '',
  verify_code: '',
  old_password: '',
})

let redirect = '/'
onLoad((options) => {
  redirect = options.redirect ?? '/'
})

const { codeUrl, refreshCode: handleGetCode } = useCaptcha()

onLoad(async () => {
  if (isLogged()) {
    uni.reLaunch({
      url: redirect,
    })
  }
})

const handleUpdatePassword = async () => {
  if (!form.value.member_username) {
    uni.showToast({
      title: '请输入用户名',
      icon: 'none',
    })
    return
  }
  if (!form.value.old_password) {
    uni.showToast({
      title: '请输入旧登录密码',
      icon: 'none',
    })
    return
  }
  if (!form.value.member_password) {
    uni.showToast({
      title: '请输入新登录密码',
      icon: 'none',
    })
    return
  }
  if (form.value.member_password !== form.value.confirm_member_password) {
    uni.showToast({
      title: '两次输入的密码不一致',
      icon: 'none',
    })
    return
  }
  if (!form.value.verify_code) {
    uni.showToast({
      title: '请输入图形验证码',
      icon: 'none',
    })
    return
  }
  // userStore.setUserInfo({
  //   token: '123456',
  // })
  await updateUserAPI(form.value)
  uni.showToast({
    title: '修改密码成功',
    icon: 'none',
  })
  uni.redirectTo({
    url: loginRoute,
  })
  // uni.reLaunch({
  //   url: redirect,
  // })
}
onLoad(() => {
  if (isLogged()) {
    uni.reLaunch({
      url: redirect,
    })
  }
})
</script>

<style lang="scss">
.login-container {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: 200rpx;
  background-image: url('@/static/images/login-bg.png');
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
