<!--带文字验证的confirm弹框组件-->

<!--用例-->
<!--
    title: '确定删除文件？',                 //标题
    desc: '若进行删除，文件不可恢复',         //详情
    inputTxt: '结束直播',                           // 需要验证的文字
    confirmTxt: "确定",
    cancelTxt: "取消",
    confirm: function () {},
    cancel: function () {},
-->

<template>
    <div v-if="showAlert" ref="alertComponent" class="vue_common alert-component">
        <div class="box-mb" @click="closeAlert"></div>
        <div class="alert-box">
            <div class="box-title">
                {{ item.title || '提示' }}
            </div>
            <div class="box-desc" v-html="item.desc || '默认提示'"></div>
            <div class="box-validate">
                <input type="text" @blur="fixedIOS12" :style="{'border': `0.01rem solid ${!inputValidate ? '#B2B2B2' : 'red'}`}" :placeholder="item.need_validate?`请输入“${item.inputTxt}”来确认此操作`:item.inputTxt" v-model="inputTxt">
                <p v-if="inputValidate && item.need_validate" class="validate-wran">{{ `请输入正确验证语“${item.inputTxt}”` }}</p>
            </div>
            <div 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>
    </div>
</template>

<script>
    import EventBus from '../../libs/eventbus';

    export default{
        name: 'confirmBox',
        data: function(){
            return {
                item: {},
                showAlert: false,
                inputTxt: '',
                inputValidate: false
            };
        },
        created: function(){
            EventBus.$on('vueConfirm', (item) => {
                this.item = item;
                this.showAlert = true;
                this.inputTxt = '';
                this.inputValidate = false;
            });
        },
        methods: {
            confirmClick: function(){
                if (this.item.confirm && typeof(this.item.confirm) == 'function'){
                    if(this.item.need_validate && this.inputTxt === this.item.inputTxt) {
                        this.item.confirm();
                        this.showAlert = false;
                        this.inputTxt = '';
                        this.inputValidate = false;
                    } else if(!this.item.need_validate){
                        this.item.confirm(this.inputTxt);
                        this.showAlert = false;
                        this.inputTxt = '';
                        this.inputValidate = false;
                    } else {
                        this.inputValidate = true;
                    }
                }
            },
            cancelClick: function(){
                if (this.item.cancel && typeof(this.item.cancel) == 'function'){
                    this.item.cancel();
                }
                this.showAlert = false;
            },
            // 蒙版点击事件
            closeAlert: function(){
                typeof(this.item.cancel) == 'function' && this.cancelClick();
                this.showAlert = false;
            },
            // 修复ios12微信fixed布局bug
            fixedIOS12: function() {
                if(~navigator.userAgent.indexOf('iPhone')) {
                    window.scrollTo(0, 0);
                }
            }
        },

    };
</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;
    }

    /*提示描述*/
    .box-desc{
        padding: .4rem 0.52rem;
        color: #888888;
        font-size: .3rem;
        line-height: 1.5;
        text-align: center;
        overflow: hidden;
    }

    /* 验证语验证 */
    .box-validate {
        width: 100%;
        padding: 0 .31rem .4rem;
        color: #B2B2B2;
        text-align: center;
        overflow: hidden;
    }

    .box-validate input {
        width: 4.96rem;
        height: .72rem;
        line-height: .72rem;
        padding: 0 .2rem;
        border-radius: .05rem;
        font-size: .3rem;
        float: left;
        outline: none;
        -webkit-appearance: none;
    }

    .box-validate .validate-wran {
        color: red;
        font-size: .26rem;
        float: left;
        line-height: .42rem;
    }

    /*底部按钮块*/
    .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) ;
    }

</style>
