<template>
  <van-form @submit="currentStep===0?submitForm3(1):submitForm3(2)">
    <template v-if="currentStep===0">
      <van-field
        v-model="ruleForm3.mobile"
        type="text"
        name="旧手机号"
        label="旧手机号"
        :readonly="true"
        placeholder="请填写旧手机号"
        :rules="[{ required: true, message: '请填写旧手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
      />
      <van-field
        v-model="ruleForm3.captcha"
        type="number"
        name="验证码"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]">
        <template #button>
          <van-button size="small" type="primary" style="min-width: 20vw;" :disabled="!can_send" @click="getCaptcha(1)">{{ smsMessage }}</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button style="width: 100%;padding: 10px;" round block type="primary"  native-type="submit">
          提交
        </van-button>
      </div>
    </template>
    <template v-else-if="currentStep===1">
      <van-field
        v-model="ruleForm3.new_mobile"
        type="text"
        name="新手机号"
        label="新手机号"
        placeholder="请填写新手机号"
        :rules="[{ required: true, message: '请填写新手机号',trigger: 'onBlur' },{ pattern: pattern2, message: '请输入正确手机号'}]"
      />
      <van-field
        v-model="ruleForm3.new_captcha"
        type="number"
        name="验证码"
        label="验证码"
        placeholder="请输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]">
        <template #button>
          <van-button size="small" type="primary" style="min-width: 20vw;" :disabled="!can_send" @click="getCaptcha(2)">{{ smsMessage }}</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;display: flex;align-items: center;justify-content: space-around;">
        <van-button style="width: 40%;padding: 10px;" round  type="primary"  native-type="submit">
          提交
        </van-button>
        <van-button style="width: 40%;padding: 10px;" round   @click="currentStep = 0">
          返回
        </van-button>
      </div>
    </template>
  </van-form>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useStore } from '@/store/index'
import { showSuccessToast, showFailToast } from 'vant'
import { switchMobile, switchCaptcha } from '@/api/index'
const { user } = useStore()
const pattern2 = ref<RegExp>(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/)
const ruleForm3 = reactive({
  mobile: '',
  captcha: '',
  new_mobile: '',
  new_captcha: ''
})
const can_send = ref<boolean>(true)
const smsMessage = ref<'获取验证码' | number>('获取验证码')
const VALID = 60
let interval:any
const settimes = () => {
  const setTimeFn = () => {
    (smsMessage.value as number)--
    if (smsMessage.value as number < 0 || can_send.value === true) {
      clearInterval(interval)
      can_send.value = true
      smsMessage.value = '获取验证码'
    }
  }
  interval = setInterval(function() {
    setTimeFn()
  }, 1000)
}
const getCaptcha = async(step:1|2) => {
  const params = {
    mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
    step
  }
  await switchCaptcha(params).then((res) => {
    console.log(res)
    can_send.value = false
    smsMessage.value = VALID
    settimes()
    showSuccessToast('验证码已发送，请注意查收')
  }).catch((error) => {
    console.log(error)
    showFailToast(error.data.msg)
  })
}
const submitForm3 = async(step: 1 | 2) => {
  const params = {
    captcha: step === 1 ? ruleForm3.captcha : ruleForm3.new_captcha,
    mobile: step === 1 ? ruleForm3.mobile : ruleForm3.new_mobile,
    step
  }
  await switchMobile(params).then(async(res) => {
    console.log(res)
    showSuccessToast(res.data.msg)
    await user.getUserProfile()
    ruleForm3.mobile = user.profile.mobile
    ruleForm3.captcha = ''
    clearInterval(interval)
    smsMessage.value = '获取验证码'
    can_send.value = true
    currentStep.value = step === 1 ? 1 : 0
  }).catch((error) => {
    console.log(error)
    showFailToast(error.data.msg)
  })
}
const currentStep = ref<1|0>(0)
onMounted(() => {
  ruleForm3.mobile = user.profile.mobile
})

</script>

<style lang="scss" scoped>

</style>
