<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>
export default {
  name: 'KoleConfirmModal',
  props: {
    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 }
  },
  data: function () { return { dontAskChecked: false }; }
};
</script>

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