<script setup>
import {ref,computed,watch} from 'vue'
import { showToast } from 'vant';
import { _apiLogin } from '@/api/user'
import { useLogin } from './hooks/useLogin'
import { isMobile } from 'vant/lib/utils';


const props = defineProps({
    activeModel:{//当前选择的登陆模式
        type:String,
        default:'ordinaryModel'
    }
})

const { picSrc,picId,getPicCode,
        timer,codeStr,codeCountDown,countDown,getCode
    } = useLogin()

watch(()=>props.activeModel,()=>{
    if(props.activeModel==='mobileModel'){
        if(!timer){
            getPicCode()
            codeStr.value = '获取验证码'
        }
    }
})

//手机号
let mobile = ref('')
//图形验证码
let mobilePicCode = ref('')
//短信验证码
let mobileCode = ref('')

//短信验证码倒计时相关
const isMobileCountDown = computed(()=>{
    return codeCountDown.value<60&&codeCountDown.value>0
})

let isGetNewCode = ref(false)

//区号相关
let mobileTelAreaCode=ref('86')
let showMobilePicker = ref(false)
let TelAreaCodeList = ref([])
//获取区号
function getTelAreaCode(){
    _apiLogin.getPhoneAreaCode().then(res=>{
        if(res.Ret!==200) return 
        TelAreaCodeList.value = res.Data||[]
    })
}
getTelAreaCode()

//校验表单
function checkForm(){
    if(isMobileCountDown.value) return 
    //是否是重新获取验证码
    if(codeStr.value==='重新获取'&&!isGetNewCode.value){
        //清空图形验证码输入框，引导用户重新输入
        showToast("重新获取需再次输入图形验证码")
        getPicCode()
        mobilePicCode.value = ''
        isGetNewCode.value = true
        return
    }
    //检查手机号和图形验证码是否正确
    if(!mobilePicCode.value.length){
        showToast('请输入图形验证码')
        return
    }
    if(!mobile.value.length){
        showToast('请输入手机号')
        return 
    }
    if(!isMobile(mobile.value)){
        showToast('请输入正确的手机号')
        return 
    }
    getCode({ mobile:mobile.value,
              areaCode:mobileTelAreaCode.value,
              picCode:mobilePicCode.value
            },'mobile',1)
    isGetNewCode.value = false

}

defineExpose({
    getPicCode,
    mobileTelAreaCode
})
</script>

<template>
    <van-field
        class="form-input-box form-mobile-box tel"
        v-model="mobile"
        type="tel"
        name="mobile"
        placeholder="请输入手机号"
        :rules="[
            { required: true, message: '请输入手机号' },
            { validator:(val)=>isMobile(val),message:'请输入正确的手机号'}
        ]"
    >
        <!-- 选择区号的选择框-->
        <template #button>
            <div class="area-filed" @click="showMobilePicker = true" >
                <span>+{{mobileTelAreaCode}}</span>
                <van-icon name="arrow-down" />
            </div>
        </template>
    </van-field>
    <van-popup v-model:show="showMobilePicker" position="bottom">
        <van-picker
            :columns-field-names="{ text: 'Name',value: 'Value',}"
            :columns="TelAreaCodeList"
            @confirm="({selectedValues})=>{mobileTelAreaCode= selectedValues[0];showMobilePicker = false}"
            @cancel="showMobilePicker = false"
        />
    </van-popup>
    <van-field
        class="form-input-box form-mobile-box"
        v-model="mobilePicCode"
        name="picCode"
        placeholder="请输入图形验证码"
        :rules="[{ required: true, message: '请输入图形验证码' }]"
    >
        <template #button>
            <div class="pic-filed" @click="getPicCode">
                <img :src="picSrc" />
            </div>
        </template>
    </van-field>
    <van-field
        class="form-input-box form-mobile-box"
        v-model="mobileCode"
        name="mobileCode"
        placeholder="请输入短信验证码"
        autocomplete="one-time-code"
        pattern="\d{6}"
        :maxlength="6"
        :rules="[{ required: true, message: '请输入短信验证码' }]"
    >
        <template #button>
            <span class="btn-text" :class="{'disabled':isMobileCountDown}"
                @click="checkForm"
            >{{codeStr}}</span>
        </template>
    </van-field>
</template>

<style scoped lang="scss">
@import "./style/common.scss";
</style>
