<template>
    <div :class="curClassName" :style="curStyle">
        <i-button @click="handleClick" :disabled="disabled" :title="curTooltip" :type="buttonType">
            <div :class="['button-content', iconAlign.toLowerCase()]">
                <span v-if="cssClass || imagePath" class="icon">
                    <i v-if="cssClass" :class="cssClass" />
                    <img v-else :src="imagePath" />
                </span>
                <span v-if="showCaption" class="caption">{{ curCaption }}</span>
            </div>
        </i-button>
    </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";

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

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

    /**
     * 模型
     *
     * @type {any}
     * @memberof AppLoginButton
     */
    @Prop() public layoutModelDetails: any;

    /**
     * 加载状态
     *
     * @memberof AppLoginButton
     */
    @Prop({ default: false }) public loading?: boolean;

    /**
     * 下标
     *
     * @type {number}
     * @memberof AppLoginButton
     */
    @Prop({ default: 0 }) public index?: number;

    /**
     * 项名称
     *
     * @type {*}
     * @memberof AppLoginButton
     */
    get itemName() {
        return this.index ? `${this.name}_${this.index}` : this.name;
    }

    /**
     * 标题
     *
     * @memberof AppLoginButton
     */
    get curCaption() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.caption;
        }
    }

    /**
     * 提示信息
     *
     * @memberof AppLoginButton
     */
    get curTooltip() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.tooltip;
        }
    }

    /**
     * 显示标题
     *
     * @memberof AppLoginButton
     */
    get showCaption() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.isShowCaption;
        }
    }

    /**
     * 当前按钮类型
     *
     * @memberof AppLoginButton
     */
    get buttonType() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            if (layoutModel.renderMode == 'LINK') {
                return 'text';
            } else {
                if (
                    Object.is(layoutModel.buttonStyle, 'DEFAULT') ||
                    Object.is(layoutModel.buttonStyle, 'STYLE2') ||
                    Object.is(layoutModel.buttonStyle, 'STYLE3') ||
                    Object.is(layoutModel.buttonStyle, 'STYLE4')
                ) {
                    return 'default';
                } else if (Object.is(layoutModel.buttonStyle, 'DANGER')) {
                    return 'error';
                } else if (Object.is(layoutModel.buttonStyle, 'INVERSE')) {
                    return 'primary';
                } else {
                    return layoutModel.buttonStyle.toLowerCase();
                }
            }
        }
    }

    /**
     * 当前容器样式
     * 
     * @memberof AppLoginButton
     */
    get curStyle() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.getElementStyle();
        }
    }

    /**
     * 禁用
     * 
     * @memberof AppLoginButton
     */
    get disabled() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.disabled;
        }
    }

    /**
     * 类名
     *
     * @memberof AppLoginButton
     */
    get curClassName() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return `app-login-button ${this.itemName} ${layoutModel.sysCss}`;
        }
    }

    /**
     * 图片路径
     *
     * @memberof AppLoginButton
     */
    get imagePath() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let imagePath = '';
            if (layoutModel.sysImage) {
                imagePath = layoutModel.sysImage.imagePath;
            } else if (layoutModel.uiAction) {
                imagePath = layoutModel.uiAction.imagePath;
            }
            return imagePath;
        }
    }

    /**
     * 图标
     *
     * @memberof AppLoginButton
     */
    get cssClass() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            let cssClass = '';
            if (layoutModel.sysImage) {
                cssClass = layoutModel.sysImage.iconcls;
            } else if (layoutModel.uiAction) {
                cssClass = layoutModel.uiAction.iconcls;
            }
            return cssClass;
        }
    }

    /**
     * 图标方向
     *
     * @memberof AppLoginButton
     */
    get iconAlign() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return layoutModel.iconAlign || 'LEFT';
        }else{
            return 'LEFT';
        }
    }

    /**
     * 按钮幽灵属性，使按钮背景透明
     *
     * @memberof AppLoginButton
     */
    get buttonGhost() {
        const layoutModel = this.layoutModelDetails[this.itemName];
        if (layoutModel) {
            return Object.is(layoutModel.buttonStyle, 'INVERSE');
        }else{
            return false;
        }
    }

    /**
     * 处理点击
     *
     * @type {string}
     * @memberof AppLoginButton
     */
    public handleClick() {
        this.$emit("itemClick", this.itemName);
    }

}
</script>

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