<template>
    <div class="login">
        <NavTop :type="0" style="flex-shrink: 0"></NavTop>
        <div class="box">
            <div :class="stepnow != 2 ? 'left' : 'left left1'">
                <div class="title">
                    {{ lan.$t("huanying") }}
                    <span class="orgname">{{ lan.$t("beelink") }}</span>
                </div>

                <div v-if="stepnow == 1">
                    <div class="nosign">
                        {{ lan.$t("yiyouzhanghao") }}
                        <span class="tosign" @click="navto('/')">
                            {{ lan.$t("qudenglu") }}
                        </span>
                    </div>

                    <a-form :layout="formLayout">
                        <a-form-item
                            :label="lan.$t('shoujihao')"
                            class="form-item"
                        >
                            <a-input-group compact>
                                <a-select
                                    :default-value="mrqh.name + '+' + mrqh.code"
                                    size="small"
                                    @change="getquhao"
                                    class="getcode"
									style="width: 50%"
                                    option-label-prop="label"
                                    show-search
                                >
                                    <a-select-option
                                        v-for="(i, j) in quhaolist"
                                        :key="j"
                                        :value="i.name + '+' + i.code"
                                        :label="'+' + i.code"
                                    >
                                        {{ i.name }}+{{ i.code }}
                                    </a-select-option>
                                    <!-- <a-select-option value="Jiangsu"> Jiangsu </a-select-option> -->
                                </a-select>
                                <!-- <a-select
                                    class="getcode"
                                    style="width: 50%"
                                    v-model:value="phone.quhao"
                                >
                                    <a-select-option value="86">
                                        中国+0086
                                    </a-select-option>
                                    <a-select-option value="Jiangsu">
                                        Jiangsu
                                    </a-select-option>
                                </a-select> -->
                                <div class="line"></div>
                                <a-input
                                    v-model:value="phone.phone"
                                    style="width: 50%"
                                    :placeholder="lan.$t('shurushouji')"
                                />
                            </a-input-group>
                        </a-form-item>
                        <a-form-item :label="lan.$t('yanzhengma')" class="form-item">
                            <a-input-group compact>
                                <div
                                    class="getcode"
                                    style="width: 50%"
                                    @click="getcode"
                                >
                                    {{lan.$t('dianjihuoquyzm')}} {{
                                        time == 60 ? "" : "(" + time + ")"
                                    }}
                                </div>
                                <div class="line"></div>
                                <a-input
                                    v-model:value="phone.code"
                                    style="width: 50%"
                                    :placeholder="lan.$t('shuruyzm')"
                                />
                            </a-input-group>
                        </a-form-item>
                        <div class="submit" @click="next(2)">{{lan.$t('xiayibu')}}</div>
                        <div class="agreement" @click="agree">
                            <div class="ifagree">
                                <img
                                    src="@/static/images/agree.png"
                                    alt=""
                                    class="agree"
                                    v-if="ifagree"
                                />
                            </div>
                            {{lan.$t('tongyixieyi')}}
                        </div>
                    </a-form>
                </div>

                <div v-if="stepnow == 2">
                    <div class="nosign">
                        {{lan.$t('yiyouzhanghao')}}
                        <span class="tosign" @click="navto('/')"> {{lan.$t('qudenglu')}} </span>
                    </div>
                    <a-form :layout="formLayout">
                        <div class="signform">
                            <a-form-item :label="lan.$t('shezhimima')" class="form-item">
                                <a-input
                                    class="shuru"
                                    :placeholder="lan.$t('shurumima')"
                                    type="password"
                                    v-model:value="userinfo.pass"
                                />
                            </a-form-item>
                            <a-form-item :label="lan.$t('shezhimima')" class="form-item">
                                <a-input
                                    class="shuru"
                                    :placeholder="lan.$t('shurumimatwo')"
                                    type="password"
                                    v-model:value="userinfo.passtow"
                                />
                            </a-form-item>
                            <a-form-item :label="lan.$t('xingming')" class="form-item">
                                <a-input
                                    class="shuru"
                                    :placeholder="lan.$t('shuruxingming')"
                                    v-model:value="userinfo.name"
                                />
                            </a-form-item>
                            <a-form-item :label="lan.$t('youxiang')" class="form-item">
                                <a-input
                                    class="shuru"
                                    :placeholder="lan.$t('shuruyouxiang')"
                                    v-model:value="userinfo.emil"
                                />
                            </a-form-item>
                            <a-form-item :label="lan.$t('muyu')" class="form-item">
                                <a-input
                                    class="shuru"
                                    :placeholder="lan.$t('shurumuyu')"
                                    v-model:value="userinfo.muyu"
                                />
                            </a-form-item>
                            <a-form-item label="lan.$t('jiaoshou')" class="form-item">
                                <a-select
                                    v-model:value="userinfo.jiaoshou"
                                    class="getcode"
                                    style="color: #111"
                                    :placeholder="lan.$t('xuanzejiaoshou')"
                                >
                                    <a-select-option
                                        v-for="(item, index) in willsay"
                                        :key="index"
                                        :value="item.value"
                                    >
                                        {{ item.name }}
                                    </a-select-option>
                                </a-select>
                            </a-form-item>
                        </div>

                        <div class="submit" @click="next(3)">{{lan.$t('lijizhuce')}}</div>
                        <div class="orginfo">{{lan.$t('banquan')}}</div>
                    </a-form>
                </div>

                <div v-if="stepnow == 3">
                    <div class="nosign">{{lan.$t('您已完成注册')}}</div>
                    <img
                        src="@/static/images/success.png"
                        alt=""
                        class="success"
                    />
                    <div class="ale" @click="navto('/mine/archives')">
                        {{lan.$t('qudangan')}}
                    </div>
                </div>
            </div>
            <div :class="stepnow != 2 ? 'right' : 'right right1'">
                <div class="steps">
                    <div class="step">
                        <div :class="stepnow == 1 ? 'circle step1' : 'circle'">
                            01
                        </div>
                        <div :class="stepnow == 1 ? 'stepnow' : ''">
                            {{lan.$t('yanzhengshouji')}}
                        </div>
                    </div>
                    <div class="stepline"></div>
                    <div class="step">
                        <div :class="stepnow == 2 ? 'circle step1' : 'circle'">
                            02
                        </div>
                        <div :class="stepnow == 2 ? 'stepnow' : ''">
                            {{lan.$t('tianxiexinxi')}}
                        </div>
                        <div class="back" @click="next(1)" v-if="stepnow == 2">
                            {{lan.$t('fanhuishangyibu')}}
                        </div>
                    </div>
                    <div class="stepline"></div>
                    <div class="step">
                        <div :class="stepnow == 3 ? 'circle step1' : 'circle'">
                            03
                        </div>
                        <div :class="stepnow == 3 ? 'stepnow' : ''">
                            {{lan.$t('zhucewancheng')}}
                        </div>
                    </div>
                </div>
                <div class="icons" v-if="stepnow == 2">
                    <img src="@/static/images/weixin.png" alt="" class="icon" />
                    <img src="@/static/images/weibo.png" alt="" class="icon" />
                    <img
                        src="@/static/images/facebook.png"
                        alt=""
                        class="icon"
                    />
                </div>	
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, reactive, ref, toRaw } from "vue";
import NavTop from "@/components/NavTop.vue";
import {
    checksmscode,
    checkuser,
    getquhaolist,
    getwillsay,
    interests,
    register,
    sendsms,
} from "@/api";
import { message } from "ant-design-vue";
import router from "@/router";
import { useI18n } from "@/utils/i18n";
import store from '@/store';

export default defineComponent({
    name: "Sign",
    components: { NavTop },
    setup() {
        const lan: any = useI18n();
        const formLayout = {
            labelCol: 4,
            wrapperCol: 14,
        };
        const time = ref(60); //倒计时初始化
       
        const userinfo = ref({
            pass: "",
            passtow: "",
            name: "",
            emil: "",
            muyu: "",
            jiaoshou: "",
        });
        const willsay = ref<any>();
        const mrqh = computed(() => store.state.qh)
         const phone = ref({
            quhao: mrqh.value.code,
            phone: "",
            code: "",
        });
        const quhaolist = ref<any>([
            {
                code: "86",
                id: 214,
                name: "中国",
            },
        ]);
        interests().then((res) => {
            willsay.value = res;
        });
        onMounted(async () => {
            quhaolist.value = await getquhaolist();
        });

        /**
         * @param
         * 点击获取验证码  触发60S倒计时
         */
        let lock = false;
        const getcode = async () => {
            console.log(11111);
            
            if (lock) {
                return;
            }
            if (phone.value.phone == "") {
                message.error(lan.$t('shoujihaoweikong'));
                return;
            }
            const iszc =  await checkuser({phone: phone.value.phone})
            if(sessionStorage.getItem("mid") == undefined && iszc.data){
                message.error(iszc.msg)
                return ;
            }
            lock = true;
            sendsms(phone.value.quhao, phone.value.phone);
            const timestep = setInterval(() => {
                console.log(phone);
                time.value = time.value - 1;
                if (time.value <= 0) {
                    time.value = 60;
                    clearInterval(timestep);
                    lock = false;
                }
            }, 1000);
        };
        const ifagree = ref(true); //是否同意用户协议

        /**
         *@param
         * 用户协议前面radio 的点击效果
         */
        const agree: () => void = () => {
            ifagree.value = ifagree.value == true ? false : true;
            console.log(ifagree.value, 600);
        };

        const stepnow = ref(1); // 步骤条初始

        function yanzheng() {
            if (userinfo.value.pass == "") {
                message.error(lan.$t("mimaweikong"));
                return false;
            }
            if (userinfo.value.passtow == "") {
                message.error(lan.$t("mimaweikong"));
                return false;
            }
            if (userinfo.value.pass != userinfo.value.passtow) {
                message.error(lan.$t('mimabuyizhi'));
                return;
            }
            if (userinfo.value.name == "") {
                message.error(lan.$t("xingmingweikong"));
                return false;
            }
            if (userinfo.value.emil == "") {
                message.error(lan.$t('youxiangweikong'));
                return false;
            }
            if (userinfo.value.muyu == "") {
                message.error(lan.$t('muyuweikong'));
                return false;
            }
            if (userinfo.value.jiaoshou == "") {
                message.error(lan.$t('jiaoshouweikong'));
                return false;
            }
            return true;
        }
        /**
         *@param  e 跳到哪一步
         * 步骤条跳到某一步
         */

        async function next(e: number) {
            if (!ifagree.value) {
                message.error(lan.$t('weitongyixieyi'));
                return;
            }
            if (stepnow.value > e) {
                stepnow.value = e;
                return;
            }
            switch (e) {
                case 2: {
                    console.log(e);
                    if (phone.value.phone == "") {
                        message.error(lan.$t('shoujihaoweikong'));
                        return;
                    } else if (phone.value.code == "") {
                        message.error(lan.$t('yanzhengmaweikong'));
                        return;
                    }
                    const res = await checksmscode(
                        phone.value.quhao + phone.value.phone,
                        phone.value.code
                    );
                    
                    if (res) {
                       
                        stepnow.value = e;
					}
 
                    break;
                }
                case 3: {
                    console.log(userinfo.value);
                    const yz = yanzheng();
                    if (yz) {
                        const res = await register({
                            ...toRaw(phone.value),
                            ...toRaw(userinfo.value),
                        });
                        if (res) {
                            stepnow.value = e;
                        }
					}
 
                }
            }
        }
        function navto(url: string) {
            router.push(url);
        }

        function getquhao(e?: any){
            console.log(e)
            phone.value.quhao = e.toString()
            phone.value.quhao = phone.value.quhao.split("+")[1];
        }

        return {
            formLayout,
            getcode,
            time,
            agree,
            ifagree,
            stepnow,
            next,
            phone,
            userinfo,
            willsay,
            navto,
            lan,
            quhaolist,
            getquhao,
            mrqh
        };
    },
});
</script>
<style lang="scss" scoped>
.login ::v-deep(.ant-select-selection) {
    border: none;
}
.login ::v-deep(.ant-input) {
    border: none;
}
.ant-input:focus {
    border: none;
    border-bottom: 1px solid white !important;
    box-shadow: none;
}
.login ::v-deep(.ant-form-item-label) {
    line-height: 14px;
}
.login ::v-deep(.ant-form-item) ::v-deep(label) {
    color: #0dbba4;
    font-size: 11px;
    left: 1px;
}
.login {
    min-width: 100%;
    height: 100vh;
    background: url("../../static/images/loginbg.png");
    background-size: 100% 130%;
    background-repeat: no-repeat;
    .box {
        padding-top: 145px;

        display: flex;
        justify-content: space-around;
        .left1 {
            width: 710px !important;
        }
        .left {
            width: 314px;
            .title {
                font-size: 17px;
                font-weight: bold;
            }
            .orgname {
                font-size: 29px;
                color: #0dbba4;
                cursor: pointer;
            }
            .nosign {
                font-size: 12px;
                color: #666666;
                margin-top: 17px;
                margin-bottom: 35px;
            }
            .tosign {
                color: #0dbba4;
                cursor: pointer;
            }
            .tab {
                margin-bottom: 30px;
            }

            .form-item {
                border-bottom: 1px solid #e5e5e5;
                font-size: 15px;
                margin-right: 40px;
            }
            .line {
                width: 1px;
                height: 14px;
                background: #e5e5e5;
                margin-top: 10px;
                position: relative;
                z-index: 999;
            }
            ::v-deep(.getcode) {
                font-size: 15px;
                color: #08ae98;
                width: 313px;
                // width: 50%;
                line-height: 30px;
                cursor: pointer;
            }
            ::v-deep(.ant-select-selection){
                background-color: unset;
            }
            .orginfo {
                margin-top: 178px;
            }
            .submit {
                width: 143px;
                height: 35px;
                background: linear-gradient(
                    90deg,
                    #00dac2,
                    #42de9e,
                    #88e062,
                    #d0eb3e,
                    #fffa18
                );
                border-radius: 18px;
                font-size: 15px;
                color: white;
                font-weight: 800;
                text-align: center;
                line-height: 35px;
                margin-top: 45px;
            }
            .agreement {
                font-size: 12px;
                display: flex;
                margin-top: 23px;
                cursor: default;
                .ifagree {
                    width: 12px;
                    height: 12px;
                    border-radius: 3px;
                    border: 1px solid #0ebca4;
                    margin: auto 0;
                    margin-right: 7px;
                    .agree {
                        width: 8px;
                        height: 6px;
                        position: relative;
                        top: -4px;
                        left: 2.5px;
                    }
                }
            }
        }
        .right1 {
            width: 230px !important;
        }
        .right {
            width: 690px;
            .steps {
                padding-top: 112px;
                .stepline {
                    width: 1px;
                    height: 50px;
                    border: 1px dashed #eeeeee;
                    position: relative;
                    left: 13px;
                }
                .step {
                    display: flex;
                    color: #999999;
                    font-size: 11px;
                    line-height: 28px;
                    font-weight: bold;
                    .back {
                        color: #0dbba4;
                        margin-left: 23px;
                    }
                    .circle {
                        width: 29px;
                        height: 29px;
                        border-radius: 15px;
                        background: #eeeeee;
                        font-size: 12px;
                        color: #999999;
                        text-align: center;
                        line-height: 29px;
                        font-weight: 800;
                        margin-right: 17px;
                    }
                }
                .step1 {
                    background: #08ae98 !important;
                    color: white !important;
                }
                .stepnow {
                    color: #111111;
                }
            }
        }
    }
    .signform {
        display: flex;
        flex-wrap: wrap;
        .shuru {
            width: 313px;
        }
    }
    .icons {
        margin-right: 41px;
        margin-top: 227px;
        .icon {
            width: 28px;
            height: 28px;
            margin-right: 18px;
            float: right;
        }
    }
    .success {
        width: 250px;
        height: 233px;
    }
    .ale {
        color: #08ae98;
        font-size: 14px;
        font-weight: 800;
        margin-top: 34px;
        cursor: pointer;
    }
}
</style>