<!--
 * @Author: ISFP_T 68358856@qq.com
 * @Date: 2026-02-25 10:02:44
 * @LastEditors: ISFP_T 68358856@qq.com
 * @LastEditTime: 2026-04-01 15:51:38
 * @FilePath: \chef-link-uniapp\src\pages-user\pages\edit-nickname\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script lang="ts" setup>
import Config from '@/config'
import { useUserStore } from '@/store'
import { appUserEditUserInfoPost } from '@/service'
import { debounce } from 'throttle-debounce';
import { z } from "zod";
import * as R from "ramda";

const { t } = useI18n()
const userStore = useUserStore()

const form = ref({
  firstName: userStore.userInfo?.firstName,
  surname: userStore.userInfo?.surname,
})

const FormSchema = z.object({
  firstName: z.string().min(1, { message: t('pages-login.prompt.first-name') }),
  surname: z.string().min(1, { message: t('pages-login.prompt.last-name') }),
})


function checkForm(): boolean {
  const validateFormField = FormSchema.safeParse(form.value)
  if (!validateFormField.success) {
    const fieldErrorMessage = validateFormField.error.flatten().fieldErrors
    const errorMessage: string | undefined = R.path([0, 0], R.values(fieldErrorMessage))
    errorMessage &&
      uni.showToast({
        title: errorMessage,
        icon: 'none',
      })
  }
  return validateFormField.success
}


async function submit() {
  try {
    await appUserEditUserInfoPost({
      body: {
        ...form.value,
      }
    })
    await uni.showToast({ title: t('common.prompt.save-successfully'), icon: 'none' })
    await userStore.getUserInfo()
    setTimeout(uni.navigateBack, 1000)
  } catch (e) {
  }
}

// 提交
const handleSubmit = R.when(checkForm, debounce(Config.debounceLongTime, submit, {
  atBegin: true
}))
</script>

<template>
  <view>
    <navbar :title="t('navbar-nickname')" />
    <view class="py-36rpx px-30rpx bg-#fff">
      <view class="">
        <view class="text-28-bold">{{ t("pages-login.sign-up.first-name") }}</view>
        <view class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
          <wd-input no-border clearable :focus-when-clear="false" :cursorSpacing="20" :maxlength="40"
            v-model.trim="form.firstName" custom-class="flex-1" placeholder="">
          </wd-input>
        </view>
      </view>
      <view class="mt-36rpx">
        <view class="text-28-bold">{{ t("pages-login.sign-up.last-name") }}</view>
        <view class="mt-20rpx flex px-30rpx items-center h-88rpx border-2rpx border-solid border-#D4D4D4 rounded-20rpx">
          <wd-input no-border clearable :focus-when-clear="false" use-prefix-slot :maxlength="40" :cursorSpacing="20"
            v-model.trim="form.surname" custom-class="flex-1" placeholder="">
          </wd-input>
        </view>
      </view>
    </view>

    <view class="mt-318rpx px-30rpx" style="position: fixed; bottom: 30rpx; left: 0; right: 0; z-index: 100;">
      <wd-button custom-class="!h-108rpx !text-36rpx font-bold !rounded-46rpx" block @click="handleSubmit">
        {{ t('common.save') }}
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss"></style>
