<template>
  <div class="form-wrapper">
    <el-form
      ref="ruleFormRef3"
      :model="ruleForm3"
      :rules="rules3"
      label-width="140px"
      class="demo-ruleForm"
      status-icon
    >
      <el-steps style="max-width: 400px;margin: 0 auto" :active="currentStep" finish-status="success">
        <el-step title="Step 1" />
        <el-step title="Step 2" />
      </el-steps>
      <template v-if="currentStep === 0">
        <el-form-item label="旧手机号：" prop="mobile">
          <el-input type="text" :disabled="!!user.profile.mobile" v-model="ruleForm3.mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码：" prop="captcha">

          <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
            <el-input type="text" :disabled="ruleForm3.mobile.length !== 11" v-model="ruleForm3.captcha" placeholder="请输入验证码" />
            <el-button type="primary" @click="getCaptcha(1)" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
          </div>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" size="large" @click="submitForm3(ruleFormRef3, 1)">
            确定
          </el-button>

        </el-form-item>
      </template>
      <template v-if="currentStep === 1">
        <el-form-item label="新手机号：" prop="new_mobile">
          <el-input type="text" v-model="ruleForm3.new_mobile" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="验证码：" prop="new_captcha">

          <div style="display: flex;align-items: center;justify-content: space-between;width: 100%;">
            <el-input type="text" :disabled="ruleForm3.new_mobile.length !== 11" v-model="ruleForm3.new_captcha" placeholder="请输入验证码" />
            <el-button type="primary" @click="getCaptcha(2)" style="width: 100px;" :disabled ="!can_send">{{smsMessage}}</el-button>
          </div>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" size="large" @click="submitForm3(ruleFormRef3, 2)">
            确定
          </el-button>
          <el-button size="large" @click="currentStep = 0">返回</el-button>
        </el-form-item>
      </template>

    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { switchMobile, switchCaptcha } from '@/api/index'
import Message from '@/utils/Message'
import { useStore } from '@/store/index'
const { user } = useStore()
const ruleFormRef3 = ref<FormInstance>()
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()
    Message.success('验证码已发送，请注意查收')
  }).catch((error) => {
    console.log(error)
    Message.error(error.data.msg)
  })
}
const rules3 = reactive<FormRules>({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
  ],
  captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ],
  new_mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '请输入正确手机号', trigger: 'blur' }
  ],
  new_captcha: [
    { required: true, message: '请输入验证码', trigger: 'blur' }
  ]
})
const submitForm3 = async(formEl: FormInstance | undefined, step: 1 | 2) => {
  if (!formEl) return
  await formEl.validate(async(valid, fields) => {
    if (valid) {
      console.log('submit!')

      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)
        Message.success(res.data.msg)
        await user.getUserProfile()
        ruleForm3.mobile = user.profile.mobile
        ruleForm3.captcha = ''
        clearInterval(interval)
        smsMessage.value = '获取验证码'
        can_send.value = true
        currentStep.value++
        if (currentStep.value > 1) {
          currentStep.value = 0
        }
      }).catch((error) => {
        console.log(error)
        Message.error(error.data.msg)
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}
const currentStep = ref<1|0>(0)
onMounted(() => {
  ruleForm3.mobile = user.profile.mobile
})

</script>

<style lang="scss" scoped>

</style>
