<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 setup>
const props = defineProps({
  visible: { type: Boolean, default: false },
  type: { type: String, default: 'info' },
  title: { type: String, default: '提示' },
  content: { type: String, default: '' },
  okText: { type: String, default: '知道了' }
});
const emit = defineEmits(['ok']);
const iconMap = { success: '✓', error: '✕', warning: '!', info: 'i' };
</script>

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