<template>
    <div>
        <a-spin :spinning="loading" :delay="500">
            <div class="container">
                <div class="left">
                    <img
                        style="width: 100%; height: 100%"
                        :src="getImage('/login.png')"
                    />
                </div>
                <div class="right">
                    <div class="content">
                        <div class="top">
                            <div class="header">
                                <!-- <link to="/"> -->
                                <img
                                    alt="logo"
                                    class="logo"
                                    :src="getImage('/logo.png')"
                                />
                                <!-- </link> -->
                            </div>
                            <div class="desc">物联网平台</div>
                            <div class="main">
                                <a-form
                                    layout="vertical"
                                    :model="form"
                                    class="login-form"
                                    @finish="onFinish"
                                >
                                    <a-form-item
                                        label="账号"
                                        name="username"
                                        :rules="[
                                            {
                                                required: true,
                                                message: '请输入账号!',
                                            },
                                        ]"
                                    >
                                        <a-input
                                            v-model:value="form.username"
                                            placeholder="请输入账号"
                                            :maxlength="64"
                                        ></a-input>
                                    </a-form-item>
                                    <a-form-item
                                        label="密码"
                                        name="password"
                                        :rules="[
                                            {
                                                required: true,
                                                message: '请输入密码!',
                                            },
                                        ]"
                                    >
                                        <a-input-password
                                            v-model:value="form.password"
                                            placeholder="请输入密码"
                                            :maxlength="64"
                                        ></a-input-password>
                                    </a-form-item>
                                    <a-form-item
                                        v-if="codeConfig"
                                        class="verifyCode"
                                        label="验证码"
                                        name="verifyCode"
                                        :rules="[
                                            {
                                                required: true,
                                                message: '请输入验证码!',
                                            },
                                        ]"
                                    >
                                        <a-input
                                            class="login-code-input"
                                            v-model:value="form.verifyCode"
                                            autocomplete="off"
                                            :maxlength="64"
                                            placeholder="请输入验证码"
                                        ></a-input>
                                        <div class="login-code">
                                            <img
                                                :src="codeUrl"
                                                @click="getCode()"
                                                class="login-code-img"
                                            />
                                        </div>
                                    </a-form-item>
                                    <a-form-item
                                        name="remember"
                                        style="text-align: left"
                                    >
                                        <a-checkbox
                                            v-model:checked="form.remember"
                                            >记住密码</a-checkbox
                                        >
                                    </a-form-item>
                                    <a-form-item>
                                        <a-button
                                            :loading="loading"
                                            type="primary"
                                            html-type="submit"
                                            class="login-form-button"
                                            block
                                        >
                                            登录
                                        </a-button>
                                    </a-form-item>
                                </a-form>
                                <div class="other">
                                    <a-divider plain>
                                        <div class="other-text">
                                            其他方式登录
                                        </div>
                                    </a-divider>
                                    <div class="other-button">
                                        <a-button
                                            v-for="(item, index) in bindings"
                                            :key="index"
                                            type="link"
                                            @Click="handleClickOther(item)"
                                        >
                                            <img
                                                style="width: 32px, height: 33px"
                                                :alt="item.name"
                                                :src="
                                                    iconMap.get(
                                                        item.provider,
                                                    ) || defaultImg
                                                "
                                            />
                                        </a-button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="bottom">
                        <div class="view">
                            JETLINKS团队全新力作可视化大屏系统
                        </div>
                        <div class="url">
                            <div style="height: 33px">
                                <img :src="viewLogo" />
                            </div>
                            <a
                                href="https://view.jetlinks.cn/"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                体验DEMO
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </a-spin>
    </div>
</template>

<script setup lang="ts">
import { getImage } from '@/utils/comm';
import {
    config,
    code,
    authLogin,
    getInitSet,
    systemVersion,
    bindInfo,
} from '@/api/login';
import Cookies from 'js-cookie';
import { useUserInfo } from '@/store/userInfo';
import { LocalStore } from '@/utils/comm';
import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';

const store = useUserInfo();
const router = useRouter();
const bgImage = getImage('/logo.png');
const viewLogo = getImage('/view-logo.png');

const LoginWarpStyle = reactive({
    backgroundImage: `url(${bgImage})`,
});

const screenWidth = ref(document.body.clientWidth);
const screenHeight = ref(document.body.clientHeight);

const form = reactive({
    username: '',
    password: '',
    remember: false,
    expires: 3600000,
    verifyCode: '',
    verifyKey: '',
});

const codeUrl = ref('');
const codeConfig = ref(false);

const loading = ref(false);
const bindings = ref<any[]>();

const defaultImg = getImage('/apply/provider1.png');
const iconMap = new Map();
iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));

const onFinish = async () => {
    form.remember
        ? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
              expires: 7,
          })
        : Cookies.remove('user');
    Cookies.set('username', form.username, { expires: 30 });
    try {
        loading.value = true;
        const res: any = await authLogin(form);
        if (res.success) {
            store.$patch({
                ...res.result,
                username: form.username,
            });
            LocalStore.set(TOKEN_KEY, res?.result.token);
            const resp: any = await getInitSet();
            if (resp.success) {
                router.push('/demo');
            }
        }
    } catch (error) {
        form.verifyCode = '';
        getCode();
        loading.value = false;
    }
};

const getCode = async () => {
    const configRes: any = await config();
    if (!configRes.success || (configRes.success && !configRes.result.enabled))
        return;

    codeConfig.value = true;
    const res: any = await code();
    if (res.success) {
        codeUrl.value = res.result.base64;
        form.verifyKey = res.result.key;
    }
};

const getCookie = () => {
    // form.username = Cookies.get('username');
    if (!Cookies.get('user')) return;
    const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
    form.username = user.username;
    form.password = user.password;
    form.remember = user.remember || false;
};

const getOpen = () => {
    systemVersion().then((res: any) => {
        if (res.success && res.result) {
            LocalStore.set(Version_Code, res.result.edition);
            if (res.result.edition !== 'community') {
                bindInfo().then((res: any) => {
                    if (res.success) {
                        bindings.value = res.result;
                    }
                });
            }
        }
    });
};

const handleClickOther = (item: any) => {
    LocalStore.set('onLogin', 'no');
    window.open(`${BASE_API_PATH}/application/sso/${item.id}/login`);
    window.onstorage = (e) => {
        if (e.newValue) {
            window.location.href = '/';
        }
    };
};

const screenRotation = (width: number, height: number) => {
    LoginWarpStyle.backgroundImage = `url(${bgImage})`;
};

window.onresize = () => {
    return (() => {
        screenWidth.value = document.body.clientWidth;
        screenHeight.value = document.body.clientHeight;
    })();
};

watch(
    [() => screenWidth.value, () => screenHeight.value],
    (value) => {
        screenRotation(value[0], value[1]);
    },
    { deep: true },
);

getOpen();
getCode();
getCookie();
screenRotation(screenWidth.value, screenHeight.value);
</script>

<style scoped lang="less">
.container {
    display: flex;
    height: 100vh;
    overflow: auto;
    background: @layout-body-background;

    .left {
        width: 73%;
        height: 100%;
    }

    .right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 27%;
        background: #fff;

        :deep(.ant-layout-footer) {
            background: #fff;
        }

        .content {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            padding: 0 0 15% 0;
            margin-top: 20%;

            .top {
                width: 100%;
                // text-align: center;

                .header {
                    height: 44px;
                    line-height: 44px;
                    text-align: center;

                    a {
                        text-decoration: none;
                    }

                    .logo {
                        height: 44px;
                        margin-right: 16px;
                        vertical-align: top;
                    }

                    .title {
                        position: relative;
                        top: 2px;
                        color: @heading-color;
                        font-weight: 600;
                        font-size: 33px;
                        font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
                            sans-serif;
                    }
                }

                .desc {
                    margin-top: 12px;
                    margin-bottom: 40px;
                    // color: @heading-color;
                    color: rgb(0 0 0 / 70%);
                    font-weight: 600;
                    font-size: 22px;
                    font-family: Avenir, 'Helvetica Neue', Arial, Helvetica,
                        sans-serif;
                    text-align: center;
                }

                .main {
                    width: 70%;
                    margin: 60px auto 0;

                    @media screen and (max-width: @screen-sm) {
                        width: 95%;
                        max-width: 328px;
                    }

                    .icon {
                        margin-left: 16px;
                        color: rgba(0, 0, 0, 0.2);
                        font-size: 24px;
                        vertical-align: middle;
                        cursor: pointer;
                        transition: color 0.3s;

                        &:hover {
                            color: @primary-color;
                        }
                    }

                    .other {
                        margin-top: 20px;

                        .other-text {
                            color: #807676d9;
                            font-size: 12px;
                        }

                        .other-button {
                            position: relative;
                            bottom: 10px;
                            text-align: center;
                        }
                    }

                    .prefixIcon {
                        color: @primary-color;
                        font-size: @font-size-base;
                    }

                    .remember {
                        display: flex;
                        flex-direction: row;
                        margin-bottom: 30px;
                    }

                    .verifyCode {
                        .login-code-input {
                            width: 70%;
                            float: left;
                        }
                        .login-code {
                            width: 30%;
                            height: 32px;
                            float: left;
                            background-color: #e4e6e7;
                            img {
                                cursor: pointer;
                                vertical-align: middle;
                            }
                            .login-code-img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 11%;
        border-top: 1px solid #e0e4e8;

        .view {
            width: 247px;
            height: 20px;
            margin-right: 10%;
            margin-bottom: 10px;
            padding-top: 2px;
            color: rgba(0, 0, 0, 0.65);
            font-size: 14px;
            font-family: 'PingFang SC';
        }

        .url {
            display: flex;
            align-items: center;
            margin-right: 10%;

            img {
                width: 100%;
                height: 100%;
            }

            a {
                position: relative;
                left: 60px;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                padding: 2px 7px;
                line-height: 20px;
                border: 1px solid #2f54eb;
                border-radius: 2px;
            }
        }
    }
}

@media (min-width: @screen-md-min) {
    .container {
        //background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg');
        background-repeat: no-repeat;
        background-position: center 110px;
        background-size: 100%;
    }

    .content {
        padding: 32px 0 24px;
    }
}
</style>
