<template>
    <div class="layout-container">
        <StarBackground />
        <div class="top">
            <div>
                <span class="corner corner-top"></span>
                <span class="corner corner-left"></span>
                <span class="corner corner-bottom"></span>
                <span class="corner corner-right"></span>
                <span class="corner-main">
                    <i aria-label="图标: logout" class="anticon anticon-logout"
                        style="font-size: 18px; vertical-align: middle; padding-right: 5px;">
                        <svg viewBox="64 64 896 896" data-icon="logout" width="1em" height="1em" fill="currentColor"
                            aria-hidden="true" focusable="false" class="">
                            <path
                                d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 0 1-112.7 75.9A352.8 352.8 0 0 1 512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 0 1-112.7-75.9 353.28 353.28 0 0 1-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z">
                            </path>
                        </svg></i> 退出登录 </span>
            </div>
        </div>
        <div data-v-72f3b8ba="" class="container">
            <div data-v-72f3b8ba="" class="user-layout-content">
                <div data-v-72f3b8ba="" class="qt">
                    <div data-v-343b0500="" data-v-72f3b8ba="" class="bg">
                        <div class="content_bg" style="filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 10px);">
                            <div class="paltform_title">
                                <span>
                                    <!-- <i class="corner corner-top"></i>
                                    <i class="corner corner-left"></i>
                                    <i class="corner corner-bottom"></i>
                                    <i class="corner corner-right"></i> -->
                                    <span>南通市通州区互联网+智慧养老居家上门服务项目</span>
                                </span>
                            </div>
                            <div class="paltform_list">
                                <div value="CALL_CENTER" class="paltform_icon">
                                    <div class="paltform_icon_1">
                                        <img :src="tel" alt="" srcset="" width="76" height="76" class="img">
                                    </div>
                                    <p>呼叫中心</p>
                                </div>
                                <div value="SUPERVISION" class="paltform_icon" @click="handleSelect('jianguan')">
                                    <div class="paltform_icon_1">
                                        <img :src="jianguan" alt="" srcset="" width="70" height="70">
                                    </div>
                                    <p>监管平台</p>
                                </div>
                                <div value="HOME_BED" class="paltform_icon">
                                    <div class="paltform_icon_1">
                                        <img :src="yunying" alt="" srcset="" width="76" height="76">
                                    </div>
                                    <p>运营平台</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { Modal, notification } from 'ant-design-vue'
import { computed, onMounted, ref, onBeforeMount } from 'vue'
import StarBackground from '@/components/StartBackground/index.vue'
import tel from '@/assets/imgs/tel2.png'
import jianguan from '@/assets/imgs/jianguan3.png'
import yunying from '@/assets/imgs/yunying.png'
import { useAppStore, useRouterStore, useUserStore } from '@/store'
import { template } from 'lodash-es'
import { useRoute, useRouter } from 'vue-router'
import storage from '@/utils/storage'
defineOptions({
    name: 'PlatForm',
})
const appStore = useAppStore()
const routerStore = useRouterStore()
const router = useRouter()
// 在组件挂载前设置 body 类名
onBeforeMount(() => {
    document.body.className = 'body-bg'
})
async function handleSelect(type) {
     storage.local.setItem('platform', type)
    // 加载完成
    if (appStore.complete) {
        goIndex()
    } else {
        await appStore.init({ platform: type })
        goIndex()
    }
}
async function goIndex() {
    console.log('goIndex')
    const indexRoute = getFirstValidRoute()
    console.log(indexRoute)
    if (!indexRoute) return
    router.push(indexRoute)
    notification.success({
        message: t('welcome'),
        description: `${timeFix()}，${t('home')}`,
    })
}
/**
 * 获取首页路由
 * @return {*}
 */
function getFirstValidRoute() {
    const indexRoute = routerStore.indexRoute
    if (!indexRoute) {
        Modal.warning({
            title: '系统提示',
            content: '没有任何权限，请联系系统管理员',
            onOk: () => {
                window.location.reload()
            },
        })
    }
    return indexRoute
}
</script>
<style lang="less" scoped>
.body-bg {
    background-attachment: fixed;
    overflow: hidden;
}

// .login-container {
//   height: 100vh;        // 推荐使用 100vh 而不是 100%，确保占满视口
//   width: 100vw;
//   overflow: hidden;
//   background-color: #050608;
//   position: relative;
// }
.layout-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #050608;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    // background: url('@/assets/imgs/plat-bg.png') no-repeat center;
    background-size: cover;

    .top {
        width: 100%;
        height: 80px;
        background: -webkit-gradient(linear, left top, left bottom, from(#0a063a), to(hsla(0, 0%, 100%, 0)));
        background: linear-gradient(180deg, #0a063a, hsla(0, 0%, 100%, 0));
        position: fixed;
        top: 0;
        overflow: hidden;
        z-index: 999;

        &>div {
            width: 120px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            position: absolute;
            top: 20px;
            right: 50px;
            cursor: pointer;
            color: #fff;
            z-index: 0;

            .corner {
                position: absolute;
                width: 10px;
                height: 10px;
                border: 3px solid #58c7ee;
                -webkit-transition: all .4s ease-out;
                transition: all .4s ease-out;
                border-radius: 2px;
            }

            .corner-top {
                top: 0;
                left: 0;
                border: 3px solid #0542a6;
                border-bottom: none;
                border-right: none;
            }

            .corner-left {
                bottom: 0;
                left: 0;
                border-top: none;
                border-right: none;
            }

            .corner-bottom {
                bottom: 0;
                right: 0;
                border: 3px solid #0542a6;
                border-top: none;
                border-left: none;
            }

            .corner-right {
                top: 0;
                right: 0;
                border-bottom: none;
                border-left: none;
            }
        }
    }

    .container {
        width: 80%;
        margin: 0 auto;
        min-height: 100%;
        background-size: 100%;
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;

        .user-layout-content {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            padding: 0 0 24px;

            .qt {
                height: 100%;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                -ms-flex-direction: column;
                flex-direction: column;
                padding-top: 8%;

                .bg {
                    width: 100%;

                    .content_bg {
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-pack: center;
                        -ms-flex-pack: center;
                        justify-content: center;
                        -webkit-box-orient: vertical;
                        -webkit-box-direction: normal;
                        -ms-flex-direction: column;
                        flex-direction: column;

                        .paltform_title {
                            min-height: 87px;
                            text-align: center;
                            line-height: 87px;

                            &>span {
                                // font-family: YouSheBiaoTiHei;
                                font-weight: bold;
                                font-size: 48px;
                                color: #fff;
                                text-shadow: 0 2px 4px #215dcb;
                                position: relative;
                                display: inline-block;
                                min-width: 100px;
                                min-height: 80px;
                                font-style: italic;

                                .corner {
                                    position: absolute;
                                    width: 45px;
                                    height: 45px;
                                    border: 5px solid #58c7ee;
                                    -webkit-transition: all .4s ease-out;
                                    transition: all .4s ease-out;
                                    border-radius: 2px;
                                }

                                .corner-top {
                                    top: -10px;
                                    left: -30px;
                                    border-bottom: none;
                                    border-right: none;
                                }

                                .corner-left {
                                    bottom: -10px;
                                    left: -30px;
                                    border-top: none;
                                    border-right: none;
                                }

                                .corner-bottom {
                                    bottom: -10px;
                                    right: -30px;
                                    border: 5px solid #0542a6;
                                    border-top: none;
                                    border-left: none;
                                }

                                .corner-right {
                                    top: -10px;
                                    right: -30px;
                                    border: 5px solid #0542a6;
                                    border-bottom: none;
                                    border-left: none;
                                }
                            }
                        }

                        .paltform_list {
                            webkit-box-align: center;
                            align-items: center;
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: center;
                            justify-content: center;
                            margin-top: 30px;

                            .paltform_icon {
                                display: flex;
                                align-items: center;
                                -webkit-box-flex: 0;
                                -ms-flex: 0 0 16%;
                                flex: 0 0 16%;
                                height: 200px;
                                background: rgba(255, 255, 255, .2);
                                border-radius: 8px;
                                font-size: 20px;
                                font-weight: 600;
                                color: #fff;
                                -ms-flex-pack: center;
                                -ms-flex-align: center;
                                -ms-flex-pack: distribute;
                                justify-content: space-around;
                                -webkit-box-orient: vertical;
                                -webkit-box-direction: normal;
                                -ms-flex-direction: column;
                                flex-direction: column;
                                -webkit-transition: all 2s ease;
                                transition: all 2s ease;
                                cursor: pointer;
                                position: relative;
                                z-index: 1;
                                margin: 20px;

                                &>.paltform_icon_1 {
                                    width: 120px;
                                    height: 120px;
                                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABfCAYAAACOTBv1AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAX6ADAAQAAAABAAAAXwAAAAB1MuhLAAABVElEQVR4Ae3dQQ7CIBAAwK7xdfoP+yb9h35vpQc8SbEJaQ8OJwLbpRlIuzfilpnTSotpet0jrishpr4IzJnPAnv5MvUZOn16jU5JsLo5jccM/yAQ9eQ/Isoh1/YQqObdk7/Hy/zrGvAP3Hn48A8UOHDp81JKqmj23QHm+3pbjQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIQIxZz6XTPeI65CMknQFqvm5XER86UYLGCpQzd2BPpR1WzL427yGRsMfyrktGfxtXkOj45ZZvv/tttxUrxJq+7Rmloqm/lhbMd2TXxKsbk4rsfG+wBs+Ey1cwCcnYAAAAABJRU5ErkJggg==) no-repeat 50%;
                                    display: -webkit-box;
                                    display: -ms-flexbox;
                                    display: flex;
                                    -webkit-box-pack: center;
                                    -ms-flex-pack: center;
                                    justify-content: center;
                                    -webkit-box-align: center;
                                    -ms-flex-align: center;
                                    align-items: center;

                                    .img {
                                        width: 76px;
                                        height: 76px;
                                    }
                                }
                            }

                            .paltform_icon::before {
                                content: "";
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 100%;
                                height: 100%;
                                background: -webkit-gradient(linear, left top, left bottom, from(#2af3f5), to(#054cb6));
                                background: linear-gradient(180deg, #2af3f5, #054cb6);
                                border-radius: 8px;
                                z-index: -1;
                                opacity: 0;
                                -webkit-transform: scale3d(.5, .5, .5);
                                transform: scale3d(.5, .5, .5);
                                -webkit-transition: opacity .4s, -webkit-transform .4s;
                                transition: opacity .4s, -webkit-transform .4s;
                                transition: transform .4s, opacity .4s;
                                transition: transform .4s, opacity .4s, -webkit-transform .4s;

                            }
                        }
                    }
                }
            }
        }

        .user-layout-platform {
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            align-items: center;
            gap: 20px;
            width: 100%;

            .platform-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 200px;
                flex-shrink: 0;
                /* 防止元素被压缩 */
                background: #415172;
                border-radius: 8px;
                font-size: 20px;
                font-weight: 600;
                color: #fff;

                img {
                    width: 80px;
                    height: 80px;
                    margin-bottom: 10px;
                }

                span {
                    font-size: 16px;
                    font-weight: 500;
                }
            }
        }
    }
}
</style>