<template>
  <transition enter-active-class="animated pulse" leave-active-class="animated zoomOut">
    <div class="weui-mask" v-show="visible" @click.stop.self="close">
    <div class="weui-dialog">
      <div class="weui-dialog__hd"><strong class="weui-dialog__title">{{ title }}</strong></div>
      <div class="weui-dialog__bd" v-html="description">
        <slot name='body'></slot>
      </div>
      <div class="weui-dialog__ft" v-if="!description">
        <slot name='footer'></slot>
      </div>
      <div class="weui-dialog__cs" @click.stop="close">
         <i class="ac-icon-roundclose"></i>
      </div>
    </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'AcModal',
  props: {
    title: String,
    description: String,
    visible: Boolean
  },
  methods: {
    close () {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
  .weui-dialog {
    width: 70%;
    top: 15rem;
    overflow: visible;
    padding-bottom: 1rem;
    border-radius: .5rem;
    outline: none;

    &__hd {
      padding: .6rem;
      strong {
        font-size: 1.066667rem;
      }
    }
    &__bd {
      text-align: left;
      max-height: 16rem;
      overflow: hidden;
      overflow-y: auto;
      font-size: .875rem;
      font-weight: 300;
      margin-bottom: .6rem;
      font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    }

    &__cs {
      position: absolute;
      left: 50%;
      bottom: -5.5rem;
      font-size: 2.6rem;
      color: #fff;
      transform: translate(-50%, 0);
    }
  }
</style>
