import { defineComponent } from "vue";
import { actionProps } from "../types";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { useResponseHandle } from "/@/hooks/core/useAsync";

const ActionDelete = defineComponent({
  name: "ActionDelete",
  props: {
    ...actionProps,
    row: {
      type: Object as PropType<any>,
      required: true
    },
    prop: {
      type: String
    },
    delTooltip: {
      type: String
    }
  },
  emits: ["reload"],
  setup(props, { emit }) {
    const responseHandle = useResponseHandle();

    async function handleDelete() {
      const { config, row, prop } = props;
      const { code, message } = await config.api({
        ...(prop ? { [prop]: row.id } : { id: row.id })
      });

      responseHandle({
        code,
        message,
        handler: () => emit("reload")
      });
    }

    return () => (
      <el-popconfirm
        title={props.delTooltip || "是否确认删除"}
        placement="top"
        onConfirm={handleDelete}
        v-slots={{
          reference: () => (
            <el-button
              class="reset-margin"
              link
              size="small"
              type="primary"
              icon={useRenderIcon("delete")}
            />
          )
        }}
      />
    );
  }
});

export default ActionDelete;
