<template>
    <!-- <van-nav-bar title="登录" :left-arrow="true" fixed placeholder safe-area-inset-top @click-left="router.go(-1)" /> -->
    <div class="warp clearfloat">
        <div class="login-top clearfloat box-s">
            <div class="ge-back"><img src="@/static/image/login.png"></div>
            <div class="logo-imgs">
                <img src="@/static/image/login-circle.png">
            </div>
        </div>
    </div>
    <div class="tab-account">
        <!-- <ul class="nav nav-tabs login-tabs">
            <li :class="{ active: activeIndex == 0 }" @click="activeIndex = 0">
                <a data-toggle="tab">登录</a>
            </li>
            <li :class="{ active: activeIndex == 1 }" @click="activeIndex = 1">
                <a data-toggle="tab">注册</a>
            </li>
        </ul> -->
        <div class="tab-content">
            <div class="tab-pane fade" v-if="activeIndex == 0">
                <form>
                    <div class="form-group login-group_re">
                        <i class="iconfont icon-shoujihaoma"></i>
                        <input type="text" v-model="formData.account" class="form-control inpt-form"
                            placeholder="请输入手机号" :rules="[{ required: true, message: '请输入手机号' }]">
                    </div>
                    <div class="form-group login-group_re">
                        <i class="iconfont icon-mima"></i>
                        <input v-model="formData.password" class="form-control inpt-form" type="password"
                            placeholder="请输入密码" v-if="!passwordVisible">
                        <input v-model="formData.password" class="form-control inpt-form" type="text"
                            placeholder="请输入密码" v-else>
                        <i class="icon-icon-test iconfont xian-mi icon-icon-test" @click="passwordVisible = true"
                            v-if="!passwordVisible"></i>
                        <i class="iconfont xian-mi icon-close-eye" @click="passwordVisible = false" v-else></i>
                    </div>
                    <div class="login-btns">
                        <van-button class="btn" type="primary" round @click="login">登录</van-button>
                        <!-- #ifdef H5-SGY -->
                        <van-button class="btn" plain type="primary" round
                            @click="fastLoginBySgy">爽贵阳用户快捷登录</van-button>
                        <!-- #endif -->
                    </div>
                </form>
            </div>
            <div class="tab-pane fade in active" v-if="activeIndex == 1">
                <form role="form">
                    <div class="form-group login-group_re">
                        <i class="iconfont icon-shoujihaoma"></i>
                        <input type="text" class="form-control inpt-form" placeholder="请输入手机号">
                    </div>

                    <div class="form-group login-group_re">
                        <i class="iconfont icon-yanzhengma2"></i>
                        <input type="tel" class="form-control inpt-form" placeholder="请输入手机号验证码">
                        <a href="javascript:;" data-appid="2034800824" data-cbfn="callback"
                            class="linkABlue yanzheng">获取验证码</a>
                    </div>
                    <div class="form-group login-group_re">
                        <i class="iconfont icon-mima"></i>
                        <input data-toggle="password" class="form-control inpt-form" type="password"
                            placeholder="请输入密码">
                    </div>

                    <button type="button" class="conf-btn login-btns">注册</button>
                </form>

            </div>
        </div>
    </div>
</template>

<script setup>
import { showToast, showLoadingToast, closeToast } from 'vant'
import { loginByPassword, loginBySgy } from '@/api/account'
import useUserStore from '@/store/user'
import testJson from '@/utils/test.json';

const router = useRouter()
const userStore = useUserStore()
const activeIndex = ref(0)
const passwordVisible = ref(false)

const formData = ref({
    account: '',
    password: ''
})

onLoad(async() => {
    if (import.meta.env.VITE_APP_ENV === 'development') {
        if (userStore.logout) await signIn2();
        return
    } 

    if(xma.xh.isMediaConvergenceXinhuaApp()) {
        userStore.logout()
        fastLoginBySgy()
    }
})

const login = async () => {
    if (!formData.value.account) {
        showToast('请输入用户名')
        return
    }
    if (!formData.value.password) {
        showToast('请输入密码')
        return
    }
    showLoadingToast({
        message: '登录中',
        forbidClick: true,
        duration: 0
    })
    const res = await loginByPassword(formData.value)
    userStore.login(res)
    closeToast()
    showToast('登录成功')
    // router.pushTab({ name: 'home' })
    // router.back()
    router.push({ name: 'mine' })
}

const sgyLoginParams = ref({
    appid: import.meta.env.VITE_APP_SGY_APPID,
    type: "sgy",
    encryptDataMap: {},
    systemcode: import.meta.env.VITE_APP_SYSTEM_CODE
})
const fastLoginBySgy = () => {
    xma.xh.getUserProfile({
        range: ['ACCOUNT', 'MOBILE'],
        async success(info) {
            console.log(info)
            showLoadingToast({
                message: '登录中',
                forbidClick: true,
                duration: 0
            })
            sgyLoginParams.value.encryptDataMap = info.data
            const res = await loginBySgy(sgyLoginParams.value)
            console.log(res)
            userStore.login(res)
            closeToast()
            showToast({
                title: '登录成功',
                icon: 'success'
            })
            // router.pushTab({ name: 'home' })
            // router.back()
            router.push({ name: 'mine' })
        }
    });
}

// 登录
const signIn2 = async () => {
    showLoadingToast({
        title: '加载中...',
        mask: true,
    });
    sgyLoginParams.value.encryptDataMap = testJson
    const res = await loginBySgy(sgyLoginParams.value)
    console.log(res)
    userStore.login(res)
    closeToast()
    // router.pushTab({ name: 'home' })
    router.push({ name: 'mine' })
};
</script>

<style scoped>
@import url('@/assets/iconfont/iconfont.css');

.clearfloat:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}

.clearfloat {
    zoom: 1
}

.box-s {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.tab-account .login-tabs {
    display: flex;
    justify-content: center;
}

.tab-account .login-tabs li {
    width: 50%;
    text-align: center;
}

.tab-account {
    background-color: #fff;
    padding: 0;
    margin-top: 11%;
}

.tab-account .nav-tabs {
    padding: 0 0.4rem;
    border-bottom: none !important;
}

.tab-account .nav-tabs li {
    width: 35%;
    text-align: center;
}

.nav-tabs>li>a {
    color: #000;
    font-size: 0.45rem;
}

.nav>li>a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

.tab-account .nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    color: #4C82FF;
    border-color: transparent;
    border-bottom: 2px solid #4C82FF !important;
    background-color: transparent;
}

.tab-account .tab-content {
    margin-top: 10px;
    background: #fff;
    padding: 0.4rem;
}

.form-control:focus,
.form-control:active,
.form-control:hover {
    border-color: #1890ff !important;
    box-shadow: none;
}

.conf-btn {
    width: 100%;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    border: none;
    background: #4c82ff !important;
    color: #fff;
    font-size: 0.48rem;
}



.login-top {
    width: 100%;
    height: 6.8rem;
}

.login-top .ge-back img {
    width: 100%;
    height: 6.4rem;
    display: block;
    margin: 0 auto;
}

.logo-imgs {
    position: relative;
    left: 44%;
    top: -27%;
    width: 3rem;
    height: 3rem;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    -moz-box-shadow: 2px 2px 5px rgba(76, 130, 255, .4);
    -webkit-box-shadow: 2px 2px 5px rgba(76, 130, 255, .4);
    box-shadow: 2px 2px 5px rgba(76, 130, 255, .4);

}

.logo-imgs img {
    width: 2.2rem;
    height: 2.2rem;
    margin: 0.4rem 0;
}

.login-group_re {
    display: flex;
    gap: 10px;
    margin-bottom: 3%;
}

.login-group_re i {
    line-height: 37px;
    color: #4C82FF;
    font-size: 1rem;
    background: #fff;
}

.login-group_re .input-group-addon {
    padding: 0;
    background-color: transparent;
    border: none;
    border-radius: none;
}

.login-group_re .input-group {
    width: 100%;
}

.login-group_re .xian-mi {
    color: #8a8a8a;
}


.login-group_re .inpt-form {
    flex: 1;
    border: none !important;
    border-bottom: solid 1px #EEE !important;
    height: 40px;
    outline: none;
    line-height: 40px;
    background-color: #FFF;
}

.login-group_re .inpt-form:focus {
    border-bottom: 1px solid #4C82FF !important;
}

.yanzheng {
    line-height: 40px;
    color: #4C82FF;
    font-size: 0.4rem;
    width: 2.5rem;
    text-align: center;
    font-size: 0.4rem;
}

.yanzheng:focus,
.yanzheng:hover,
.yanzheng:active {
    color: #4c82ff;
}

.login-wang {
    display: flex;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    margin-top: 3%;
}

.login-wang a {
    font-size: 0.4rem;
}

.login-btns {
    margin-top: 4%;
    width: 100%;
    gap: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


}

.btn {
    width: 100%;
}
</style>