<template>
  <div class="kole-modal-mask" v-if="visible" @click.self="$emit('ok')">
    <div class="kole-alert" :class="'is-' + type">
      <div class="kole-alert-head">
        <span class="kole-alert-icon">{{ iconMap[type] || 'i' }}</span>
        <div class="kole-alert-title">{{ title }}</div>
      </div>
      <div class="kole-alert-content">{{ content }}</div>
      <div class="kole-alert-footer">
        <button class="kole-alert-btn" @click="$emit('ok')">{{ okText }}</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'KoleAlertModal',
  props: {
    visible: { type: Boolean, default: false },
    type: { type: String, default: 'info' },
    title: { type: String, default: '提示' },
    content: { type: String, default: '' },
    okText: { type: String, default: '知道了' }
  },
  data: function () {
    return { iconMap: { success: '✓', error: '✕', warning: '!', info: 'i' } };
  }
};
</script>

<style src="./AlertModal.css"></style>
