<template>
  <div>
    <Modal v-model:open="data.isShowModal" title="删除确认" width="30%" @cancel="_close" @ok="handleConfirm">
      <div>
        <h4>{{ data.title }}</h4>
      </div>
      <div v-if="data.deleteText" style="margin-top: 10px">
        <div>
          <span>请输入红色字体内容以确认删除数据：</span>
          <span style="font-size: 12px;color: red">{{ data.deleteText }}</span>
        </div>
        <div style="margin-top: 20px">
          <Input v-model:value="data.inputText" allowClear :placeholder="data.deleteText"/>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script setup lang="ts">
import {reactive} from "vue";
import {Modal, Input} from 'ant-design-vue';

const data = reactive({
  isShowModal: false,
  inputText: '',
  title: '确认删除?',
  deleteText: null,
  resolve: null,
  reject: null,
})

function handleConfirm() {
  //值判断
  if (data.deleteText && data.deleteText != data.inputText) {
    return;
  }
  //回调
  data.resolve ? data.resolve() : '';
  _close();
}

function _open(title, deleteText) {
  data.title = title || data.title;
  data.deleteText = deleteText;
  data.isShowModal = true;
  return new Promise((resolve, reject) => {
    data.resolve = resolve;
    data.reject = reject;
  });
}

function _close() {
  data.inputText = '';
  data.isShowModal = false;
  data.reject ? data.reject() : '';
}

defineExpose({_open, _close});
</script>

<style scoped>

</style>
