<template>
    <div>
        游客登录
    </div>
    <div v-show="step == 1">
        手机号
        <el-input v-model="loginForm.userName"></el-input>
        <el-button @click="phoneLogin">登录</el-button>
    </div>
    <div v-show="step == 2">
        手机号
        <el-input v-model="loginForm.userName"></el-input>
        <el-button @click="getCheckCode">
            <div v-show="seconds == 60">发送验证码</div>
            <div v-show="seconds < 60 && seconds >=0">剩余{{seconds}}秒</div>
        </el-button>
        验证码
        <el-input v-model="loginForm.checkCode"></el-input>
        <el-button @click="validCheckCode">注册</el-button>
    </div>
    <div v-show="step == 3">
        密码
        <el-input type="password" v-model="loginForm.password"></el-input>
        再次确认密码
        <el-input type="password" v-model="loginForm.reppassword"></el-input>
        高考省份:{{loginForm.areaId}}:{{loginForm.areaName}}
        <div>
            <span v-for="dict in gk_province" :key="dict.value" @click="chooseArea(dict.value,dict.label)">{{dict.label}}&nbsp;&nbsp;&nbsp;&nbsp;</span>
        </div>
        <el-button @click="registHandler">注册</el-button>
    </div>
    <div v-show="step == 4">
        手机号
        <el-input v-model="loginForm.userName"></el-input>
        密码
        <el-input v-model="loginForm.password" type="password"></el-input>
        <el-button @click="visitor_login">登录</el-button>
    </div>

</template>

<script setup>

    import {getUserInfo, sendCheckCode, validCheckCodeAndRegister,regist} from '@/api/xjc-platform/xjc_index.js'
    import {login} from '@/api/login'
    import { setToken } from '@/utils/auth'
    const loading = ref(false)
    const router = useRouter()
    const route = useRoute()
    const {proxy} = getCurrentInstance()
    const {rank, gk_province} = proxy.useDict('rank', 'gk_province')
    const params = route.query
    //1手机号 2-验证码注册 3-设置密码和省份

    const step = ref(1)
    const seconds = ref(60)



    const loginForm = ref({
        userName: '',
        //一体机用户手机注册
        businessType: '1',
        checkCode: '',
        areaId:null,
        areaName: null,
        password : '',
        reppassword :''
    })

    function phoneLogin() {
        getUserInfo(loginForm.value.userName).then(resp => {
            if (resp.sysUser == null) {
                //没有此人，需要注册
                step.value = 2
            } else {
                step.value = 4
            }
        })
    }

    function getCheckCode() {
        sendCheckCode(loginForm.value).then(resp => {
            console.log("一体机注册，验证码:", resp.checkCode)
            //开始倒计数
            secondsBegin()
        })
    }

    function secondsBegin() {
        seconds.value--;
        if (seconds.value > 0) {
            window.setTimeout(secondsBegin, 1000)
        } else {
            seconds.value = 60
        }
    }

    function validCheckCode() {
        validCheckCodeAndRegister(loginForm.value).then(resp => {
            if (resp.codeValidResult == true) {
                step.value = 3
            }
        })
    }
    function chooseArea(areaId,areaName) {
        loginForm.value.areaId = areaId
        loginForm.value.areaName = areaName
    }
    function registHandler() {
        if(loginForm.value.password != loginForm.value.reppassword){
            proxy.$modal.msgError("密码不一致")
        }else{
            regist(loginForm.value).then(resp =>{
                proxy.$modal.msgSuccess("注册成功")
                //跳转到主页
                router.push({
                    path : '/xjc_login',
                    query :{
                        userName : loginForm.value.userName,
                        password : loginForm.value.password,
                        modulePath : params.modulePath
                    }
                })
            })
        }
    }
    function visitor_login(){
        loading.value = true
        // 调用action的登录方法
        loginForm.value.loginType = "1"
        login(loginForm.value.userName, loginForm.value.password, null, null, loginForm.value.loginType).then(resp => {
            setToken(resp.data.access_token)
            router.push({
                path: params.modulePath
            })
        })
    }

</script>

<style scoped>

</style>
