<template>
<div class="login-phone">
<el-form :model="form" :rules="formRules" ref="formRef">
<el-form-item prop="phone" v-if="isShowPhone">
<el-input
v-model="form.phone"
class="input-height"
clearable
:prefix-icon="hasIcon && icon.phone"
placeholder="请输入手机号"
type="text"
/>
</el-form-item>
<el-form-item prop="code" class="form-item">
<el-input
v-model="form.code"
:prefix-icon="hasIcon && icon.code"
type="text"
clearable
class="input-height"
placeholder="请输入验证码"
max="6"
/>
<el-button
@click="sendCodeFunc"
:loading="buttonLoading"
:disabled="form.codeTime !== 0 && sendButtonIsDisabled"
>
{{ getButtonTxt() }}
</el-button>
</el-form-item>
</el-form>
</div>
</template>

<script>
import { ElMessage } from 'element-plus'
import { defineComponent, reactive, ref, toRefs, watch } from 'vue'
const phoneRegular = /^1[0-9]{8}$/

export default defineComponent({
components: {},
props: {
//是否显示icon
hasIcon: {
type: Boolean,
default: false,
},
//图标
icon: {
type: Object,
default: () => ({
phone: 'el-icon-phone-outline',
code: 'el-icon-message',
}),
},
tips: {
type: Object,
default: () => ({
// 成功
success: '验证码发送成功！',
// 失败
fail: '验证码发送失败！',
// 冷却
coolingTime: '请耐心等待验证码！',
}),
},
//发送验证码期间是否禁用
sendButtonIsDisabled: {
type: Boolean,
default: false,
},
//是否显示手机号
isShowPhone: {
type: Boolean,
default: false,
},
//发送验证码方法
sendCode: {
type: Function,
default: () => {
// 默认方法
},
},
//手机号
phone: {
type: String,
default: '',
},
},
emit: ['sendFail'],
setup(props, { emit }) {
//表单数据
const form = reactive({
phone: '',
code: '',
isSendCode: false,
codeTime: 0,
})
//表单ref
const formRef = ref(null)
// 表单校验
const formRules = {
phone: [
{
required: true,
message: '请输入手机号',
},
{
pattern: phoneRegular,
message: '请输入正确的手机号',
},
],
code: [
{
validator: (rule, value, callback) => {
rule
const { isSendCode } = form
if (value === '') {
callback(new Error('请输入验证码'))
} else if (!isSendCode) {
callback(new Error('请先发送验证码'))
} else {
callback()
}
},
},
],
}

    //监听
    const { code, phone } = toRefs(form)
    watch(
        [code, phone],
        newData => {
            emit('update:modelValue', {
                code: newData[0],
                phone: props.isShowPhone ? newData[1] : props.phone,
            })
        },
        {
            deep: true,
        }
    )
    //校验是否发送成功
    const formValidateField = id => {
        return new Promise(resolve => {
            formRef.value.validateField(id, check => {
                if (check === '') {
                    resolve(true)
                } else {
                    resolve(false)
                }
            })
        })
    }
    //按钮加载中
    const buttonLoading = ref(false)
    // 发送验证码
    const sendCodeFunc = async () => {
        const { fail, success, coolingTime } = props.tips
        //如果时间还没到
        if (form.codeTime !== 0) {
            ElMessage.info(coolingTime)
            return false
        }
        //手机号
        let phoneNumber = ''
        buttonLoading.value = true
        //显示手机号
        if (props.isShowPhone) {
            const formValuidateValue = await formValidateField('phone')
            if (formValuidateValue) {
                phoneNumber = form.phone
                // 校验成功
            } else {
                // 校验未成功
                buttonLoading.value = false
                return false
            }
        }
        try {
            //发送验证码
            await props.sendCode(phoneNumber || props.phone)
            //发送成功
            ElMessage.success(success)
            //发送验证码
            form.isSendCode = true
            //时间开始
            form.codeTime = 60
            //定时器
            const time = () =>
                setTimeout(() => {
                    form.codeTime -= 1
                    if (form.codeTime !== 0) {
                        time()
                    }
                }, 1000)
            //执行定时器
            time()
            //发送完毕
            buttonLoading.value = false
            //刷新code的校验
            if (form.code) {
                formRef.value.validateField('code')
            }
        } catch (error) {
            emit('sendFail')
            ElMessage.error(fail)
            buttonLoading.value = false
        }
    }

    //获取button的txt
    const getButtonTxt = () => {
        if (form.codeTime) {
            return form.codeTime
        } else if (buttonLoading.value) {
            return '发送中'
        } else if (form.isSendCode) {
            return '重新发送'
        } else {
            return '发送验证码'
        }
    }

    //校验
    const formValidate = key => {
        if (key) {
            return formRef.value.validateField(key)
        } else {
            return formRef.value.validate()
        }
    }
    return { form, formRules, sendCodeFunc, formRef, buttonLoading, getButtonTxt, formValidate }
},

})
</script>

<style lang="scss" scoped>
.login-phone {
width: 100%;
height: auto;
flex-shrink: 0;
}
</style>

<style lang="scss">
.login-phone {
.form-item .el-form-item__content {
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
> .el-button {
width: 110px;
margin-left: 10px;
flex-shrink: 0;
}
}
.el-form-item {
margin-bottom: 22px;
}
}
</style>