<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() {
        this.$emit("itemClick", this.name);
    }

    public mounted() {
        if (this.model) {
            this.containerStyle = this.model.getElementStyle();
        }
    }
}
</script>

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