<template>
    <div class="login-reg-popbg login-reg-popbg-login" style="display:none;">
        <div class="login-reg-pop" id="loginBeforeDiv">
            <span class="login-reg-pop-close" @click="closeWin"><img src="../../theme-chalk/src/images/close-icon.png" alt=""></span>
            <div class="login-reg-pop-left login-reg-pop-left-line" >
                <span class="banner-login-btitle">
                    <span>登录</span>
                    <ul>
                        <li :class="{on:active===0}" @click="phoneSelReg">手机号丨</li>
                        <li :class="{on:active===1}" @click="idcardSelReg">身份证</li>
                    </ul>
                    <div class="clear"></div>
                </span>
                <div class="login-bd">
                    <ul>
                        <li id="phoneRegDiv1">
                            <p class="login-bd-p1">
                                <span class="wrong-tip" v-show="isPhone">请输入正确的手机号</span>
                              <input type="text" v-model="obj.phone" class="login-input login-reg-icon01" placeholder="请输入手机号" style="width: 60%"/>
                              <input type="button" @click="getCode($event)" value="获取验证码" class="login-btn getnum" style="width: 36%; margin-left: 4%"/>
                            </p>
                            <p class="login-bd-p2"><input type="text" v-model="obj.code" class="login-input login-reg-icon02"
                                                          placeholder="请输入验证码"></p>
                            <p class="login-bd-p2">
                                <span class="login-bd-p2-rem"><input type="checkbox" class="login-rembtn" style="width:16px;height:15px;" />记住我</span>
                                <!--<span class="login-bd-forget"><a href="" class="redtxt">忘记密码</a></span>-->
                                <div class="clear"></div>
                            </p>
                            <p class="login-bd-p1"><input type="button" value="登录" @click="phoneReg" class="login-btn"></p>
                            <!--<p class="login-bd-p3">第三方登录:<a href=""><img src="../../theme-chalk/src/images/wechat-icon1.png" alt=""></a><a href=""><img src="../../theme-chalk/src/images/qq-icon2.png" alt=""></a></p>-->

                        </li>
                        <li style="display: none;" id="idcardRegDiv1">
                            <p class="login-bd-p1"><input type="text" v-model="idcardObj.idcarNo" class="login-input login-reg-icon04"
                                                          placeholder="请输入身份证号"></p>
                            <p class="login-bd-p2"><input type="password" v-model="idcardObj.password" class="login-input login-reg-icon03"
                                                          placeholder="请输入登录密码"></p>
                            <p class="login-bd-p2">
                                <span class="login-bd-p2-rem"><input type="checkbox" class="login-rembtn" style="width:16px;height:15px;" />记住我</span>
                                <!--<span class="login-bd-forget"><a href="" class="redtxt">忘记密码</a></span> -->
                                <div class="clear"></div>
                            </p>
                            <p class="login-bd-p1"><input type="button" value="登录" @click="idcardReg" class="login-btn"></p>
                           <!-- <p class="login-bd-p3">第三方登录:<a href=""><img src="../../theme-chalk/src/images/wechat-icon1.png" alt=""></a><a href=""><img src="../../theme-chalk/src/images/qq-icon2.png" alt=""></a></p>-->
                        </li>
                    </ul>
                </div>
                <div class="wrong-tip redtxt" style="display: none">该手机号已注册，请选择登录！若忘记密码，请在登录页选择【找回密码】</div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="banner-login  afterlogin-module" id="loginSuccessDiv" style="position: fixed;display: none">
            <span class="afterlogin-span1">
                <img v-if="userData.photo" :src="userData.photo" alt="">
                <img v-else src="../../theme-chalk/src/images/percenter-logo.png" alt="">
            </span>
            <span class="afterlogin-span2">账号：<label>{{userData.phone||userData.idcarNo}}</label></span>
            <span class="afterlogin-span2">用户名：<label>{{userData.custName}}</label></span>
            <span class="afterlogin-span3"><a href="/personcenter">进入个人中心</a></span>
            <ul>
                <li><a href="/personcenter?type=course"><img src="../../theme-chalk/src/images/afterlogin-icon01.png" alt=""><br>我的课程</a></li>
                <li><a href="/personcenter?type=class"><img src="../../theme-chalk/src/images/afterlogin-icon02.png" alt=""><br>我的班级</a></li>
                <li><a href="/personcenter?type=activity"><img src="../../theme-chalk/src/images/afterlogin-icon03.png" alt=""><br>我的活动</a></li>
            </ul>
        </div>
    </div>
</template>

<script>
    import {httpPost} from '../../../src/utils/utils';
    import formMixin from '../../../src/mixins/formMixin';
    import lenye_base from 'lenye_base';
    import  $ from 'fy-kit';
    import msg from '../../message';

    export default {
        name: 'ElLoginPop',
        mixins: [formMixin],
        components: {
            msg
        },
        props: {
            placeholder: {
                type: String,
                default: '总访问量a'
            },
            isShow: {
                type: Boolean,
                default: true
            },
            isPhone: {
                type: Boolean,
                default: false
            },
            isCard:{
                type:Boolean,
                default: false
            },
            isName: {
                type: Boolean,
                default: false
            },
            isCode: {
                type: Boolean,
                default: false
            },
            defaultClass: {
                type: Boolean,
                default: true
            },

            open: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                userData:{},
                active: 0,
                obj: {
                    phone: '',
                    code: ''
                },
                idcardObj: {
                    idcarNo: '',
                    password: ''
                },
                newpwd:'',
                timer:null,
                time:60
            }
        },
        mounted() {
            //this.init();
            this.setNull();
            if(localStorage.userData){
                this.userData = JSON.parse(localStorage.userData);
                console.log(this.userData)
                $._.default("#loginBeforeDiv").hide();
                $._.default("#loginSuccessDiv").show();
            }
        },
        computed: {},
        methods: {
            phoneSelReg(){
                $._.default("#idcardRegDiv1").hide();
                $._.default("#phoneRegDiv1").show();
                this.active = 0;
                this.setNull();
            },
            idcardSelReg(){
                $._.default("#phoneRegDiv1").hide();
                $._.default("#idcardRegDiv1").show();
                this.active = 1;
                this.setNull();
            },
            getCode(ev) {
                if (this.obj.phone && $.validation.isPhone(this.obj.phone)) {
                    var ele = $._.default(ev.target);
                    this.ele = ele;
                    ele.val('发送中...');
                    ele.attr('disabled', 'disabled');
                    ele.css('color', 'gray');
                    $.util.ajax(
                            lenye_base.base_data.getapiUrl() +
                            lenye_base.api_url.base.dynCodeSend,
                            lenye_base.base_data.getformatting({
                                stType: 2,
                                mobile: this.obj.phone
                            })
                        )
                        .then(res => {
                            this.djs(ele);
                        });
                }else{
                    msg.warning("请输入正确手机号！");
                }
            },
            djs(ele) {
                //var time = Number(t);
                this.timer = setInterval(() => {
                    ele.attr('disabled', 'disabled');
                    ele.css('color', 'gray');
                    ele.val('重新发送(' + this.time + ')');
                    this.time -= 1;
                    if (this.time === 0) {
                        clearInterval(this.timer);
                        ele.removeAttr('disabled');
                        ele.css('color', '#fff');
                        ele.val('获取验证码');
                        this.time = 60;
                    }
                }, 1000);
            },
            async phoneReg(){
                if (!this.obj.phone) {
                    msg.warning('手机号不能为空！');
                    return false;
                }else if (!this.obj.code) {
                    msg.warning('验证码不能为空！');
                    return false;
                }
                let isBy = await this.checkCode(this.obj.code);
                if(!isBy){
                    return  false;
                }
                $.util.ajax(lenye_base.base_data.getapiUrl() +
                    "/base-service/login/dynLogin.do",
                    lenye_base.base_data.getformatting({
                        LOGIN_NAME: this.obj.phone,
                        DYN_CODE: this.obj.code
                    })
                )
                    .then(res => {
                        if (res.success === "1") {
                            msg.success("登录成功！");
                            localStorage.userData =JSON.stringify(res.data);
                            lenye_base.user_data.loginSuccess(res.data);
                            this.userData = res.data;
                            $._.default("#loginBeforeDiv").hide();
                            $._.default("#loginSuccessDiv").show();
                            this.closeWin();
                            window.location.reload();
                        } else {
                            msg.error(res.message);
                        }
                    });
            },
            async idcardReg(){
                if (!this.idcardObj.idcarNo) {
                    msg.warning('身份证号不能为空！');
                    return false;
                } else if (!this.idcardObj.password) {
                    msg.warning('密码不能为空！');
                    return false;
                }else if(!$.validation.isCard(this.idcardObj.idcarNo)){
                     msg.warning('身份证号格式错误！');
                    return false;
                }
                $.util.ajax(lenye_base.base_data.getapiUrl() +
                        "/base-service/login/passwordLogin.do",
                        lenye_base.base_data.getformatting({
                            loginName: this.idcardObj.idcarNo,
                            password: this.idcardObj.password
                        })
                    )
                    .then(res => {
                        if (res.success === "1") {
                            msg.success("登录成功！");
                            localStorage.userData =JSON.stringify(res.data);
                            lenye_base.user_data.loginSuccess(res.data);
                            this.userData = res.data;
                            $._.default("#loginBeforeDiv").hide();
                            $._.default("#loginSuccessDiv").show();
                            this.closeWin();
                            window.location.reload();
                        } else {
                            msg.error(res.message);
                        }
                    });
            },
            async checkCode(DYN_CODE){
                //common/dynCodeCheck.do
                let res =   await  $.util
                    .ajax(
                        lenye_base.base_data.getapiUrl() +
                        "/base-service/common/dynCodeCheck.do",
                        lenye_base.base_data.getformatting({
                            DYN_CODE
                        })
                    )
                if(res.success=='1'){
                    return true;
                }else{
                    msg.error(res.message);
                    return false;
                }
            },
            closeWin(){
                $._.default(".login-reg-popbg-login").hide();
            },
            showPop(){
                $._.default(".login-reg-popbg-login").show();
            },
            setNull(){
                this.obj={
                    phone: '',
                    code: ''
                };
                this.idcardObj= {
                    idcarNo: '',
                    password: ''
                };
            }
        },
    };

</script>
