<template>
    <div class="modal-container" v-if='show' @click='closeModal'>
        <div class='ui-modal'>
            <div class='modal-message'>{{modalText}}</div>
            <div class='modal-btns'>
                <div  v-for="(btnItem, index) in modalBtn" :class="'modal-btn-item modal-' + btnItem.type + '-btn'" @click='handleModalEvent(btnItem.type, btnItem.event)'>{{btnItem.text}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
       name:'mu-modal',
       props: {
           modalText: String,
           showModal: Boolean,
           modalBtn: {
               type: Array,
               default: function(){
                return [{
                    text: '取消'
                    ,type: 'cancle'
                    ,event: 'closePanel'
                }, {
                    text: '确定'
                    ,type: 'submit'
                    ,event: 'closePanel'
                }]
               }
           }
       },
       data() {
           return {
              show: this.showModal
           }
       },

       methods: {
     	  handleModalEvent: function(type, event){

     		  this.$emit(event);
     	  },
          closeModal: function() {
             this.showModal = false;
          }

       }
    }
</script>

<style lang='less'>
    .modal-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        background: rgba(0, 0, 0, .1);
    }
    .ui-modal {
        width: 270px;
        z-index: 2;
        position: absolute;
        left: 50%;
        top: 50%;
        border-radius: 3px;
        -webkit-transform: translate(-50%,-50%);
        transform: translate(-50%,-50%);
        padding: 16px 16px 0;
        background: #fff;
        box-sizing: border-box;
    }
    .modal-message {
        color: #3A4247;
        font-size: 18px;
        text-align: center;
        font-weight: 500;
    }
    .modal-btns {
        display: flex;
        margin-top: 35px;
        margin-bottom: 18px;
    }
    .modal-btn-item, .modal-btn-item {
        flex: 1;
        width: 50%;
        color: #1D80C7;
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        display: inline-block;
    }
</style>
