<template>
    <div :class="{y_toast:1,y_toast_middle:isLoading || isSuccess || isError,y_toast_text:isText,y_toast_loading:isLoading,y_toast_bottom:isBottom}">
        <y-overload v-if="isLoading && !uiTransparentBg" :show="uiShow" :zIndex="mapZIndex"
                    :background="disableLoadingBg!==undefined?'none':''"></y-overload>
        <div v-else-if="isLoading && uiTransparentBg" :style="'z-index:'+mapZIndex+';'" class="y_toast_transparentBg"></div>
        <y-transition :name="boxAnimateStr"
                      :show.sync="uiShow"
                      :custom-class="'y_toast_box' + (uiBorderRadiusBig ? ' y_toast_box_transparent' : '')"
                      :custom-style="styleStr"
                      show-timeout="500"
                      hide-timeout="500">
            <span :class="{
                    y_toast_icon:1,
                    y_toast_icon_error:isError,
                    y_toast_icon_success:isSuccess,
                    y_toast_icon_loading:isLoading}" v-if="isSuccess || isError"></span>
            <div v-if="isLoading && loadingType == 'normal'" class="y_toast_loading">
                <y-loading color="white"></y-loading>
            </div>
            <div v-if="isLoading && loadingType == 'car'" class="y_toast_loading_car">
                <y-loading topic="car" size="fill"></y-loading>
            </div>
            <div v-if="isLoading && loadingType == 'pet'" class="y_toast_loading_pet">
                <y-loading topic="pet"></y-loading>
            </div>
            <div :class="{y_toast_textBox:1}" v-if="mapText">{{mapText}}</div>
        </y-transition>
    </div>
</template>

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


    export default {
        name: "yToast",
        components: {
            yOverload,
            yLoading,
            yTransition
        },
        computed: {
            isDisableClickOver() {
                return this.disableClickOverload !== undefined;
            },
            isText() {
                return this.mapType == "text";
            },
            isLoading() {
                return this.mapType == "loading";
            },
            isError() {
                return this.mapType == "error";
            },
            isSuccess() {
                return this.mapType == "success";
            },
            styleStr() {
                return (this.background ? "background:" + this.background + ";" : "") + (this.mapZIndex ? "z-index:" + this.plus(this.mapZIndex, 1) + ";" : "");
            },
            boxAnimateStr() {
                return (this.isText || this.isSuccess || this.isError || this.isLoading) ? (this.uiTransparentBg ? 'y_toastNoBg' : "y_toast") : "";
            },
        },
        data() {
            return {
                ast:false,
                isBottom:false,
                loadingType:"normal",
                mapDuration: this.duration,
                mapText: this.text,
                mapType: this.type,
                mapZIndex: this.zIndex,
                uiShow: this.show,
                uiTransparentBg:false,
                uiBorderRadiusBig:false,
            }
        },
        install(Vue, options) {
            options = options || {};
            Vue.prototype.$toast = {};
            Vue.component(this.name, this);
            if (options.getZIndex && options.getZIndex.call) {
                Vue.prototype.$toastGetIndex = options.getZIndex;
            }
        },
        methods: {
            plus: (a, b) => a + b,
            showBox() {
                const self = this;
                if (Vue.prototype.$toastGetIndex && Vue.prototype.$toastGetIndex.call) {
                    const zIndex = Vue.prototype.$toastGetIndex();
                    if (!isNaN(zIndex)) {
                        self.mapZIndex = Math.round(zIndex);
                    }
                }
                self.ast && clearTimeout(self.ast);
                self.ast = setTimeout(() => {
                    if (self.isText || self.isError || self.isSuccess) {
                        self.uiShow = false;
                    }
                }, self.mapDuration)
            }
        },
        props: {
            disableLoadingBg: "",
            disableClickOverload: "",
            duration: {
                default: 2000,
                type: Number,
            },
            show: "",
            text: "",
            type: {
                default: "text"
            },
            zIndex: {
                default: 100
            },
        },
        watch: {
            show() {
                this.uiShow = this.show;
            },
            uiShow() {
                this.$emit("update:show", this.uiShow);
                if (this.uiShow) {
                    this.showBox();
                }
            },
            type(){

            },
            mapDuration() {
                this.$emit("update:duration", this.mapDuration);
            },
            duration() {
                this.mapDuration = this.duration;
            }
        },
        created() {
            //if (Vue.prototype.$toast) {
            this.uiShow = false;
            Vue.prototype.$toast = this;
            // }
        },
        switchRoot(item){
            if(item && item.$options && item.$options.name == "yToast"){
                Vue.prototype.$toast = item;
            }
        },
        clear(){
            if (!__check()) return;
            let self = Vue.prototype.$toast;
            self.uiShow = false;
            self.mapType = "";
        },
        error(text, options) {
            if (!__check()) return;
            let self = Vue.prototype.$toast;
            options = setOptions.call(self, options);
            self.$data.mapText = text || "错误！";
            self.$data.mapType = "error";
            self.$data.uiShow = true;
        },
        loading(text,options) {
            if (!__check()) return;
            let self = Vue.prototype.$toast;
            options = setOptions.call(self, options);
            if(options.type=="car"){
                self.$data.loadingType = "car";
            }
            if(options.type=="pet"){
                self.$data.loadingType = "pet";
            }
            self.$data.mapText = text || "";
            self.$data.mapType = "loading";
            self.$data.uiShow = true;
        },

        success(text, options) {
            if (!__check()) return;
            let self = Vue.prototype.$toast;
            options = setOptions.call(self, options);
            self.$data.mapText = text || "成功！";
            self.$data.mapType = "success";
            self.$data.uiShow = true;
        },
        text(text, options) {
            if (!__check() || !text) return;
            let self = Vue.prototype.$toast;
            options = setOptions.call(self, options);
            self.$data.mapText = text;
            self.$data.mapType = "text";
            self.$data.uiShow = true;
        },
    }

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

    function setOptions(options) {
        options = options || {};
        if (options.duration) {
            this.$data.mapDuration = options.duration;
        }
        else{
            this.$data.mapDuration = 2000;
        }
        if (options.zIndex) {
            this.$data.mapZIndex = options.zIndex;
        }
        if(options.isBottom){
            this.$data.isBottom = true;
        }
        else{
            this.$data.isBottom = false;
        }
        this.$data.uiTransparentBg = !!options.uiTransparentBg;
        this.$data.uiBorderRadiusBig = !!options.uiBorderRadiusBig;
        return options;
    }
</script>

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

    @keyframes y_toast_rotate {
        from {
            transform:rotate(0deg);
        }
        to   {
            transform:rotate(360deg);
        }
    }

    .y_toast {
        position: relative;
    }

    .y_toast_enter, .y_toast_leave_to {
        opacity: 0;
    }

    .y_toast_enter_active, .y_toast_leave_active {
        transition: opacity .3s ease .1s;
    }

    .y_toastNoBg_enter, .y_toastNoBg_leave_to {
        opacity: 0;
    }

    .y_toastNoBg_enter_active, .y_toastNoBg_leave_active {
        transition: opacity .3s ease 0s;
    }
    
    .y_toast_transparentBg{
        position: fixed;
        left:0;
        top:0;
        right: 0;
        bottom:0;
        background: rgba(255,255,255,0);
    }

    .y_toast_box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-sizing: content-box;
        box-sizing: content-box;
        width: fit-content;
        max-width: 70%;
        min-height: 100px;
        text-align: center;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%, -50%, 0);
        border-radius: $toast_border_radius;
        white-space: pre-wrap;
        word-break: break-all;
    }


    .y_toast_text {
        display: -webkit-box;
        color: #fff;
        font-size: $font_size_t4;
        text-align: center;
        line-height: 1.7;

        &.y_toast_bottom{
            .y_toast_box{
                top:80%
            }
        }


        .y_toast_box {
            min-width: 96px;
            min-height: 20px;
            padding: 8px 12px;
            background: $toast_bgColor_text;
            text-align: left;
        }
    }

    .y_toast_middle {
        .y_toast_box {
            background: $toast_bgColor_middle;
            padding: 19px;
            min-width: 100px;
            max-width: 70%;
            height: 100px;
            overflow: hidden;
            box-sizing: border-box;
        }

        &.y_toast_loading{
            .y_toast_box{
                background: $toast_loading_bgColor_middle;
                &.y_toast_box_transparent{
                    background: transparent;
                }
            }
        }

        .y_toast_textBox {
            width: 100%;
            /*white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;*/
            color: #fff;
            margin-top: 12px;
            font-size: $font_size_t5;
        }

        .y_toast_icon {
            display: inline-block;
            height: 35px;
            min-width: 48px;
            font-family: yesaway_ui;
            font-size: 32px;
            color:#fff;
        }

        .y_toast_icon_success {
            &:before{
                content:'\e600';
            }
        }
        .y_toast_icon_error {
            &:before{
                content:'\e601';
            }
        }
        .y_toast_icon_loading {
            min-width:32px;
            height: 32px;
            line-height: 32px;
            animation: y_toast_rotate 3s linear infinite;
            &:before{
                content:'\e602';
            }
        }
        .y_toast_loading{
            width: 32px;
            height: 32px;
            position: relative;
        }
        .y_toast_loading_car{
            width: 80px;
            height: 80px;
            position: relative;
        }
        .y_toast_loading_pet{
            width: 80px;
            height: 80px;
            transform: scale(.8);
            position: relative;
        }
    }
</style>
