<template>
  <div class="kole-modal-mask" v-if="visible" @click.self="emit('cancel')">
    <div class="kole-confirm" :class="confirmType === 'danger' ? 'is-danger' : 'is-primary'">
      <div class="kole-confirm-head">
        <span class="kole-confirm-icon">!</span>
        <div class="kole-confirm-title">{{ title }}</div>
      </div>
      <div class="kole-confirm-content">{{ content }}</div>
      <label v-if="dontAsk" class="kole-confirm-extra">
        <input type="checkbox" v-model="dontAskChecked" /> 不再提示
      </label>
      <div class="kole-confirm-footer">
        <button class="kole-confirm-btn" :disabled="loading" @click="emit('cancel')">{{ cancelText }}</button>
        <button class="kole-confirm-btn" :class="confirmType === 'danger' ? 'danger' : 'primary'"
                :disabled="loading" @click="emit('confirm', dontAskChecked)">
          {{ loading ? '处理中…' : confirmText }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const props = defineProps({
  visible: { type: Boolean, default: false },
  title: { type: String, default: '确认操作' },
  content: { type: String, default: '' },
  confirmType: { type: String, default: 'danger' },
  confirmText: { type: String, default: '确定' },
  cancelText: { type: String, default: '取消' },
  loading: { type: Boolean, default: false },
  dontAsk: { type: Boolean, default: false }
});
const emit = defineEmits(['cancel', 'confirm']);
const dontAskChecked = ref(false);
</script>

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