<template>
    <el-alert
        v-if="hasContent"
        v-show="showState"
        :title="title"
        :description="message"
        :type="type"
        :closable="closable"
        @close="alertClose">
        
    </el-alert>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import ViewMessageService from '@/message/view-message-service';

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

    /**
     * 视图消息标识
     * 
     * @type {any}
     * @memberof AppAlert
     */
    @Prop() tag: any;

    /**
     * 显示位置
     * 
     * @type {any}
     * @memberof AppAlert
     */
    @Prop() position: any;
    
    /**
     * 视图消息对象
     * 
     * @type {any}
     * @memberof AppAlert
     */
    public data: any = {};
    
    /**
     * 视图消息标题
     * 
     * @type {any}
     * @memberof AppAlert
     */
    public title: string = '';

    /**
     * 视图消息内容
     * 
     * @type {any}
     * @memberof AppAlert
     */
    public message: string = '';

    /**
     * 视图消息类型
     * 
     * @type {any}
     * @memberof AppAlert
     */
    public type: string = '';

    /**
     * 视图消息关闭模式
     * 
     * @type {any}
     * @memberof AppAlert
     */
    public closeMode: any = '';

    /**
     * 视图消息是否可关闭
     * 
     * @type {boolean}
     * @memberof AppAlert
     */
    public closable: boolean = true;

    /**
     * 是否显示
     * 
     * @type {boolean}
     * @memberof AppAlert
     */
    public showState: boolean = true;

    /**
     * 视图消息服务
     * 
     * @type {ViewMessageService}
     * @memberof AppAlert
     */
    public viewMessageService = ViewMessageService.getInstance();

    /**
     * 是否存在内容
     * 
     * @type {boolean}
     * @memberof AppAlert
     */
    public hasContent: boolean = false;

    /**
     * 显示时长（秒）
     * 
     * @type {boolean}
     * @memberof AppAlert
     */
    public duration: number = 3;

    /**
     * Vue生命周期
     * 
     * @memberof AppAlert
     */
    public created() {
        this.getData().then((result:any) =>{
            if(this.data) {
                this.afterCreated();
            }
        })
    }

    /**
     * 组件创建之前
     * 
     * @memberof AppAlert
     */
    public afterCreated() {
        let flag: boolean = true;
        //  不存在内容则不显示
        if(!this.data.content && !this.data.title) {
            return;
        }
        this.hasContent = true;
        //  视图消息是否支持删除
        if(!this.data.isEnableRemove) {
            this.closable = false;
        }
        flag = this.handleCloseMode(flag);
        this.handlePosition(flag);        
    }

    /**
     * 获取视图消息对象
     * 
     * @memberof AppAlert
     */
    public async getData() {
        let tempData: any;
        let response: any = await this.viewMessageService.getViewMessageByTag(this.tag, null, null)
        if(response) {
            tempData = response[0];
            if(tempData.type) {
                if(Object.is('WARN', tempData.type)) {
                    tempData.type = "warning";
                }
                if(Object.is("ERROR", tempData.type)) {
                    tempData.type = "error";
                }
            } else {
                tempData.type="info";
            }
            this.data= tempData;
        }   
    }

    /**
     * 处理关闭模式
     * 
     * @param flag 默认删除标记
     * @memberof AppAlert
     */
    public handleCloseMode(flag: boolean) {
        if(this.data.closeMode) {
            if(Object.is('default', this.data.closeMode)) {
                const id = this.$store.getters.getViewMessage(this.data.codename);
                if(id) {
                    this.showState = false;
                    flag = false;
                }
            }
            if(Object.is('notclose', this.data.closeMode)) {
                this.closable = false;
            }
        }
        return flag;
    }

    /**
     * 处理显示位置
     * 
     * @memberof AppAlert
     */
    public handlePosition(flag: boolean) {
        if(this.data.position) {
            if(flag && Object.is('POP', this.data.position)) {
                this.showState = false;
                setTimeout(() => {
                    this.$message({
                        dangerouslyUseHTMLString: true,
                        message: "<p class='title'><strong>"+ this.data.title + "</strong></p><p>" + this.data.content + "</p>",
                        type: this.data.type,
                        showClose: this.closable,
                        onClose: this.alertClose,
                    })
                }, 0)
            } else {
                this.title = this.data.title;
                this.message = this.data.content;
                this.type = this.data.type;
            }
        } 
    }

    /**
     * 视图消息关闭
     * 
     * @memberof AppAlert
     */
    public alertClose() {
        if(this.data.closeMode && Object.is("default", this.data.closeMode)) {
            const args = {tag: this.data.codename, id: this.data.id};
            this.$store.commit('addViewMessage', args);
        }
    }

}
</script>

<style lang="less">
@import './app-alert.less';
</style>