<!--弹框组件(alert/confirm)-->

<!--用例-->
<!--
    title: '确定删除文件？',                 //标题
    desc: '若进行删除，文件不可恢复',         //详情
    type: "confirm",                        //弹窗类型
    confirmTxt: "确定",
    cancelTxt: "取消",
    confirm: function () {},
    cancel: function () {},
-->

<template>
    <div v-if="showAlert" ref="alertComponent" class="vue_common alert-component">
        <!-- alert/confirm弹框 -->
        <div v-if="item.type!='toast' && item.type!=='toast_fat' && item.type!=='toast_bottom'" class="box-mb" @click="closeAlert"></div>
        <div v-if="item.type!='toast' && item.type!=='toast_fat' && item.type!=='toast_bottom'" class="alert-box">
            <div class="box-title">
                {{ item.title || '提示' }}
            </div>
            <div class="box-desc" v-html="item.desc || '默认提示'"></div>
            <div v-if="!item.type||item.type=='alert'" class="box-btn-item clearfix">
                <button class="box-btn btn-confirm pressGreyBg" @click="confirmClick">{{ item.confirmTxt || '确定'}}</button>
            </div>
            <div v-if="item.type=='confirm'" class="box-btn-item clearfix confirm-btn-item">
                <button class="box-btn btn-cancel pressGreyBg" @click="cancelClick">{{ item.cancelTxt || '取消'}}</button>
                <button class="box-btn btn-confirm pressGreyBg" @click="confirmClick">{{ item.confirmTxt || '确定'}}</button>
            </div>
        </div>
        <!-- toast弹框 -->
        <div v-if="item.type=='toast'" v-show="toastShow" class="toast-box" :class="toast_box">
            <img v-if="item.toast_type==1" class="toast-success-icon" src='./images/toast_success.png'>
            <div>
                {{ item.desc }}
            </div>
        </div>
        <!-- toast弹框样式2 边框大一点的 -->
        <div v-if="item.type==='toast_fat'" v-show="toastShow" class="toast-box-fat" :class="toast_box">
            <div>
                {{ item.desc }}
            </div>
        </div>
        <!-- toast弹框样式3 靠底部一点 -->
        <div v-if="item.type==='toast_bottom'" v-show="toastShow" class="toast-box toast-box-bottom" :class="toast_box">
            <div>
                {{ item.desc }}
            </div>
        </div>
    </div>
</template>

<script>
    import EventBus from '~publicAsset/libs/eventbus.js'
    export default {
        name: 'alertBox',
        data: function(){
            return {
                item: {},
                showAlert: false,
                toastShow: false,
            };
        },
        created: function(){
            let $this = this;
            EventBus.$on('vueAlert', function (item) {
                $this.item = item;
                $this.showAlert = true;
                console.log('item.type --- ', item.type);
                if (item.type === 'toast' || item.type === 'toast_fat' || item.type === 'toast_bottom') {
                    $this.toastShow = true;
                    setTimeout(() => {
                        $this.toastShow = false;
                        $this.closeAlert();
                    }, $this.item.time || 1500);
                }
            });
        },
        mounted: function(){
            document.body.addEventListener('touchstart', function(){
                // do nothing
            });
        },
        computed: {
            toast_box: function() {
                if (this.item.type != 'toast' && this.item.type != 'toast_fat' && this.item.type != 'toast_bottom') {
                    return '';
                }
                switch (this.item.toast_type) {
                    case 1: // 成功图标提示
                        return 'toast-box_success';
                    default: // 只有文本
                        return 'toast-box_text';
                }
            }
        },
        methods: {
            confirmClick: function(){

                if (this.item.confirm && typeof(this.item.confirm) == 'function'){
                    this.item.confirm();
                }
                this.showAlert = false;
            },
            cancelClick: function(){
                if (this.item.cancel && typeof(this.item.cancel) == 'function'){
                    this.item.cancel();
                }
                this.showAlert = false;
            },
            // 蒙版点击事件
            closeAlert: function(){
                if (!this.item.type || this.item.type=='alert' || this.item.type=='toast') { // 没传或为alert/toast，执行确定事件
                    if(this.item.strict !== true){
                        typeof(this.item.confirm) == 'function' && this.confirmClick();
                    }
                } else if (this.item.type=='confirm') { // 为confirm则执行取消事件
//                    typeof(this.item.cancel) == 'function' && this.cancel();
                }
                this.showAlert = false;
            },

        },

    };
</script>

<style scoped>
    .alert-component{
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        overflow: hidden;
        background: transparent;
        z-index: 999999;
    }
    /*蒙版*/
    .box-mb{
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: .5;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 9998;
    }
    /*提示盒子*/
    .alert-box{
        width: 5.6rem;
        border-radius: .08rem;
        overflow: hidden;
        padding-top: .5rem;
        margin: auto;
        top: 50%;
        transform: translate(0, -50%);
        background-color: #fff;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 9999;
    }
    /*盒子标题*/
    .box-title{
        text-align: center;
        font-size: .36rem;
        color: #000000;
        margin-bottom: .18rem;
    }
    /*提示描述*/
    .box-desc{
        padding: 0.52rem;
        padding-bottom: .6rem;
        color: #888888;
        font-size: .3rem;
        line-height: 1.5;
        text-align: center;
        overflow: hidden;
    }

    /*底部按钮块*/
    .box-btn-item{
        border-top: 1px solid #e5e5e5;
        height: 1rem;
    }
    /*底部按钮通用样式*/
    .box-btn{
        height: 100%;
        font-size: .36rem;
        background-color: #fff;
        vertical-align: top;
        cursor:pointer;
        outline: none;
    }
    .btn-confirm{
        color: #02bb00;
        width: 100%;
    }
    .btn-cancel{
        color: #888888;
        border-right: 1px solid #e5e5e5;
    }
    .confirm-btn-item button{
        width: 50%;
        float: left;
    }
    /*灰色的点击态*/
    .pressGreyBg:active{
        background-color: rgba(125, 125, 125, 0.2) ;
    }

    .toast-box{
        font-size: .26rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        background: rgba(0,0,0,.7);
        color: #fff;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: 200;
        transition: 200;
        z-index: 1000000;
        border-radius: .1rem;
        white-space: nowrap;
        max-width: 6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        -moz-user-select: none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        user-select: none;
    }
    .toast-box-bottom{
        top: 65%;
    }

    .toast-box-fat {
        font-size: .28rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        background: rgba(0,0,0,.7);
        color: #fff;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        -webkit-transition: 200;
        transition: 200;
        z-index: 1000000;
        border-radius: 0.08rem;
        width: 5.3rem;
        text-align: center;
        padding: 0.4rem 0.22rem;
    }

    .toast-box_text{
        padding: .12rem .3rem;
    }

    .toast-box_success{
        padding-top: .6rem;
        height: 2.4rem;
        width: 2.4rem;
        box-sizing: border-box;
    }

    .toast-success-icon{
        width: .99rem;
        height: .72rem;
        margin-bottom: .3rem;
    }

</style>
