<template>
  <el-form
    ref="loginRef"
    :model="loginForm"
    :rules="loginRules"
  >
    <el-form-item prop="telNo">
      <el-input
        v-model="loginForm.telNo"
        type="text"
        size="large"
        auto-complete="off"
        placeholder="请输入手机号，可作为登录账号"
      >
        <template #prefix><svg-icon icon-class="phone" class="el-input__icon input-icon" /></template>
      </el-input>
    </el-form-item>
    <el-form-item prop="captcha">
      <captcha ref="codeRef" v-model="loginForm.captcha" v-model:uuid="loginForm.uuid" @keyup.enter="handleLogin" />
    </el-form-item>
    <el-form-item prop="code">
      <captcha-sms v-model="loginForm.code" :verify="checkCaptchaSms" @keyup.enter="handleLogin" @error="getCode" />
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        :loading="loading"
        size="large"
        type="success"
        style="width: 100%;border: 0;"
        @click.prevent="handleLogin"
      >
        <span v-if="!loading">登 录</span>
        <span v-else>登 录 中...</span>
      </el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { getCurrentInstance } from '@vue/runtime-core'
import useUserStore from '@/store/modules/user'
import { ref } from 'vue'
import Captcha from './captcha'
import CaptchaSms from './captchaSms'
import { ElMessage } from 'element-plus'

const { proxy } = getCurrentInstance()
const userStore = useUserStore()
const emit = defineEmits(['submit'])

const loading = ref(false)

const loginForm = ref({
  telNo: '',
  captcha: '',
  code: '',
  uuid: ''
})

const loginRules = {
  telNo: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  captcha: [{ required: true, trigger: 'blur', message: '请输入图形验证码' }],
  code: [{ required: true, trigger: 'change', message: '请输入短信验证码' }]
}

// 发送短信验证码
function checkCaptchaSms() {
  // 判断手机号正确
  if (!loginForm.value.telNo) {
    ElMessage({
      showClose: true,
      message: '请输入手机号',
      type: 'error'
    })
    return Promise.reject()
  }
  // 判断验证码填了没
  if (!loginForm.value.captcha) {
    ElMessage({
      showClose: true,
      message: '请输入图形验证码',
      type: 'error'
    })
    return Promise.reject()
  }

  const strTemp = /^1[3|4|5|6|7|8|9][0-9]{9}$/
  if (!strTemp.test(loginForm.value.telNo)) {
    ElMessage({
      showClose: true,
      message: '请输入正确的手机号',
      type: 'error'
    })
    return Promise.reject()
  }

  return Promise.resolve({
    uuid: loginForm.value.uuid,
    telNo: loginForm.value.telNo,
    captcha: loginForm.value.captcha
  })
}

function handleLogin() {
  proxy.$refs['loginRef'].validate((valid) => {
    if (valid) {
      loading.value = true
      // 调用action的登录方法
      userStore
        .loginByPhone(loginForm.value)
        .then(() => {
          emit('submit')
        })
        .catch(() => {
          loading.value = false
          // 重新获取验证码
          getCode()
        })
    }
  })
}

function getCode() {
  proxy.$refs['codeRef'].getCode()
}

</script>

<style scoped>

</style>