<template>
  <main class="wrapper">
    <img class="wrapper__img" src="http://www.dell-lee.com/imgs/vue3/user.png" />
    <form class="wrapper__form">
      <div class="wrapper__input">
        <input class="wrapper__input__content"  placeholder="请输入用户名/手机号" v-model="form.username"/>
      </div>

      <div class="wrapper__input">
        <input class="wrapper__input__content" type="password" autocomplete="new-password" placeholder="请输入密码" v-model="form.password" />
      </div>

      <div class="wrapper__input">
        <input class="wrapper__input__content" type="password" autocomplete="new-password" placeholder="请再次密码" v-model="form.ensurement"/>
      </div>
      <div>
        <button type="button" class="wrapper__login-button" @click="handleClickRegisster">注册</button>
      </div>
      <div class="wrapper__login-link" @click="handleLogin">已有账号去登陆</div>
    </form>
  </main>
  <Toast v-if="showToast" :message="toastMessage"/>
</template>

<script>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { register } from '@/api/user'
import { useToastEffect } from '@/components/global/Toast'

// 已有账号
const useToLoginEffect = () => {
  const router = useRouter()
  const handleLogin = () => {
    router.push({ path: '/login' })
  }
  return { handleLogin }
}

// 校验函数
// const useVerifyEffect = (showToastFunc, form) => {
//   const handleVerift = () => {
//     for (const i in form) {
//       if (!form[i]) {
//         showToastFunc('请填写完整', 4000)
//         return false
//       }
//     }
//   }
//   return { handleVerift }
// }

// 注册
const useRegissterEffect = (showToastFunc, handleVerift) => {
  // const router = useRouter()
  const form = reactive({
    username: '',
    password: '',
    ensurement: ''
  })

  const handleClickRegisster = async () => {
	const bool = handleVerift() // 这里会报错，因为无法获取到form
    const target = {
      ...form
    }

    showToastFunc('注册中', 4000)
    const data = await register(target, () => {
      showToastFunc('注册中', 4000)
    })
    console.log('data: ', data)

    showToastFunc('注册成功', 4000)
  }

  return { form, handleClickRegisster }
}
export default {
  setup () {
    const { handleLogin } = useToLoginEffect()
    const { showToast, toastMessage, showToastFunc } = useToastEffect()
    const { form, handleClickRegisster } = useRegissterEffect(showToastFunc)
    // const { handleVerift } = useVerifyEffect(showToastFunc, form)
    return {
      handleLogin,
      form,
      handleClickRegisster,
      showToast,
      toastMessage
    }
  }
}
</script>

老师请问下，我这里写了校验的方法，想抽离出来使用，但是我发现这个执行顺序解决不了，因为，这里我要调用useRegissterEffect返回值 =》 form，但是 useRegissterEffect里面的点击事件我也要调用useVerifyEffect函数的返回值 =》handleVerift，所以这个顺序我不管怎么弄，始终会出问题，老师，您能给我提供下思路吗？谢谢了，因为在平时会经常用到，一个函数的返回值会在另外一个函数使用，并且另外一个函数的返回值会在这个函数使用