<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    disableScroll: true
  },
  needLogin: false
}
</route>
<template>
  <view>
    <TopNavigation></TopNavigation>
    <view class="text-6 ml-4 pt-7 custom-color-black font-bold">请输入手机号</view>
    <view class="p-5">
      <wd-input
        v-model="phone"
        :maxlength="11"
        clearable
        placeholder="请输入手机号码"
        placeholderClass="text-4 custom-color-grey"
        size="large"
        type="number"
        @change="phoneChange"
      />
    </view>
  </view>
  <view class="p-5">
    <wd-button :block="true" :disabled="!phonePass" :round="false" size="large" @click="codeLogin">
      获取验证码
    </wd-button>
  </view>
</template>

<script setup lang="ts">
  import { phoneRegExp } from '@/constants/regular-expressions'
  import { AccountChannel, CodeType, IResData } from '@/typings'
  import { getCodeApi, UserGetCodeRequest } from '@/service/user'
  import { Result } from '@/constants/result'

  const phone = ref<string>('')
  const phonePass = computed(() => phoneRegExp.test(phone.value))

  onLoad(options => {
    if (options.phone) {
      phone.value = options.phone
    }
  })

  const codeLogin = async () => {
    if (!phonePass.value) {
      return
    }
    await uni.showLoading({
      title: '加载中',
      mask: true
    })
    try {
      const result: IResData = await getCodeApi<UserGetCodeRequest>({
        account: phone.value,
        channel: AccountChannel.phone,
        codeType: CodeType.reset
      })
      uni.hideLoading()
      if (result.errorCode === Result.Success.code) {
        await uni.navigateTo({
          url: `/pages/reset-password/reset-password?phone=${phone.value}`
        })
      } else {
        await uni.showToast({
          title: result.errorMsg,
          icon: 'none'
        })
      }
    } catch (err) {
      console.log(err)
      uni.hideLoading()
      await uni.showToast({
        title: '获取验证码失败，请稍后再试',
        icon: 'none'
      })
    }
  }

  const phoneChange = (value: string) => {
    phone.value = value
  }
</script>
