<route lang="json">
{ "style": { "navigationBarTitleText": "修改手机号" } }
</route>
<script setup lang="ts">
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useUserStore } from '../../../../../store'
import { requestToast } from '../../../../../core/utils/common'
import { getPhoneCode, updateMobile } from '../../../../../core/libs/requests'
import { useRouter } from '../../../../../core/utils/router'
const userStore = useUserStore()
const { reset } = userStore
const router = useRouter()
const formData = ref<{ mobile?: string; code?: string }>({})
const disabled = computed(
  () =>
    !formData.value.mobile ||
    !formData.value.code ||
    formData.value.code.length !== 6 ||
    formData.value.mobile.length !== 11,
)
const sendCodeDisabled = computed(() => !formData.value.mobile && timer.value === 0)
const timer = ref(0)
const interval = ref()
const handleSendCode = async () => {
  const { code } = await requestToast(
    () => getPhoneCode({ mobile: formData.value.mobile, scene: 2 }),
    {
      success: true,
      successTitle: '验证码已发送',
    },
  )
  if (code !== 0) return
  if (timer.value > 0) {
    return
  }
  timer.value = 60
  interval.value = setInterval(() => {
    timer.value--
    if (timer.value === 0) {
      clearInterval(interval.value)
    }
  }, 1000)
}
const handleSubmit = async () => {
  const { code } = await requestToast(
    () => updateMobile({ mobile: formData.value.mobile, code: formData.value.code }),
    {
      success: true,
      successTitle: '修改成功',
    },
  )
  if (code === 0) {
    reset()
    uni.switchTab({
      url: '/pages/home/index',
    })
  }
}
</script>
<template>
  <div class="flex-grow bg-white px-4">
    <div class="form-item mt-18">
      <div class="w-12 text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
        ＋86
      </div>
      <wd-input
        v-model="formData.mobile"
        type="number"
        no-border
        placeholder="请输入手机号"
        class="flex-grow"
      ></wd-input>
    </div>
    <div class="form-item">
      <div class="w-12 text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
        验证码
      </div>
      <wd-input
        v-model="formData.code"
        type="number"
        no-border
        placeholder="请输入验证码"
        class="flex-grow"
      ></wd-input>
      <!-- <div class="text-[#3f598f] text-sm font-normal font-['PingFang_SC'] leading-relaxed">
        获取验证码
      </div> -->
      <wd-button
        block
        type="text"
        :round="false"
        :disabled="sendCodeDisabled"
        class="text-[#3f598f]!"
        @click="handleSendCode"
      >
        {{ timer === 0 ? '获取验证码' : `${timer}s` }}
        <!-- {{ timer }} -->
      </wd-button>
    </div>
    <BottomAppBar fixed :border="false">
      <wd-button block :round="false" :disabled="disabled" @click="handleSubmit">确定</wd-button>
    </BottomAppBar>
  </div>
</template>
<style lang="scss">
.form-item {
  @apply flex items-center py-4 gap-8 border-b b-b-solid b-b-[#f4f4f4];
}
</style>
