<template>
    <div class="app-header-user">
        <dropdown transfer-class-name="app-header-user__dropdown-menu" @on-click="userSelect" :transfer="true">
            <div class="app-header-user__caption">
                <span>{{ user.name ? user.name : $t('components.appuser.name') }}</span>
                &nbsp;&nbsp;<avatar :src="user.avatar" />
            </div>
            <dropdown-menu class="menu" slot="list">
                <dropdown-item name="lockscren">
                    <app-lock-scren />
                </dropdown-item>
                <dropdown-item name="changetheme" >
                    <app-custom-theme :viewStyle="this.viewStyle"></app-custom-theme>
                </dropdown-item>
                <dropdown-item v-if="enabledChangePassword" name="updatepwd">
                    <span><Icon type="ios-create-outline" /></span>
                    <span>{{ $t('components.appuser.changepwd') }}</span>
                </dropdown-item>
                <dropdown-item name="logout">
                    <span><i aria-hidden="true" class="ivu-icon ivu-icon-md-power" ></i></span>
                    <span>{{ $t('components.appuser.logout') }}</span>
                </dropdown-item>
            </dropdown-menu>
        </dropdown>
    </div>
</template>
<script lang = 'ts'>
import { Vue, Component, Prop } from 'vue-property-decorator';
import { Subject, Subscription } from 'rxjs';
import { Environment } from '@/environments/environment';
import { AppServiceBase, removeSessionStorage } from 'ibiz-core';
import { clearCookie, getCookie } from 'qx-util';
@Component({})
export default class AppUser extends Vue {

    /**
     * 视图样式类型
     *
     * @type {any}
     * @memberof AppUser
     */ 
    @Prop() public viewStyle!: string;

    /**
     * 视图样式类型
     *
     * @type {any}
     * @memberof AppUser
     */ 
    @Prop({default: true}) public enabledChangePassword!: boolean;

    /**
     * 用户信息
     *
     * @memberof AppUser
     */
    public user = {
        name: '',
        avatar: './assets/img/avatar.png',
    };

    /**
     * 状态事件
     *
     * @private
     * @type {(Subscription | undefined)}
     * @memberof AppImagePreview
     */
    private stateEvent: Subscription | undefined;

    /**
     * 下拉选选中回调
     *
     * @param {*} data
     * @memberof AppUser
     */
    public userSelect(data: any) {
        if (Object.is(data, 'logout')) {
            const title: any = this.$t('components.appuser.surelogout');
            this.$Modal.confirm({
                title: title,
                onOk: () => {
                    this.logout();
                },
            });
        } else if (Object.is(data, 'updatepwd')) {
            let container: Subject<any> = this.$appmodal.openModal(
                {
                    viewname: 'app-update-password',
                    title: this.$t('components.appuser.changepwd') as string,
                    width: 500,
                    height: 400,
                },
                {},
                {},
            );
            this.stateEvent = container.subscribe((result: any) => {
                if (!result || !Object.is(result.ret, 'OK')) {
                    return;
                }
            });
        }
    }

    /**
     * vue  生命周期
     *
     * @memberof AppUser
     */
    public mounted() {
        let _user: any = {};
        if (this.$store.getters.getAppData()) {
            if (this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfpersonname) {
                _user.name = this.$store.getters.getAppData().context.srfpersonname;
            } else {
                if (getCookie('ibzuaa-user')) {
                    let user: any = JSON.parse(getCookie('ibzuaa-user') as string);
                    if (user && user.personname) {
                        _user.name = user.personname;
                    }
                }
            }
            if (this.$store.getters.getAppData().context && this.$store.getters.getAppData().context.srfusericonpath) {
                _user.avatar = this.$store.getters.getAppData().context.srfusericonpath;
            }
        } else {
            if (getCookie('ibzuaa-user')) {
                let user: any = JSON.parse(getCookie('ibzuaa-user') as string);
                if (user && user.personname) {
                    _user.name = user.personname;
                }
            }
        }
        Object.assign(this.user, _user, {
            time: +new Date(),
        });
    }

    /**
     * 退出登录
     *
     * @memberof AppUser
     */
    public logout() {
        const get: Promise<any> = this.$http.get('/v7/logout');
        get.then((response: any) => {
            if (response && response.status === 200) {
                this.clearAppData();
                if((Environment as any).casLogoutUrl){
                    window.location.href = `${(Environment as any).casLogoutUrl}?service=${window.location.href}`;
                } else if (Environment.loginUrl) {
                    window.location.href = `${Environment.loginUrl}?redirect=${window.location.href}`;
                } else {
                    this.$router.push({ name: 'login' });
                }
            }
        }).catch((error: any) => {
            console.error(error);
        });
    }

    /**
     * 清除应用数据
     *
     * @private
     * @memberof AppUser
     */
    private clearAppData() {
        // 清除user、token
        let leftTime = new Date();
        leftTime.setTime(leftTime.getSeconds() - 1);
        clearCookie('ibzuaa-token', true);
        clearCookie('ibzuaa-expired',true);
        clearCookie('ibzuaa-user', true);
        // 清除应用级数据
        localStorage.removeItem('localdata');
        this.$store.commit('addAppData', {});
        this.$store.dispatch('authresource/commitAuthData', {});
        // 清除租户相关信息
        removeSessionStorage('activeOrgData');
        removeSessionStorage('srfdynaorgid');
        removeSessionStorage('dcsystem');
        removeSessionStorage('orgsData');
        // 重置路由缓存
        const navHistory: any = AppServiceBase.getInstance().getAppNavDataService();
        navHistory.reset();  
    }

    public destroyed() {
        if (this.stateEvent) {
            this.stateEvent.unsubscribe();
        }
    }
}
</script>