<template lang="pug">
    .oc-dialog-cover(ref="dialogContainer", v-show="isShow", :class="type")
        .oc-dialog(:class="type", :style="dialogStyle")
            .dialog-hd(v-if="title") {{title}}
                .dialog-close(@click="removeHanlder") ×
            .dialog-bd(:class="{'icon-type': type}")
                i.tip-icon(v-if="type", :class="type")
                .dialog-msg
                    slot
            .dialog-ft(v-if="foot")
                button.primary(ref="btnConfirm", type="button", @click="confirmHanlder", v-html="confirmText || defaultConfirmText")
                button.ml10(ref="btnCancel", type="button", @click="removeHanlder", v-html="cancelText || defaultCancelText")
</template>

<script>
    import Vue from 'vue';
    export default {
        name: 'oc-dialog',
        props: {
            title: String,
            foot: { type: Boolean, default: true },
            defaultShow: { type: Boolean, default: false },
            isDeleteDom: { type: Boolean, default: false },
            isAutoClose: { type: Boolean, default: true },
            type: String,
            confirmText: { type: String, default: null },
            cancelText: { type: String, default: null },
            dialogStyle: null,
        },
        
        computed: {
            defaultConfirmText() {
                return this.i18n && this.i18n.t('_ocui_dialog_confirm_words')
            },
            defaultCancelText() {
                return this.i18n && this.i18n.t('_ocui_dialog_cancel_words')
            }
        },
        data() {
            return {
                isShow: this.defaultShow
            }
        },

        watch: {
            defaultShow(isShow) {
                this.isShow = isShow;
            },
            isShow(isShow) {
                !isShow && this.$emit('hide');
            }
        },

        mounted() {
            this.btnConfirm = this.$refs.btnConfirm;
            this.btnCancel = this.$refs.btnCancel;
        },

        methods: {
            confirmHanlder() {
                this.$emit('confirm', this.$el);
                if(this.isAutoClose) {
                    //confirm 自己关闭---
                    if(this.isDeleteDom){ 
                        $(this.$el).remove();
                    }
                    else {
                        this.isShow = false;
                    }
                }
            },

            hide() {
                this.removeHanlder();
            },
            
            removeHanlder() {
                if(this.isDeleteDom){
                    $(this.$el).remove();
                }
                else{
                    this.isShow = false;
                }
                this.$emit('cancel');
            }
        }
    }
</script>
