<template>
  <div v-show="visible" class="ta--dialog__wrapper">
    <transition
      enter-active-class="animated fadeIn"
      leave-active-class="animated fadeOutUp"
    >
      <div class="ta-dialog__main">
        <h3 v-if="title" class="ta-dialog__header">
          {{ title }}
        </h3>
        <div class="ta-dialog__body">
          <slot></slot>
        </div>
        <div class="ta-dialog__footer">
          <button @click="confirm">确定</button>
          <button @click="cancel">
            取消
          </button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Dialog',
  props: {
    title: {
      type: String,
      default: '我是哈哈哈'
    }
  },
  data () {
    return {
      visible: true
    }
  },
  methods: {
    confirm () {
      this.$emit('confirm')
    },
    cancel () {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.ta--dialog__wrapper{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  .ta-dialog__main {
    position: relative;
    width: 50%;
    min-height: 400px;
    background: #fff;
    border-radius: 12px;
  }
  .ta-dialog__header {
    margin-top: 20px;
    text-align: center;
  }
  .ta-dialog__footer {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }
}
</style>
