<template>
<div class="modal-mask" >
  <div class="modal-bg" @click="$emit('close')"></div>
  <div class="modal-wrapper">
    <div class="modal-container" :style="{width:modalWidth}">
      <div class="modal-header">
        <slot name="header">
        </slot>
      </div>
      <div class="modal-body" id="modalBody">
        <i class="iconfont icon-shanchu iconClose" @click="$emit('close')"></i>
        <slot name="body"></slot>
      </div>

      <div class="modal-footer">
        <slot name="footer">
        </slot>
      </div>
    </div>
  </div>
</div>
</template>
<script>
    export default {
      name: "modal",
      data : function () {
        return {
          showModal: false
        }
      },
      props : ['modal_heading', 'modalWidth'],
      methods: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
  .modal-mask {
    position: fixed;
    z-index: 1998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: table;
    transition: opacity .3s ease;
  }
  .modal-bg{
    position absolute
    width 100%
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }
  .modal-wrapper {
    position absolute

    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
    display: table-cell;
    vertical-align: middle;
  }

  .modal-container {
    width: 100%;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
  }
  .wx-modal {
    .modal-container{
      height 100%
    }
    .modal-body{
      position absolute
      width 100%
      height 100%
      top 0
      left 0
      overflow-y auto
      -webkit-overflow-scrolling touch
    }
    .modal-wrapper{
      width 100%
      height: 100%;
    }
  }
  .modal-header h3 {
    margin-top: 0;
    color: #42b983;
  }
  .modal-default-button {
    float: right;
  }
  .modal-enter {
    opacity: 0;
  }
  .modal-leave-active {
    opacity: 0;
  }
  .modal-enter .modal-container,
  .modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }
  .modal-body{
    position relative
    height 100%
  }
  .iconClose{
    position absolute
    font-size 22px
    right -30px
    top -30px
    color #fff
    cursor pointer
  }
</style>
