<script setup lang="ts">
import { computed } from 'vue';
import { logoProps } from './types';
import { useNiConfig } from '~/config';
const niConfig = useNiConfig()
const props = defineProps(logoProps);

// * logo内容
const logoContent = computed<string[]>(() => {
    const name = props.logoName || niConfig.get('logoName') || ['N', 'i']
    return Array.isArray(name) ? name : [String(name)[0], String(name)[1]]
})
</script>

<template>
    <div class="ni-logo">
        <div class="content">
            <div class="first">{{ logoContent[0] }}</div>
            <div class="second">{{ logoContent[1] }}</div>
        </div>
        <div class="mask">
            <div class="first"><div class="maskContainer"><div class="maskContent">{{ logoContent[0] }}</div></div></div>
            <div class="second"><div class="maskContainer"><div class="maskContent">{{ logoContent[1] }}</div></div></div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use '@/styles/style.scss' as niStyle;
.ni-logo{
    // logo样式的一些变量
    // * logo宽度
    --ni-logo-width: 6em;
    // * logo高度
    --ni-logo-height: 3em;
    // * logo遮罩层背景颜色
    --ni-logo-mask-background-color: #111;
    // * logo字体颜色
    --ni-logo-mask-font-color: #fff;

    // = logo容器
    position: relative;
    width: var(--ni-logo-width);
    height: var(--ni-logo-height);
    user-select: none;
    .content,.mask{
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        &.content > div{
            flex: 1;
            @extend .AllCenter;
        }
    }
    .content{
        position: relative;
    }
    .mask{
        position: absolute;
        top: 0;
        left: 0;
        & > div.first, & > div.second{
            position: relative;
            width: 50%;
            overflow: hidden;
            height: 100%;
            &.first{
            }
            &.second{
                & > div.maskContainer{
                    background-color: var(--ni-logo-mask-background-color);
                    color: var(--ni-logo-mask-font-color);
                    @extend .LogoAnimation;
                }
            }
            & > div.maskContainer{
                width: 0;
                height: 100%;
                overflow: hidden;
                & > div.maskContent{
                    width: calc(var(--ni-logo-width) / 2);
                    height: 100%;
                    @extend .AllCenter;
                }
            }
        }
    }
}
</style>