<!--
 * @Author: Kane
 * @Date: 2023-03-23 15:12:07
 * @LastEditors: Kane
 * @FilePath: /task_schedule/src/layout/components/Header.vue
 * @Description:
 *
 * Copyright (c) ${2022} by Kane, All Rights Reserved.
-->
<template>
    <div class="header-wrapper">
        <span class="company-name">CPIC</span>
        <div class="version-wrapper">
            <span>桌面霸屏后台管理</span>
            <span>Build-20240111</span>
        </div>
        <div class="buttons-wrapper">
            <component
                :is="'SwitchButton'"
                class="icons"
                @click="Logout"
            />
        </div>
    </div>
</template>

<script lang="ts">
import { ElMessageBox } from "element-plus";
import { logout } from "@/utils/account.js";

export default {
    name: "LayoutHeader",
    setup()
    {
        /**
         * 退出登录
         */
        const Logout = (): void =>
        {
            ElMessageBox.confirm(
                "是否要退出系统？",
                "",
                {
                    confirmButtonText: "是",
                    cancelButtonText: "否",
                    type: "warning",
                }
            )
                .then((): void =>
                {
                    // debugger;
                    logout();
                })
                .catch((): void => {});
        };

        return { Logout, };
    },
};
</script>

<style lang="scss" scoped>
.header-wrapper {
    @include no-select;

    height: 50px;
    max-height: 50px;

    padding: 0px 15px;

    // position: relative;

    display: flex;
    justify-content: start;
    align-items: center;

    color: #fff;
    background-color: $banner-background-color;

    span {
        text-align: left;
    }

    >*+* {
        margin-left: 10px;
    }

    .version-wrapper {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;

        font: {
            size: 0.75rem;
        }

        >*+* {
            margin-top: 1px;
        }
    }

    .company-name {
        font-size: 2rem;
    }

    .buttons-wrapper {
        margin-left: auto;
        padding-top: 5px;
        // border: 1px solid salmon;
    }

    .icons {
        width: 25px;
        height: 25px;
        // margin-right: 8px;
        cursor: pointer;
    }
}
</style>
