<template>
    <div class="email-model-wrap model-wrap">
        <el-form 
            ref="modelForm" 
            label-position="right" 
            label-width="0px"
            :model="form"
            :rules="rules">
            <el-form-item prop="email">
                <el-input
                    type="text"
                    v-model="form.email"
                    auto-complete="off"
                    placeholder="请输入邮箱"
                >
                </el-input>
                <span class="inline-message el-form-item__error" 
                    v-show="(emailCheck||accountForbidden)&&form.email.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 {patternEmail} from '@/utils/commonOptions'
import {departInterence} from "@/api/api.js";
export default {
    mixins:[modelMixins],
    props:{
        emailCheck:{
            type:Boolean,
            default:false
        },
        accountForbidden:{
            type:Boolean,
            default:false
        },
        Source:{//请求验证码来源：1登陆
            type:Number,
            default:1
        },
        isMobile:{
            type:Boolean,
            default:false
        },
    },
    data() {
        return {
            hasPicCode:true,
            picSrc:'',
            picId:'',
            timer:0,
            codeStr:'获取验证码',
            codeCountDown:60,
            isGetNewCode:false,
            form:{
                email:'',
                picCode:'',
                checkCode:''
            },
            rules:{
                email:[
                    {required:true,message:'请输入邮箱',trigger:'blur'},
                    {validator:(rule,value,callback)=>{
                        if(!patternEmail.test(value)){
                            callback(new Error("请输入正确的邮箱格式"))
                        }else{
                            callback()
                        }
                    },trigger:'blur'}
                ],
                picCode:[{required:true,message:'请输入图形验证码',trigger:'blur'}],
                checkCode:[{required:true,message:'请输入短信验证码',trigger:'blur'}]
            },
            hintMessage:''
        };
    },
    methods: {
        checkForm(){
            //首先检查是否是重新获取验证码
            if(this.codeStr==='重新获取'&&!this.isGetNewCode){
                //引导用户重新输入图形验证码
                this.getCodePic()
                this.form.picCode = ''
                this.isGetNewCode = true
                return
            }
            //检查邮箱和图形验证码是否正确
            const {email,picCode} = this.form
            if(!picCode.length){
                this.$message.warning('请输入图形验证码')
                return
            }
            if(!patternEmail.test(email)){
                this.$message.warning('请输入正确的邮箱')
                return
            }
            //通过请求发送验证码
            departInterence.getCodeVerify({
                VerifyType:2,
                CaptchaId:this.picId,
                CaptchaCode:picCode,
                Email:email,
                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>
