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

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

    async function handleStatus() {
      const { config, row, isRequestArray, statusRowProp } = props;
      const { status: rawStatus, id } = row;

      const status = String(rawStatus) === "1" ? "0" : "1";
      const { code, message } = await config.api({
        ...(props.prop
          ? { [props.prop]: row.id }
          : { id: isRequestArray ? [id] : id }),
        ...(statusRowProp ? statusRowProp(row) : {}),
        status
      });

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

    return () => (
      <el-popconfirm
        title={String(props.row.status) === "1" ? "改为禁用？" : "改为启用？"}
        onConfirm={handleStatus}
        v-slots={{
          reference: () => (
            <el-button
              class="reset-margin"
              link
              size="small"
              type="primary"
              icon={useRenderIcon(
                String(props.row.status) === "1"
                  ? "close-circle-line"
                  : "checkbox-circle-line"
              )}
            />
          )
        }}
      />
    );
  }
});

export default ActionStatus;
