<template>
    <div class="layout-content">
        <div class="header xl-flex xl-between ">
            <div class="project-name">扬州市能源大数据中心</div>
            <div class="navigate xl-flex xl-between">
                <router-link :to="{ name: 'EnergyDataPanorama' }">
                    <div class="tab-item xl-flex xl-column ">
                        <span class="tab-title">能源数据全景</span>
                        <div class="tab-bottom"></div>
                    </div>
                </router-link>
                <router-link to="/energyGoodPlace">
                    <div class="tab-item xl-flex xl-column ">
                        <span class="tab-title">能源好地方</span>
                        <div class="tab-bottom"></div>
                    </div>
                </router-link>
                <router-link to="/enterpriseEnergyCenter">
                    <div class="tab-item xl-flex xl-column ">
                        <span class="tab-title">企业能效中心</span>
                        <div class="tab-bottom"></div>
                    </div>
                </router-link>
                <router-link to="/publicServiceCenter">
                    <div class="tab-item xl-flex xl-column ">
                        <span class="tab-title">公共服务中心</span>
                        <div class="tab-bottom"></div>
                    </div>
                </router-link>
                <router-link to="/dataSharingCenter">
                    <div class="tab-item xl-flex xl-column ">
                        <span class="tab-title">数据共享中心</span>
                        <div class="tab-bottom"></div>
                    </div>
                </router-link>
            </div>
            <div class="time">{{ dateTime }}</div>
        </div>
        <div class="bottom">
            <img class="bottom-img" src="@/assets/images/layout/background-bottom.png" alt="">
        </div>
    </div>
    <div class="content-body">
        <!-- <transition name="animation">
            <router-view></router-view>
        </transition> -->

        <router-view v-slot="{ Component }">
            <transition name="fade-right" mode="out-in">
                <component :is="Component" />
            </transition>
        </router-view>
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import { useRouter, RouterLink } from 'vue-router'
import moment from "moment";
// import headerBackground from '@/assets/images/layout/header-background.svg'
export default defineComponent({
    name: 'ComLayout',
    setup() {
        const router = useRouter()
        const state = reactive({
            dateTime: moment().format("HH:mm:ss"),
        })

        onMounted(() => {
            setInterval(() => {
                state.dateTime = moment().format("HH:mm:ss")
            }, 1000)
        })
        return {
            ...toRefs(state),
        }
    }
})
</script>

<style scoped lang="less">
.layout-content {
    width: 1920px;
    position: relative;
    // overflow: hidden;

    .header {
        background: url(@/assets/images/layout/background.png) no-repeat center;
        background-size: cover;
        height: 98px;
        width: 100%;
        padding: 25px 80px 33px 135px;

        .project-name {
            font-family: Alimama;
            font-style: normal;
            font-weight: 700;
            font-size: 32px;
            line-height: 32px;

            background: linear-gradient(180deg, #FFFFFF 0%, #27A6FF 123.44%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
            text-shadow: 0px 4px 4px rgba(91, 176, 236, 0.3);
            width: 320px;

        }

        .navigate {
            // flex: 1;
            // background: red;
            padding: 20px 100px 0 0px;
            height: 90px;

            a {
                text-decoration: none;
                font-style: normal;
                font-weight: 500;
                font-size: 18px;
                line-height: 20px;
                text-align: center;
                color: #A1D1EF;
                opacity: 0.8;
            }

            .tab-bottom {
                width: 195px;
                height: 21px;
                background: transparent;
            }

            .router-link-active {
                .tab-item {
                    .tab-title {
                        color: #fff;

                    }

                    .tab-bottom {

                        background: url(@/assets/images/layout/tab-chosed.png) no-repeat center;
                        background-size: cover;
                    }
                }
            }
        }

        .time {
            font-style: normal;
            font-weight: 500;
            font-size: 24px;
            line-height: 34px;
            color: #C1E7FF;
        }
    }

    .bottom {
        width: 100%;
        height: 6px;
        position: absolute;
        bottom: 11px;
        z-index: 9;
        /* background: red; */

    }
}

@keyframes auto {
    0% {
        transform: translateX(0px);
        /* background-position-x: 0; */
        // left: 0;
    }


    10% {
        left: 20%;
    }

    20% {
        left: 40%;
    }

    30% {
        left: 60%;
    }

    40% {
        left: 80%;
    }

    50% {
        transform: translateX(-121px);
        /* background-position-x: 500px; */
        left: 100%;
    }

    60% {
        // transform: translateX(0px);
        /* background-position-x: 0; */
        left: 80%;
    }

    70% {
        left: 60%;
    }

    80% {
        left: 40%;
    }

    90% {
        left: 20%;
    }

    100% {

        left: 0;
    }


}



.bottom-img {

    /* background: url(@/assets/images/layout/background-bottom.png) no-repeat center;
    background-size: 100%; */
    height: 6px;
    width: 121px;
    left: 0px;
    position: relative;
    animation: auto 5s linear infinite;
}

.content-body {
    width: 100%;
    height: calc(1080px - 100px);
}
</style>
