<template>
    <el-dialog v-model="props.visiableSub" title="" @close="close" :fullscreen = "isMobile ? true :false">
        <div class=" pt-10 pb-10 flex flex-col items-center justify-center">

            <!-- <div class="popup-social popup-facebook" onclick="loginFacebook(event)">
                 {{isLogin ?  'Login with Facebook' : 'Register with Facebook'}}
            </div>

            <div class="popup-social popup-google" onclick="loginGoogle(event)">
                 {{isLogin ? 'Login with Google' : 'Register with Google'}}
            </div>
            
            <div class=" flex flex-row items-center w-full mt-2.5 mb-2.5">
                <div class=" h-[1px] w-full bg-[lightgray]"></div>
                <div>or</div>
                <div class=" h-[1px] w-full bg-[lightgray]"></div>
            </div> -->

            <div>
                <el-input v-model="username" style="width: 300px;height: 45px;margin-top: 10px;" placeholder="Enter email address"></el-input>
            </div>
            <div>
                <el-input v-model="password" style="width: 300px;height: 45px;margin-top: 10px;" placeholder="Password"></el-input>
            </div>
            <div v-show="isLogin == false">
                <el-input v-model="registerComfirmPW" style="width: 300px;height: 45px;margin-top: 10px;" placeholder="Confirm Password"></el-input>
            </div>

            <!-- <div v-show="isLogin" class="w-[300px] justify-end items-end flex mt-2.5">
                <span class=" text-end text-blue-500">Forgot Password ?</span>
            </div> -->

            <div class=" mt-5">
                <el-button v-loading="loading" @click="registerOrLogin" style="width: 300px;height: 45px;margin-top: 10px;" class="w-full" type="primary">
                    {{isLogin ? 'LOGIN' : 'SIGN UP'}}
                </el-button>
            </div>
            
            <div v-if="isLogin" class="mt-5 mb-5">
                <span>Don't have an account? <span @click="signUpAction" class=" text-blue-500">Sign up ></span></span>
            </div>
            <div v-else  class="mt-5 mb-5">
                <span>Already have an account? <span @click="loginInAction" class=" text-blue-500">Login in ></span></span>
            </div>

            <div v-if="isLogin" class="mb-5">
                <span>Forget Password? <span @click="forgetAction" class=" text-blue-500">Retrieve Password ></span></span>
            </div>
        </div>

    </el-dialog>
</template>


<script setup>
import { ref,watch,defineProps,defineEmits,computed,onMounted,onBeforeUnmount } from 'vue';
import loginFb from '@/assets/register/login-facebook.png'
import loginGog from '@/assets/register/login-google.png'
import { registerApi,loginApi,registerAnswerApi,registerAnwerDetailApi } from '@/http/register'
import { ElMessage } from 'element-plus';
import router from '@/router';
import {setToken,getToken,setLogin} from '@/utils/local.js'

const windowWidth = ref(window.innerWidth)

const isLogin = ref(true)
const loading = ref(false)

const username = ref('')
const password = ref('')
const registerComfirmPW = ref('')


const props = defineProps({
    visiableSub:{
        type:Boolean,
        required: true,
        default: false
    }
})
const emit = defineEmits(['update:visiableSub'])


const close = () => {
    resetAccount()
    isLogin.value = true
    emit('update:visiableSub')
}

const nowMySize = () =>{
    windowWidth.value = window.innerWidth
}

const isMobile = computed(() => {
    // console.log(windowWidth.value)
    return windowWidth.value < 768
})

const signUpAction = () => {
    isLogin.value = false
    resetAccount()
}
const loginInAction = () => {
    isLogin.value = true
    resetAccount()
}

const registerOrLogin = () => {
    if(isLogin.value){
        loginAction()
    }else{
        registerAction()
    }
}

const loginAction = async() => {

    // emit('update:visiableSub')
    // setLogin()
    // setTimeout(()=>{
    //     router.replace("/home")
    // },300)

    // router.push({path:"/registerQuestion"})
    // return
    const myToken = getToken()
    // const resAn = await registerAnwerDetailApi(myToken)
    // console.log('现在的问答列表是：',resAn)

    if(username.value == ''){
        ElMessage({
            message:'please input username',
            type:'warning'
        })
        return
    }
    if(password.value == ''){
        ElMessage({
            message:'please input password',
            type:'warning'
        })
        return
    }
    try{
        loading.value = true
    const res = await loginApi(username.value,password.value)
    // console.log('登录的返回信息',res)
    loading.value = false
    if(res.code == 1){
        setToken(res.data.token)
        setLogin('anwerAndLogin')
        // isLogin.value = true
        setTimeout(()=>{
            emit('update:visiableSub')
            registerDetail()
        },300)
    }
    }catch(err){
        loading.value = false
    }
}

//是否完成注册答题卡
const registerDetail = async() => {
    const myToken = getToken()
    const resDetail = await registerAnwerDetailApi(myToken)
    if(resDetail.code == 1){
        const isAnswer = resDetail.data.is_answer
        if(isAnswer == 0){//未完成注册答题卡
            router.push({path:"/putInPersonInfo"})
        }else{//已完成注册答题卡
            router.replace("/home")
        }
    }
}

const registerAction = async() => {
    if(username.value == ''){
        ElMessage({
            message:'please input username',
            type:'warning'
        })
        return
    }
    if(password.value == ''){
        ElMessage({
            message:'please input password',
            type:'warning'
        })
        return
    }
    if(registerComfirmPW.value == ''){
        ElMessage({
            message:'please input confirmPassword',
            type:'warning'
        })
        return
    }
    if(password.value != registerComfirmPW.value){
        ElMessage({
            message:'please input same password',
            type:'warning'
        })
        return
    }
    try{
        loading.value = true
        const res = await registerApi(username.value,password.value)
        loading.value = false
        if(res.code == 1){
            await setToken(res.data.token)
            // res.data.token
            emit('update:visiableSub')

            setTimeout(()=>{
                router.push({path:"/putInPersonInfo"})
            },300)
        }
    }catch(err){
        loading.value = false
    }
}

const forgetAction = () => {
    emit('update:visiableSub')

    router.push({path:"/forgotPassword"})
}

const resetAccount = () => {
    username.value = ''
    password.value = ''
    registerComfirmPW.value = ''
}

onMounted(() => {
    window.addEventListener('resize',nowMySize)
})
onBeforeUnmount(() => {
    window.removeEventListener('resize',nowMySize)
})

</script>


<style scoped>
.popup-facebook{
    background: #3a559f url('@/assets/register/login-facebook.png') no-repeat 20px center;
    color: #fff;
}
.popup-google{
    background: #fff url('@/assets/register/login-google.png') no-repeat 20px center;
    color:#666;
    border: solid 1px #ccc;
}
.popup-social {
    text-align: center;
    font-size: 13.8px;
    font-family: 'Lato', sans-serif;
    margin: 15px 0 0;
    cursor: pointer;
    font-weight: 400;
    border-radius: 25px;
    line-height: 47px;
    width: 300px;
}
</style>