<template>
  <div class="confirm-button">
    <a-button :type="type"
              :disabled="disabled"
              @click.stop="onConfirm">{{label}}</a-button>
  </div>
</template>

<script lang="ts">
import { createVNode, defineComponent, inject } from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";

import { ModalConfirmKey } from "@/plugins/injectionKey";

const ConfirmButton = defineComponent({
  props: {
    label: String,
    type: {
      type: String,
      default: "primary",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    confirmTitle: {
      type: String,
      default: "请确认您的操作",
    },
    confirmContent: {
      type: String,
      default: "确定删除该内容吗？",
    },
  },
  setup(props, { emit }) {
    const confirm = inject(ModalConfirmKey)!;

    const onConfirm = () => {
      confirm({
        icon: createVNode(ExclamationCircleOutlined),
        title: props.confirmTitle,
        content: props.confirmContent,
        okType: "danger",
        onOk: () => {
          emit("click");
        },
      });
    };

    return { onConfirm };
  },
});

export default ConfirmButton;
</script>