import { Subject } from 'rxjs';
import { VNode } from 'vue';
import { Prop, Vue, Component } from 'vue-property-decorator';
import { Dialog } from 'vant';
Vue.use(Dialog);
import './app-message-box.less';
@Component({})
export default class AppMessageBoxComponent extends Vue {

    /**
     * 类型
     * 
     * @type { 'info' | 'success' | 'warn' | 'error' }
     * @memberof AppMessageBoxComponent
     */
    @Prop({ default: 'info' })
    public type?: 'info' | 'success' | 'warn' | 'error';

    /**
     * 标题
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
    public title?: string;

    /**
     * 内容
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
	public content?: string;

    /**
     * 启用自定义底部
     *
     * @type {boolean}
     * @memberof ModalConfirmOptions
     */
    @Prop({ default: false })
    public visibleCustomFooter?: boolean;


    /**
     * 自定义底部
     *
     * @type {VNode}
     * @memberof ModalConfirmOptions
     */
    @Prop()
    public customFooter?: VNode;

    /**
     * 自定义类名
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
    public customClass?: string;

    /**
     * 自定义类名
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
    public iconClass?: string;

    /**
     * 是否显示右上角的关闭按钮
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop({ default: false })
    public showClose?: boolean;

    /**
     * 是否显示遮罩
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop({ default: true })
    public mask?: boolean;

    /**
     * 是否可以点击遮罩关闭
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop({ default: true })
    public maskClosable?: boolean;

    /**
     * 显示模式
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop({ default: 'center' })
    public showMode?: string | 'center';

    /**
     * 关闭回调
     *
     * @type {Function}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
    public onClose?: Function;

    /**
     * 引用对象名称
     *
     * @type {string}
     * @memberof AppMessageBoxComponent
     */
    @Prop()
    public refName?: string;

    @Prop({ default: false })
    public showCancelButton?: boolean;

    @Prop({ default: () => {
        return {
            'confirm-text': '确认',
            'confirm-color': '#ee0a24',
            'cancel-text': '取消',
            'cancel-button': 'black'
        }
    }})
    public buttonStyle!: any;

    /**
     * 数据传递对象
     *
     * @type {any}
     * @memberof AppMessageBoxComponent
     */ 
    public subject: null | Subject<any> = new Subject<any>();

    /**
     * 层级
     *
     * @type {any}
     * @memberof AppMessageBoxComponent
     */ 
    public zIndex:any = null;

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

    /**
     * 获取显示模式类名 居中/top
     *
     * @memberof AppMessageBoxComponent
     */ 
    public getClassName() {
        return this.showMode === 'center'?'center':'top';
    }

    /**
     * 获取数据传递对象
     *
     * @memberof AppMessageBoxComponent
     */ 
    public getSubject(){
        return this.subject;
    }

    /**
     * 根据type计算iconClass
     *
     * @memberof AppMessageBoxComponent
     */ 
    public geticonClass(){
        if(this.customClass){
            return this.customClass;
        }
        let classes = '';
        switch (this.type) {
            case 'info':
                classes = 'comment-o';
                break;
            case 'success':
                classes = 'checked-o';
                break;
            case 'warn':
                classes = 'warning-o';
                break;
            case 'error':
                classes = 'clear-o';
                break;
        }
        return classes;
    }

    /**
     * 关闭方法
     *
     * @memberof AppMessageBoxComponent
     */ 
    public close() {
        this.isShow = false;
        if(this.onClose){
            this.onClose(this)
        }
        setTimeout(() => {
            document.body.removeChild(this.$el);
            this.$destroy();
            this.subject = null;
        }, 500)
    }

    public confirm() {
        if (this.subject) {
            this.subject.next(true);
        }
        this.close();
    }

    public cancel() {
        if (this.subject) {
            this.subject.next(false);
        }
        this.close();
    }

    /**
     * Vue生命周期mounted
     *
     * @memberof AppMessageBoxComponent
     */ 
    public mounted() {
        const zIndex = this.$store.getters.getZIndex();
        if (zIndex) {
            this.zIndex = zIndex + 100;
            this.$store.commit('updateZIndex', this.zIndex);
        }
        if(this.visibleCustomFooter && this.customFooter){
            this.$slots.customFooter = [this.customFooter];
            this.$forceUpdate();
        }
        this.isShow = true;
	}

	render() {
        return (
            <van-dialog 
                value={this.isShow}
                ref={this.refName}
                class={[ 'app-message-box', this.customClass ? this.customClass : '' ]}
                closable={this.showClose}
                zIndex={this.zIndex}
                overlay={this.mask}
                close-on-click-overlay={this.maskClosable}
                className={this.getClassName()}
                show-cancel-button={this.showCancelButton}
                confirm-button-text={this.buttonStyle['confirm-text']}
                confirm-button-color={this.buttonStyle['confirm-color']}
                cancel-button-text={this.buttonStyle['cancel-text']}
                cancel-button-color={this.buttonStyle['cancel-color']}
                on-colse={(event: any) => { this.close(); }}
                on-confirm={ () => { this.confirm(); } }
                on-cancel={ () => { this.cancel(); } }
                scopedSlots={{
                    title: () => {
                        return [
                            <van-icon name={this.geticonClass()}></van-icon>,
                            this.title
                        ]
                    },
                    default: () => {
                        return <div style="text-align:center" class="content">{ this.content }</div>
                    }
                }}>
            </van-dialog>
        )
	}
	
}