<template>
    <div
        class="
            common-header-container
            d-flex
            justify-content-between
            align-items-center
        "
    >
        <div class="logo-container" @click="goHome">
            <span class="logo-name1">亲亲通行证</span>
            <span class="dividline">|</span>
            <span class="logo-name2">企业管理后台</span>
        </div>
        <div>
            <teammix-header
                v-model="headerOption"
                v-if="headerOption"
                ref="header"
            />
        </div>
    </div>
</template>

<script lang="ts">
    import { Direction } from "@/router";
    import { Component, Vue } from "vue-property-decorator";
    import { Envir } from "@/api/env";
    import {
        TeammixHeader,
        TeammixEnterpriseSelectorEnvironment,
        TeammixEnterpriseSelectorOption,
        OrganizationItemV2,
    } from "teammix-frame-element-vue";
    import { UserController } from "@/api/token";
    import EnterpriseHost from "@/views/service/enterprise-host";

    @Component({ components: { TeammixHeader } })
    export default class CommonHeader extends Vue {
        private headerOption: TeammixEnterpriseSelectorOption | null = null;

        mounted() {
            UserController.tryLogin();
            this.buildPublicHeader();
        }

        private goHome() {
            this.go(Direction.AddressBook);
        }

        private getTeammixEnterPriseSelectorEnvironment() {
            if (Envir.isPro()) {
                return TeammixEnterpriseSelectorEnvironment.Pro;
            }
            if (Envir.isStaging()) {
                return TeammixEnterpriseSelectorEnvironment.Pre;
            }
            return TeammixEnterpriseSelectorEnvironment.Dev;
        }

        private buildPublicHeader() {
            const comid = EnterpriseHost.getPoid();
            this.headerOption = {
                token: () => UserController.getCurrentUserTokenHasBearer(),
                envir: this.getTeammixEnterPriseSelectorEnvironment(),
                onLogout: this.signout,
                selectedEnterpriseId: comid,
                onlyShowOwner: true,
                autoSelectEnterprise4One: true,
                isSkipRealNameVertify: true,
                offset: 64,
                disableMoreService: true,
                onEnterpriseChanged: this.onEnterpriseChanged as any,
                common: true,
            };
        }

        private signout() {
            UserController.signout();
        }

        private onEnterpriseChanged(poid: string, item: OrganizationItemV2) {
            if (EnterpriseHost.getPoid() === poid) {
                return;
            }
            EnterpriseHost.setPoid(poid);
            EnterpriseHost.setOid(item.id);

            const resolve = this.$router.resolve({
                name: Direction[Direction.AddressBook],
            });
            window.location.href = resolve.href;
        }
    }
</script>

<style lang="less" scoped>
    @import "~@/css/variables.less";
    .common-header-container {
        height: 64px;
        width: 100%;
        padding-left: 40px;
        padding-right: 40px;
        background-color: #fff;

        .logo-container {
            cursor: pointer;
            user-select: none;
            height: 20px;
            font-size: 14px;
            font-weight: 400;
            color: #8f95b3;

            .logo-name1 {
                height: 25px;
                font-size: 18px;
                font-weight: 800;
                color: #077aec;
            }

            .dividline {
                padding: 0 10px;
            }
        }
    }
</style>