<template>
    <div class="mobile-model-wrap model-wrap">
        <el-form 
            ref="modelForm" 
            label-position="right" 
            label-width="0px"
            :model="form"
            :rules="rules">
            <el-form-item prop="mobile">
                <el-input
                    class="input-with-slot"
                    type="text"
                    v-model="form.mobile"
                    auto-complete="off"
                    placeholder="请输入手机号"
                >
                    <el-select v-model="areaCodeSelect" slot="prepend" placeholder="请选择">
                        <el-option v-for="item in areaCode" :key="item.Value"
                            :label="item.Name" :value="item.Value" />
                    </el-select>
                </el-input>
                <span class="inline-message el-form-item__error" 
                    v-show="(mobileCheck||accountForbidden)&&form.mobile.length">
                    {{hintMessage}}
                </span>
            </el-form-item>
            <el-form-item prop="picCode">
                <el-input
                    class="input-with-slot"
                    type="text"
                    v-model="form.picCode"
                    auto-complete="off"
                    placeholder="请输入图形验证码"
                >
                    <div class="pic-box" slot="append" @click="getCodePic">
                        <img :src="picSrc" alt="图形验证码"/>
                    </div>
                </el-input>
            </el-form-item>
            <el-form-item prop="checkCode" class="code-input">
                <el-input
                    type="text"
                    v-model="form.checkCode"
                    auto-complete="off"
                    placeholder="请输入验证码">
                </el-input>
                <el-button type="text" class="code-btn" @click="checkForm" :disabled="codeCountDown<60&&codeCountDown>0">{{codeStr}}</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import modelMixins from './modelMixins';
import {isMobileNo} from '@/utils/commonOptions'
import {departInterence } from "@/api/api.js";
export default {
    mixins:[modelMixins],
    props:{
        mobileCheck:{
            type:Boolean,
            default:false
        },
        accountForbidden:{
            type:Boolean,
            default:false
        },
        areaCode:{
            type:Array,
            default:()=>{return []}
        },
        Source:{//请求验证码来源：1登陆
            type:Number,
            default:1
        },
        isMobile:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            hasPicCode:true,//是否需要图形验证码
            areaCodeSelect:'86',
            picSrc:'',//图形验证码地址
            picId:'',//图形验证码id
            timer:0,
            codeStr:'获取验证码',
            codeCountDown:60,
            isGetNewCode:false,
            form:{
                mobile:'',
                picCode:'',
                checkCode:''
            },
            rules:{
                mobile:[
                    {required: true,message: "请输入手机号",trigger: "blur"},
                    {validator:(rule,value,callback)=>{
                        if(this.areaCodeSelect==='86'&&!isMobileNo(value)){
                            callback(new Error('请输入正确的手机号格式'));
                        }else if(this.areaCodeSelect!=='86'&&isNaN(value.trim())){
                            callback(new Error('请输入正确的手机号格式'));
                        }else{
                            callback()
                        }
                    },trigger:'blur'}
                ],
                picCode:[{required:true,message:'请输入图形验证码',trigger:'blur'}],
                checkCode:[{required:true,message:'请输入短信验证码',trigger:'blur'}]
            }
        };
    },
    methods: {
        checkForm(){
            //首先检查是否是重新获取验证码
            if(this.codeStr==='重新获取'&&!this.isGetNewCode){
                //引导用户重新输入图形验证码
                this.$message.warning('重新获取需再次输入图形验证码')
                this.getCodePic()
                this.form.picCode = ''
                this.isGetNewCode = true
                return
            }
            //检查手机号和图形验证码是否正确
            const {picCode,mobile} = this.form
            if(!picCode.length){
                this.$message.warning('请输入图形验证码')
                return
            }
            if(this.areaCodeSelect==='86'&&!isMobileNo(mobile)){
                this.$message.warning('请输入正确的手机号')
                return
            }
            /* this.countDown()
                this.timer = setInterval(()=>{
                    this.countDown()
                },1000) */
            //通过请求发送验证码
            departInterence.getCodeVerify({
                VerifyType:1,
                CaptchaId:this.picId,
                CaptchaCode:picCode,
                Mobile:mobile,
                TelAreaCode:this.areaCodeSelect,
                Source:this.Source
            }).then(res=>{
                if(res.Ret!==200) return 
                this.$message.success('验证码已发送')
                this.isGetNewCode = false
                //60秒倒计时
                this.codeCountDown = 60
                this.countDown()
                this.timer = setInterval(()=>{
                    this.countDown()
                },1000)
            })

        }
    },
};
</script>

<style lang="scss">
@import "./css/formStyle.scss";
</style>
