<template>
    <div :class="[model.sysCss, 'app-login-button']" :style="containerStyle">
        <i-button @click="handleClick" :type="curStyle">
            <template v-if="model.sysImage">
                <i v-if="model.sysImage.iconcls" :class="model.sysImage.iconcls"/>
                <img v-else-if="model.sysImage.imagePath" :src="model.sysImage.imagePath" />
            </template>
            <span v-show="model.isShowCaption">{{ model.caption }}</span>
        </i-button>
    </div>
</template>

<script lang="ts">
import { PanelButtonModel } from "@/model/panel-detail";
import { Vue, Component, Prop } from "vue-property-decorator";

@Component({})
export default class AppLoginButton extends Vue {

    /**
     * 名称
     *
     * @type {PanelButtonModel}
     * @memberof AppLoginButton
     */
    @Prop() public name!: string;

    /**
     * 模型
     *
     * @type {PanelButtonModel}
     * @memberof AppLoginButton
     */
    @Prop() public model!: PanelButtonModel;

    /**
     * 类型
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    @Prop() public defaultStyle?: string;

    /**
     * 当前按钮类型
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    get curStyle(): string {
        if (this.model.renderMode == 'LINK') {
            return 'text';
        } else if (this.model.buttonStyle != "DEFAULT" && this.defaultStyle) {
            return this.defaultStyle;
        } else {
            return this.model.buttonStyle.toLowerCase();
        }
    }

    /**
     * 按钮样式
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    public containerStyle: any = null;

    /**
     * 处理点击
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    public handleClick() {
        switch (this.model.predefinedType) {
            case "APP_LOGOUT":
                this.logout();
                break;
            case "APP_REGISTER":
                this.register();
                break;
            default:
                this.$emit("itemClick", this.name);
        }
    }

    public mounted() {
        if (this.model) {
            this.containerStyle = this.model.getElementStyle();
        }
    }

    /**
     * 登出
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    public logout() {
        this.$http
            .get("/v7/logout")
            .then((response: any) => {
                if (response && response.status === 200) {
                    localStorage.removeItem("user");
                    localStorage.removeItem("token");
                    let leftTime = new Date();
                    leftTime.setTime(leftTime.getSeconds() - 1);
                    document.cookie = "ibzuaa-token=;expires=" + leftTime.toUTCString();
                    this.$router.push({ name: "login" });
                }
            })
            .catch((error: any) => {
                console.error(error);
            });
    }

    /**
     * 注册
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    public register() {
        // todo
    }
}
</script>

<style lang="less">
@import "./app-login-button.less";
</style>
