<template>
    <div class="y_dialog_v2">
        <div :class="'y_dialog_v2_mainWrap ' + topicClass + ' ' +swfClass"
             :style="styleStr"
             @touchmove.stop.prevent="e=>e && e.preventDefault && e.preventDefault()"
             @click="fnButtonCancel"
             v-if="swfShow"
             @transitionend="fnTransitionend"
             @webkitTransitionend="fnTransitionend">
            <div class="y_dialog_v2_main" @click.stop="">
                <div class="y_dialog_v2_title" v-if="title">{{title}}</div>
                <div class="y_dialog_v2_title" v-else>
                    <slot name="title"></slot>
                </div>
                <div class="y_dialog_v2_cotnent">
                    <slot>
                        <div class="y_dialog_v2_desc">{{desc}}</div>
                    </slot>
                </div>
                <div class="y_dialog_v2_close" v-if="topic == 'window'" @click="fnButtonCancel"></div>
                <div class="y_dialog_v2_tools" v-if="topic == 'modal'">
                    <button class="y_dialog_v2_button y_dialog_v2_cancelButton"
                            :open-type="buttonCancelOpentype"
                            :sessionFrom="buttonCancelSessionFrom"
                            :send-message-title="cancelSendMessageTitle"
                            :send-message-path="cancelSendMessagePath"
                            :send-message-img="cancelSendMessageImg"
                            :show-message-card="cancelShowMessageCard"
                            :style="{color:cancelColor}"
                            @click="fnButtonCancel"
                            @opentype="fnButtonOpenTypeHandle">
                        <div v-if="!loadingCancel">
                            <slot name="cancel">
                                {{tipsCancel}}
                            </slot>
                        </div>
                        <div v-else>
                            <y-loading
                                    topic="common"
                                    size="auto"
                            ></y-loading>
                        </div>
                    </button>
                    <button class="y_dialog_v2_button y_dialog_v2_enterButton"
                            :open-type="buttonEnterOpentype"
                            :sessionFrom="buttonEnterSessionFrom"
                            :send-message-title="enterSendMessageTitle"
                            :send-message-path="enterSendMessagePath"
                            :send-message-img="enterSendMessageImg"
                            :show-message-card="enterShowMessageCard"
                            :style="{color:enterColor}"
                            @click="fnButtonEnter"
                            @opentype="fnButtonOpenTypeHandle">
                        <div v-if="!loadingEnter">
                            <slot name="enter">
                                {{tipsEnter}}
                            </slot>
                        </div>
                        <div v-else>
                            <y-loading
                                    topic="common"
                                    size="auto"
                            ></y-loading>
                        </div>
                    </button>
                </div>
                <div class="y_dialog_v2_tools" v-if="topic == 'normal' || topic == 'pet'">
                    <div class="y_dialog_v2_button" v-if="isCancel">
                        <slot name="cancel">
                            <y-button :topic="buttonCancelTopic"
                                      :type="buttonCancelType"
                                      :plain="buttonCancelPlain"
                                      :radius="topic == 'pet' ? 'round' : ''"
                                      :width = "topic == 'pet' ? '100%' : ''"
                                      :height = "topic == 'pet' ? '30px' : ''"
                                      :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>
                        </slot>
                    </div>
                    <div class="y_dialog_v2_button" v-if="isEnter">
                        <slot name="enter">
                            <y-button :topic="buttonEnterTopic"
                                      :type="buttonEnterType"
                                      :plain="buttonEnterPlain"
                                      :text="tipsEnter"
                                      :radius="topic == 'pet' ? 'round' : ''"
                                      :width = "topic == 'pet' ? '100%' : ''"
                                      :height = "topic == 'pet' ? '30px' : ''"
                                      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"
                                      :letter-space="tipsEnter.length>2 ? '':'middle'"
                                      @click="fnButtonEnter"></y-button>
                        </slot>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>

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

    function __check(disThrowError) {
        if (Vue.prototype.$dialogHandle && Vue.prototype.$dialogHandle.$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", this.propTipsCancel || "取消");
        setValue(this.$data, options, "tipsEnter", this.propTipsEnter || "确定");
        setValue(this.$data, options, "buttonCancelOpentype", "");
        setValue(this.$data, options, "desc", this.propDesc || "");
        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", this.propTopic || "modal");

        return options;
    }

    export default {
        name: "yDialog",
        components: {
            yOverload,
            yTransition,
            yLoading,
            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
            },*/
            isSlotTitle() {
                return this.$slots && !!this.$slots.title
            },
            /*isSlotContent() {
                return this.$slots && !!this.$slots.default
            },*/
            topicClass() {
                return (this.topic == 'modal' ? " y_dialog_v2_topic_modal" : "") +
                    (this.topic == 'pet' ? " y_dialog_v2_topic_pet" : "") +
                    (this.topic == 'window' ? " y_dialog_v2_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: "",
                buttonEnterTopic: "gradient",
                buttonEnterType: "",
                buttonEnterPlain: false,
                buttonEnterSessionFrom: "",
                buttonCancelTopic: "main",
                buttonCancelType: "",
                buttonCancelSessionFrom: "",
                buttonCancelPlain: true,
                clickOverloadHide: false,
                buttonCancelOpentype: "",
                buttonEnterOpentype: "",
                cancelSendMessageTitle: "",
                cancelSendMessagePath: "",
                cancelSendMessageImg: "",
                cancelShowMessageCard: "",
                cancelColor: this.propCancelColor,
                desc: this.propDesc,
                enterSendMessageTitle: "",
                enterSendMessagePath: "",
                enterSendMessageImg: "",
                enterShowMessageCard: "",
                enterColor: this.propEnterColor,
                isHtml: false,
                title: this.propTitle,
                tipsCancel: this.propTipsCancel,
                tipsEnter: this.propTipsEnter,
                topic: this.propTopic || "modal",
                type: this.propType || "dialog",
                uiShow: this.propUishow,
                width: "",
                zIndex: 9999,
            }
        },
        install(Vue, options) {
            options = options || {};
            Vue.prototype.$dialogHandle = {};
            Vue.component(this.name, this);
            if (options.getZIndex && options.getZIndex.call) {
                Vue.prototype.$dialogGetIndex = options.getZIndex;
            }
        },
        mixins: [transition("y_dialog_v2", {showTimeout: 500, hideTimeout: 500})],
        methods: {
            clear() {
                this.uiShow = false;
                if (!this.disGlobal) {

                    this.$off("clickCancel");
                    this.$off("clickEnter");
                    this.$off("opentypeHandle");
                }
            },
            fnButtonCancel() {
                const self = this;
                self.$emit("clickCancel", () => {
                    self.clear();
                });
                this.autoHide && this.clear();
            },
            fnButtonEnter() {
                const self = this;
                this.$emit("clickEnter", () => {
                    self.clear();
                });
                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: true,
                type: Boolean,
            },
            propOptions: {
                type: Object
            },
            propTopic: "",
            propCancelColor: "",
            propEnterColor: "",

            loadingCancel: Boolean,
            loadingEnter: Boolean,
            propType: {
                default: "dialog",
            },
            propTitle: String,
            propDesc: String,
            propUishow: {
                default: false,
                type: Boolean
            },
            propTipsCancel: {
                default: "取消"
            },
            propTipsEnter: {
                default: "确定"
            },
        },
        watch: {
            propDesc(){
                this.desc = this.propDesc;
            },
            uiShow() {
                if (this.uiShow) {
                    this.showBox();
                }
                this.$emit("update:propUishow", this.uiShow);
            },
            propUishow() {
                this.uiShow = this.propUishow;
                console.log(this.propOptions)

            }
        },
        created() {
            if (Vue.prototype.$dialogHandle && !this.disGlobal) {
                Vue.prototype.$dialogHandle = this;
            } else {
                setOptions.call(this, this.propOptions || {});
            }
        },

        switchRoot(item) {
            if (item && item.$options && item.$options.name == "yDialog") {
                Vue.prototype.$dialogHandle = item;
            }
        },
        clear(disThrowError) {
            if (!__check(disThrowError)) return;
            let self = Vue.prototype.$dialogHandle;
            self.clear();
        },
        confirm(text, options) {
            return new Promise((resolve, reject) => {
                if (!__check()) return reject();
                let self = Vue.prototype.$dialogHandle;
                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.$dialogHandle;
                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_v2_mainWrap {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: $mask_color;
    }

    .y_dialog_v2_main {
        width: 306px;
        overflow: hidden;
        box-sizing: border-box;
        background: $dialog_background;
        border-radius: $dialog_border_radius;
        align-self: center;
        padding: 29px;
    }

    .y_dialog_v2_topic_window {
        .y_dialog_v2_main {
            padding: 35px 28px 65px 28px;
        }

        .y_dialog_v2_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_v2_topic_pet{
        .y_dialog_v2_main{
            width: 270px;
            padding: 20px 29px 25px 29px;
        }
        .y_dialog_v2_title{
            font-size: $font_size_t2;
            font-weight: bold;
            color:#000;
            line-height: 1;
            margin-bottom: 15px;
        }
        .y_dialog_v2_cotnent{
            line-height: 1.5;
        }
        .y_dialog_v2_desc{
            padding: 0;
            text-align: center;
            min-height: 44px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .y_dialog_v2_tools{
            margin-top: 16px;
        }
    }

    /**
        微信主题
     */
    .y_dialog_v2_topic_modal {
        .y_dialog_v2_main {
            padding: 0;
        }

        .y_dialog_v2_cotnent {
            max-height: 60vh;
            overflow: auto;
        }

        .y_dialog_v2_title {
            padding-top: 24px;
        }

        .y_dialog_v2_tools {
            display: flex;
            height: 50px;
            position: relative;
            margin-top: 0;

            &:before {
                content: "";
                position: absolute;
                top: 0;
                height: 1px;
                border-top: 1px solid $dialog_border_color;
                width: 100%;
                //transform: scaleY(.5);
            }

        }

        .y_dialog_v2_cancelButton {
            color: $font_color_contentMain
        }

        .y_dialog_v2_enterButton {
            color: $color_topic_main;
        }

        .y_dialog_v2_tools {

            .y_dialog_v2_button {
                display: inline-block;
                flex: 1;
                background: none;
                //padding: 0 10px;
                margin: 0;
                border: none;
                margin-left: 0;
                //line-height: 42px;
                line-height: 1;
                padding: 0;
                font-size: $font_size_t3;
                box-sizing: border-box;
                position: relative;
                text-align: center;

                &:after {
                    content: " ";
                    border: none;
                    background: #000;
                    position: absolute;
                    left: 0;
                    right: 0;
                    opacity: 0;
                    display: block;
                    bottom: 0;
                    top: 0;
                    transition: all .15s;
                }

                &:active, &.hover {
                    &:after {
                        opacity: .1;
                    }
                }

                &:last-child {
                    &:before {
                        content: "";
                        position: absolute;
                        width: 1px;
                        border-left: 1px solid $dialog_border_color;
                        //transform: scaleX(.5);
                        height: 100%;
                        left: 0;
                        top: 0;
                    }
                }
            }
        }
    }


    .y_dialog_v2_enter, .y_dialog_v2_leave_to {
        opacity: 0;
    }

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

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

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

    }

    .y_dialog_v2_cotnent {
        font-size: $font_size_t3;
        color: $dialog_text_color;

        text-align: left;
    }

    .y_dialog_v2_desc {
        padding: 12px 24px 24px 24px;
    }

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

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

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

    }


</style>
