<template>
    <div class="y_dialog">
        <y-overload @click="fnOverLoad" :show="uiShow" :z-index="zIndex" :leave-delay="200"></y-overload>
        <div :class="'y_dialog_main ' + swfClass"
             :style="styleStr"
             v-if="swfShow"
             @transitionend="fnTransitionend"
             @webkitTransitionend="fnTransitionend">
            <div class="y_dialog_title" v-if="!isHtml">{{title}}</div>
            <div class="y_dialog_cotnent" v-else v-html="title"></div>
            <div class="y_dialog_close" v-if="topic == 'window'" @click="fnButtonCancel"></div>
            <div class="y_dialog_tools" v-if="topic == 'normal'">
                <div class="y_dialog_button" v-if="isCancel">
                    <y-button :topic="buttonCancelTopic"
                              :type="buttonCancelType"
                              :plain="buttonCancelPlain"
                              v-if="!isSlotCancel"
                              :text="tipsCancel"
                              size="small"
                              :key="title + '_cancel'"
                              :open-type="buttonCancelOpentype"
                              :sessionFrom="buttonCancelSessionFrom"
                              :send-message-title="cancelSendMessageTitle"
                              :send-message-path="cancelSendMessagePath"
                              :send-message-img="cancelSendMessageImg"
                              :show-message-card="cancelShowMessageCard"
                              @opentype="fnButtonOpenTypeHandle"
                              :letter-space="tipsCancel.length>2 ? '':'middle'"
                              @click="fnButtonCancel"></y-button>
                    <div v-else>
                        <slot name="cancel"></slot>
                    </div>
                </div>
                <div class="y_dialog_button" v-if="isEnter">
                    <y-button :topic="buttonEnterTopic"
                              :type="buttonEnterType"
                              :plain="buttonEnterPlain"
                              :text="tipsEnter"
                              size="small"
                              :key="title + '_enter'"
                              :open-type="buttonEnterOpentype"
                              :sessionFrom="buttonEnterSessionFrom"
                              :send-message-title="enterSendMessageTitle"
                              :send-message-path="enterSendMessagePath"
                              :send-message-img="enterSendMessageImg"
                              :show-message-card="enterShowMessageCard"
                              @opentype="fnButtonOpenTypeHandle"
                              v-if="!isSlotEnter"
                              :letter-space="tipsCancel.length>2 ? '':'middle'"
                              @click="fnButtonEnter"></y-button>
                    <div v-else>
                        <slot name="enter"></slot>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import yOverload from "./yOverload.vue";
    import yTransition from "./yTransition.vue";
    import yButton from "./yButton.vue";
    import transition from "./mixins/transition";
    import Vue from "vue";

    function __check(disThrowError) {
        if (Vue.prototype.$dialog && Vue.prototype.$dialog.$data) {
            return true;
        } else {
            if(!disThrowError)throw new Error("dialog 安装失败");
            return false;
        }
    }

    function setValue(item,options,key,defaultString){
        if(options[key]!==undefined){
            item[key]=options[key]
        }
        else if(defaultString !== undefined){
            item[key]=defaultString;
        }
    }

    function setOptions(options) {
        options = options || {};
        if (options.title !== undefined) {
            this.$data.title = options.title;
        }
        if (options.zIndex !== undefined) {
            this.$data.zIndex = options.zIndex;
        }
        setValue(this.$data,options,"clickOverloadHide",false);
        setValue(this.$data,options,"autoHide",true);
        setValue(this.$data,options,"width","");
        setValue(this.$data,options,"tipsCancel","取消");
        setValue(this.$data,options,"tipsEnter","确定");
        setValue(this.$data,options,"buttonCancelOpentype","");
        setValue(this.$data,options,"buttonEnterOpentype","");
        setValue(this.$data,options,"buttonEnterType","");
        setValue(this.$data,options,"buttonEnterPlain",false);
        setValue(this.$data,options,"buttonEnterTopic","gradient");
        setValue(this.$data,options,"buttonCancelType","");
        setValue(this.$data,options,"buttonCancelPlain",true);
        setValue(this.$data,options,"buttonCancelTopic","main");
        setValue(this.$data,options,"buttonCancelSessionFrom","");
        setValue(this.$data,options,"buttonEnterSessionFrom","");
        setValue(this.$data,options,"cancelSendMessageTitle","");
        setValue(this.$data,options,"cancelSendMessagePath","");
        setValue(this.$data,options,"cancelSendMessageImg","");
        setValue(this.$data,options,"cancelShowMessageCard","");
        setValue(this.$data,options,"enterSendMessageTitle","");
        setValue(this.$data,options,"enterSendMessagePath","");
        setValue(this.$data,options,"enterSendMessageImg","");
        setValue(this.$data,options,"enterShowMessageCard","");
        setValue(this.$data,options,"isHtml",false);
        setValue(this.$data,options,"topic","normal");

        return options;
    }

    export default {
        name: "yDialog",
        components: {
            yOverload,
            yTransition,
            yButton
        },
        computed: {
            isCancel() {
                return this.type == "confirm";
            },
            isEnter() {
                return this.type == "dialog" || this.type == "confirm";
            },
            isSlotCancel() {
                return this.$slots && !!this.$slots.cancel
            },
            isSlotEnter() {
                return this.$slots && !!this.$slots.enter
            },
            swfClass(){
                return (this.topic == 'window' ? "y_dialog_topic_window" :"");
            },
            styleStr() {
                return (this.background ? "background:" + this.background + ";" : "") + (this.width ? "width:" + this.width + ";" : "") + (this.zIndex ? "z-index:" + this.plus(this.zIndex, 1) + ";" : "");
            },
        },
        data() {
            return {
                autoHide: true,
                background: "",
                width: "",
                buttonEnterTopic:"gradient",
                buttonEnterType:"",
                buttonEnterPlain:false,
                buttonEnterSessionFrom:false,
                buttonCancelTopic:"main",
                buttonCancelType:"",
                buttonCancelSessionFrom:"",
                buttonCancelPlain:true,
                clickOverloadHide: false,
                buttonCancelOpentype:"",
                buttonEnterOpentype:"",
                cancelSendMessageTitle:"",
                cancelSendMessagePath:"",
                cancelSendMessageImg:"",
                cancelShowMessageCard:"",
                enterSendMessageTitle:"",
                enterSendMessagePath:"",
                enterSendMessageImg:"",
                enterShowMessageCard:"",
                isHtml:false,
                title: this.propTitle,
                tipsCancel: this.propTipsCancel,
                tipsEnter: this.propTipsEnter,
                topic:"normal",
                type: "dialog",
                uiShow: this.propUishow,
                zIndex: "",
            }
        },
        install(Vue, options) {
            options = options || {};
            Vue.prototype.$dialog = {};
            Vue.component(this.name, this);
            if (options.getZIndex && options.getZIndex.call) {
                Vue.prototype.$dialogGetIndex = options.getZIndex;
            }
        },
        mixins: [transition("y_dialog",{showTimeout:500,hideTimeout:500})],
        methods: {
            clear() {
                this.uiShow = false;
                this.$off("clickCancel");
                this.$off("clickEnter");
                this.$off("opentypeHandle");
            },
            fnButtonCancel() {
                this.$emit("clickCancel");
                this.autoHide && this.clear();
            },
            fnButtonEnter() {
                this.$emit("clickEnter");
                this.autoHide && this.clear();
            },
            fnButtonOpenTypeHandle(res) {
                this.$emit("opentypeHandle", res);
            },
            fnOverLoad() {
                this.$emit("clickOverLoad");
                if (this.clickOverloadHide) this.clear();
            },
            plus: (a, b) => a + b,
            showBox() {
                const self = this;
                if (Vue.prototype.$dialogGetIndex && Vue.prototype.$dialogGetIndex.call) {
                    const zIndex = Vue.prototype.$dialogGetIndex();
                    if (!isNaN(zIndex)) {
                        self.zIndex = Math.round(zIndex);
                    }
                }
            }
        },
        props: {
            disGlobal: {
                default: false,
                type: Boolean,
            },
            propType: {
                default: "dialog",
            },
            propTitle: String,
            propUishow: {
                default: false,
                type: Boolean
            },
            propTipsCancel: {
                default: "取消"
            },
            propTipsEnter: {
                default: "确定"
            },
        },
        watch: {
            uiShow() {
                if (this.uiShow) {
                    this.showBox();
                }
                this.$emit("update:propUishow", this.uiShow);
            },
            propUishow() {
                this.uiShow = this.propUishow;
            }
        },
        created() {
            if (Vue.prototype.$dialog && !this.disGlobal) {
                Vue.prototype.$dialog = this;
            }
        },

        switchRoot(item){
            if(item && item.$options && item.$options.name == "yDialog"){
                Vue.prototype.$dialog = item;
            }
        },
        clear(disThrowError) {
            if (!__check(disThrowError)) return;
            let self = Vue.prototype.$dialog;
            self.clear();
        },
        confirm(text, options) {
            return new Promise((resolve, reject) => {
                if (!__check()) return reject();
                let self = Vue.prototype.$dialog;
                options = setOptions.call(self, options);
                self.$data.title = text || "";
                self.$data.uiShow = true;
                self.$data.type = "confirm"
                self.$on("clickCancel", () => {
                    options.bindCancel && options.bindCancel.call && options.bindCancel();
                    reject();
                })
                self.$on("clickEnter", () => {
                    options.bindEnter && options.bindEnter.call && options.bindEnter();
                    resolve();
                })
                self.$on("opentypeHandle", (res) => {
                    options.opentypeHandle && options.opentypeHandle(res);
                })
            })
        },
        dialog(text, options) {
            let ret = new Promise((resolve, reject) => {
                if (!__check()) return reject();
                let self = Vue.prototype.$dialog;
                options = setOptions.call(self, options);
                self.$data.title = text || "";
                self.$data.uiShow = true;
                self.$data.type = "dialog"
                self.$on("clickEnter", () => {
                    resolve && resolve();
                })
                self.$on("opentypeHandle", (res) => {
                    options.opentypeHandle && options.opentypeHandle(res);
                })
            })
            return ret;
        },

    }


</script>

<style lang="scss">
    @import "../css/var.scss";

    .y_dialog_main {
        width: 306px;
        min-height: 128px;
        position: fixed;
        top: 103px;
        left: 50%;
        transform: translateX(-50%) scale(1);
        box-sizing: border-box;
        background: $dialog_background;
        border-radius: $dialog_border_radius;
        padding: 29px;
    }

    .y_dialog_topic_window{
        padding: 35px 28px 65px 28px;

        .y_dialog_close{
            display: block;
            border-radius: 50%;
            position: absolute;
            left:50%;
            bottom:-60px;
            transform: translateX(-15px);
            width: 30px;
            height: 30px;
            &:before{
                content:"\e601";
                font-family: yesaway_ui;
                color:#fff;
                font-size: 30px;
                text-align: center;

            }
        }
    }


    .y_dialog_enter, .y_dialog_leave_to {
        transform: translateX(-50%) scale(0.8);
        opacity: 0;
    }

    .y_dialog_enter_active {
        transition: all .1s ease-out .2s;
    }

    .y_dialog_leave_active {
        transition: all .1s ease-in;
    }

    .y_dialog_title {
        font-size: $font_size_t4;
        color: $dialog_text_color;
        text-align: center;
        @include text_clamp(2);

    }

    .y_dialog_cotnent{
        font-size: $font_size_t4;
        color: $dialog_text_color;

        text-align: left;
    }

    .y_dialog_tools {
        margin-top: 30px;
        display: flex;

        .y_dialog_button {
            flex: 1;
            margin-left: 18px;

            &:first-child {
                margin-left: 0;
            }
        }

    }


</style>
