<script setup>
import { onMounted,onUnmounted,reactive,ref} from 'vue';
import { ElMessage } from 'element-plus';
import {ArrowDown} from '@element-plus/icons-vue'
import {
    apiUserLogin,
    apiGetEmailCode,
    apiGetSMSCode,
    apiLoginForPhone,
    apiGetPCSMSCode,
    apiGetPCEmailCode,
    apiTelAraeNumList
} from '@/api/common'
import { useStore } from 'vuex';

const store=useStore()

let sendCodeInterval=null

let phoneAreaList=ref([])
let selectArea=ref({name: "大陆+86",value:'86'})

//获取手机号区号
const getPhoneAreaNumList=async ()=>{
    const res=await apiTelAraeNumList()
    if(res.code===200){
        phoneAreaList.value=res.data||[]
        selectArea.value=res.data[0]
    }
}
getPhoneAreaNumList()


let form=reactive({
    type:store.state.showLogin?'wechat':'phone',
    mobile:'',
    code:'',
    email:''
})

const typeChange=(e)=>{
    form.type=e
    form.mobile=''
    form.code=''
    form.email=''
    clearTimeout(sendCodeInterval)
    isSendCode.value=false
}

//发送验证码

let isSendCode=ref(false)//是否已发送验证码
const handleSendCode=async (type)=>{
    if(isSendCode.value) return
    let res
    if(type=='phone'){
        if(!form.mobile){
            ElMessage('请输入手机号')
            return
        }
        res=await apiGetSMSCode({
            mobile: form.mobile,
            area_num: selectArea.value.value
        })
    }else{
        if(!form.email){
            ElMessage('请输入邮箱')
            return
        }
        res=await apiGetEmailCode({email: form.email})
    }
    if(res.code===200){
        isSendCode.value=true
        ElMessage.success('验证码已发送')
        sendCodeInterval=setTimeout(() => {
            isSendCode.value=false
        }, 60000);
    }
}

const handlePCSendCode=async (type)=>{
    if(isSendCode.value) return
    let res
    if(type=='phone'){
        if(!form.mobile){
            ElMessage('请输入手机号')
            return
        }
        res=await apiGetPCSMSCode({
            mobile: form.mobile,
            area_num: selectArea.value.value
        })
    }else{
        if(!form.email){
            ElMessage('请输入邮箱')
            return
        }
        res=await apiGetPCEmailCode({email: form.email})
    }
    if(res.code===200){
        isSendCode.value=true
        ElMessage.success('验证码已发送')
        sendCodeInterval=setTimeout(() => {
            isSendCode.value=false
        }, 60000);
    }
}

onUnmounted(()=>{
    clearTimeout(sendCodeInterval)
})

//手机号/邮箱绑定
const handleBind=async (type)=>{
    let params = {}
    if (type === 'phone') {
        params = {
            area_num: Number(selectArea.value.value),
            mobile: form.mobile,
            verify_code: form.code,
            bind_type: 1
        }
    } else {
        params = {
            email: form.email,
            verify_code: form.code,
            bind_type: 2
        }
    }
    if(!params.verify_code){
        ElMessage('请填写验证码')
        return
    }
    const res=await apiUserLogin(params)
    if(res.code===200){
        window.location.href=import.meta.env.VITE_APP_REDIRECT_URI
    }
}

//手机号/邮箱登录
const handleLogin=async (type)=>{
    let params = {}
    if (type === 'phone') {
        params = {
            AreaNum: Number(selectArea.value.value),
            Mobile: form.mobile,
            SmsCode: form.code,
            LoginType: 1
        }
    } else {
        params = {
            Email: form.email,
            SmsCode: form.code,
            LoginType: 2
        }
    }
    if(!params.SmsCode){
        ElMessage('请填写验证码')
        return
    }
    const res=await apiLoginForPhone(params)
    if(res.code===200){
        store.commit('getToken',res.data)
        window.location.href=import.meta.env.VITE_APP_REDIRECT_URI
    }
}


onMounted(()=>{
    const redirect_uri=encodeURIComponent(import.meta.env.VITE_APP_REDIRECT_URI)
    let obj=new WxLogin({
        self_redirect:false,
        id:"wx-qrcode-box", 
        appid: import.meta.env.VITE_APP_APPID, 
        scope: "snsapi_login", 
        redirect_uri: redirect_uri,
        state: "",
        style: "",
        href: "",//可传入base64 编码的 css样式
    });
})

</script>

<template>
    <div class="login-wrap">
        <div class="content">
            <!-- <img class="close-icon" src="@/assets/icon-close.png" alt=""> -->
            <div class="main-box" v-show="$store.state.showLogin&&!$store.state.showBind">
                <!-- 微信扫码登录 -->
                <div v-show="form.type=='wechat'">
                <div id="wx-qrcode-box" class="wx-qrcode-box"></div>
                <div class="flex bot-nav">
                    <div style="text-align:center">
                        <img src="@/assets/icon-login-email.png" alt="" @click="typeChange('email')">
                        <div style="font-size:14px">邮箱登录</div>
                    </div>
                    <div style="text-align:center">
                        <img src="@/assets/icon-login-phone.png" alt="" @click="typeChange('phone')">
                        <div style="font-size:14px">手机号登录</div>
                    </div>
                </div>
                </div>
                <!-- 手机号登录 -->
                <div class="bind-accout-box" v-show="form.type=='phone'">
                    <h2 class="title">手机号登录</h2>
                    <div class="phone-area-box" style="margin-bottom: 30px;">
                        <div class="area-box">
                            <span style="margin-right: 10px;">国家/区号</span>
                            <el-dropdown trigger="click" popper-class="self-dropdown">
                                <span class="el-dropdown-link" style="color: #F3A52F;font-size: 16px;">
                                    {{selectArea.name}}
                                    <el-icon class="el-icon--right">
                                        <arrow-down />
                                    </el-icon>
                                </span>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item 
                                            v-for="item in phoneAreaList" 
                                            :key="item.value"
                                            @click="selectArea=item"
                                        >{{item.name}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <div class="input-item">
                        <input type="text" v-model="form.mobile" placeholder="请输入手机号">
                    </div>
                    <div class="input-item">
                        <input v-model="form.code" placeholder="请输入验证码" />
                        <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('phone')">{{isSendCode?'已发送':'发送验证码'}}</span>
                    </div>
                    <div class="global-main-btn login-btn" @click="handleLogin('phone')">登录</div>
                    <div style="display:flex;justify-content: space-around;">
                        <div class="bot-img">
                            <img src="@/assets/icon-login-wechat.png" alt="" @click="typeChange('wechat')">
                            <div>微信登录</div>
                        </div>
                        <div class="bot-img">
                            <img src="@/assets/icon-login-email.png" alt="" @click="typeChange('email')">
                            <div>邮箱登录</div>
                        </div>
                    </div>
                </div>
                <!-- 邮箱登录 -->
                <div class="bind-accout-box" v-show="form.type=='email'">
                    <h2 class="title">邮箱登录</h2>
                    <div class="input-item">
                        <input type="text" v-model="form.email" placeholder="请输入邮箱">
                    </div>
                    <div class="input-item">
                        <input v-model="form.code" placeholder="请输入验证码" />
                        <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handlePCSendCode('email')">{{isSendCode?'已发送':'发送验证码'}}</span>
                    </div>
                    <div class="global-main-btn login-btn" @click="handleLogin('email')">登录</div>

                    <div style="display:flex;justify-content: space-around;">
                        <div class="bot-img">
                            <img src="@/assets/icon-login-wechat.png" alt="" @click="typeChange('wechat')">
                            <div>微信登录</div>
                        </div>
                        <div class="bot-img">
                            <img src="@/assets/icon-login-phone.png" alt="" @click="typeChange('phone')">
                            <div>手机号登录</div>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="bind-accout-box" v-show="$store.state.showBind">
                <!-- 手机号绑定 -->
                <template v-if="form.type=='phone'">
                <h2 class="title">手机号绑定</h2>
                <div class="phone-area-box" style="margin-bottom: 30px;">
                    <div class="area-box">
                        <span style="margin-right: 10px;">国家/区号</span>
                        <el-dropdown trigger="click" popper-class="self-dropdown">
                            <span class="el-dropdown-link" style="color: #F3A52F;font-size: 16px;">
                                {{selectArea.name}}
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item 
                                        v-for="item in phoneAreaList" 
                                        :key="item.value"
                                        @click="selectArea=item"
                                    >{{item.name}}</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </div>
                <div class="input-item">
                    <input type="text" v-model="form.mobile" placeholder="请输入手机号">
                </div>
                <div class="input-item">
                    <input v-model="form.code" placeholder="请输入验证码" />
                    <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('phone')">{{isSendCode?'已发送':'发送验证码'}}</span>
                </div>
                <div class="global-main-btn login-btn" @click="handleBind('phone')">登录</div>
                <div class="bot-img">
                    <img src="@/assets/icon-login-email.png" alt="" @click="typeChange('email')">
                    <div>邮箱绑定</div>
                </div>
                </template>
                <!-- 邮箱绑定 -->
                <template v-if="form.type=='email'">
                <h2 class="title">邮箱绑定</h2>
                <div class="input-item">
                    <input type="text" v-model="form.email" placeholder="请输入邮箱">
                </div>
                <div class="input-item">
                    <input v-model="form.code" placeholder="请输入验证码" />
                    <span :class="['send-code-btn',isSendCode&&'send-code-disabled']" @click="handleSendCode('email')">{{isSendCode?'已发送':'发送验证码'}}</span>
                </div>
                <div class="global-main-btn login-btn" @click="handleBind('email')">登录</div>
                <div class="bot-img">
                    <img src="@/assets/icon-login-phone.png" alt="" @click="typeChange('phone')">
                    <div>手机号绑定</div>
                </div>
                </template>
            </div>
        </div>
    </div>
</template>

<style lang="scss">
.login-wrap{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,0.4);
    z-index: 999;
    .main-box{
        padding-bottom: 20px;
        .bot-nav{
            padding: 0 40px;
            justify-content: space-around;
            img{
                width: 50px;
                height: 50px;
            }
        }
    }
    .content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background-color: #fff;
        border-radius: 8px;
    }
    .wx-qrcode-box{
        padding-top: 20px;
        width: 400px;
        max-height: 500px;
        background-color: #fff;
        border-radius: 16px;
        text-align: center;
    }
    .close-icon{
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
    }
    .bind-accout-box{
        background-color: #fff;
        width: 400px;
        // min-height: 400px;
        padding: 20px;
        border-radius: 16px;
        .logo{
            width: 50px;
            display: block;
            margin: 0 auto 50px auto;
        }
        .title{
            font-size: 20px;
            margin-bottom: 50px;
        }
        input{
            border: none;
            outline: none;
            width: 67%;
        }
        .input-item{
            margin-bottom: 20px;
            padding: 8px 0;
            border-bottom: 1px solid #F2F2F2;
            position: relative;
            .send-code-btn{
                position: absolute;
                right: 0;
                bottom: 8px;
                color: #F3A52F;
                cursor: pointer;
            }
            .send-code-disabled{
                color: #999;
            }
        }
        .login-btn{
            width: 300px;
            margin: 50px auto;
        }
        .bot-img{
            text-align: center;
            font-size: 14px;
            img{
                width: 50px;
                height: 50px;
            }
        }
    }


}
</style>