<template>
  <div>
    <hive-button @click="onClick('success')">
      success Modal
    </hive-button>
    <hive-button @click="onClick('error')">
      error Modal
    </hive-button>
    <hive-button @click="onClick('warning')">
      warning Modal
    </hive-button>
    <hive-button @click="onClick('info')">
      info Modal
    </hive-button>
    <hive-modal
      v-model="showModal"
      @confirm="onOkClick"
      @open="onOpen"
      @opened="onOpened"
      @close="onClose"
      @closed="onClosed"
      :type="type"
      :title="title"
    >
      <div>
        <p>这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容，这里是 Modal 内容</p>
      </div>
    </hive-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
      type: 'success',
      title: 'success标题'
    };
  },

  methods: {
    onClick(e) {
      this.showModal = true;
      this.type = e;
      this.title = e + '   标题';
    },
    onOkClick() {
      console.log('点击了确认');
    },
    onOpen() {
      console.log('显示modal');
    },
    onOpened() {
      console.log('显示modal动画结束');
    },
    onClose() {
      console.log('关闭modal');
    },
    onClosed() {
      console.log('关闭modal动画结束');
    }
  }
};
</script>
