import { defineComponent } from "vue";
import PureTable from "@pureadmin/table";
import { pageContentProps } from "./types";
import { TableProBar } from "../../ReTable";
import { createActionProps, createOperation } from "./utils/create-operation";
import { useRequeset } from "./hooks/use-request";
import { Operation } from "./actions";

const PageConent = defineComponent({
  name: "PageContent",
  props: pageContentProps,
  emits: [
    "createBtnClick",
    "updateBtnClick",
    "previewBtnClick",
    "statusBtnClick",
    "selectionChange"
  ],
  setup(props, { expose, emit, slots }) {
    //根据传入的api决定表格需要的操作
    const action = createOperation(props.contentConfig.apis);

    const {
      loading,
      dataList,
      onSearch,
      getPageData,
      onBeforeAction,
      paginationConfig
    } = useRequeset(props);

    function handleSelection(value) {
      emit("selectionChange", value);
    }

    /**
     * 渲染需要的操作按钮
     */
    function renderOperation(row) {
      const { contentConfig } = props;
      const { apis, notPreview, powers } = contentConfig;

      return (
        <>
          {slots.custom && slots.custom(row)}
          {!notPreview && powers.some(i => i == "007") && (
            <Operation.Preview onPreview={() => emit("previewBtnClick", row)} />
          )}
          {action.update && powers.some(i => i == "005") && (
            <Operation.Update
              onUpdate={() => emit("updateBtnClick", row)}
              {...createActionProps("update", apis)}
            />
          )}
          {action.status &&
            ((powers.some(i => i == "003") && row.status + "" === "0") ||
              (powers.some(i => i == "004") && row.status + "" === "1")) && (
              <Operation.Status
                row={row}
                prop={contentConfig.statusProp}
                onReload={() => onSearch()}
                {...createActionProps("status", apis)}
              />
            )}
          {action.delete && powers.some(i => i == "006") && (
            <Operation.Delete
              row={row}
              prop={contentConfig.deleteProp}
              onReload={() => onSearch()}
              {...createActionProps("delete", apis)}
            />
          )}
        </>
      );
    }

    function renderPureTable(size, checkList) {
      const { contentConfig } = props;
      const { columns } = contentConfig;

      return (
        <PureTable
          border
          align="left"
          showOverflowTooltip
          table-layout="auto"
          size={size}
          data={dataList.value}
          columns={columns}
          checkList={checkList}
          paginationSmall={size === "small" ? true : false}
          headerCellStyle={{ background: "#fafafa", color: "#606266" }}
          onSelectionChange={handleSelection}
          {...paginationConfig}
          v-slots={{
            operation: ({ row }) => renderOperation(row)
          }}
        />
      );
    }

    expose({
      getPageData,
      onBeforeAction
    });

    return () => {
      const { contentConfig } = props;
      const { title, powers } = contentConfig;

      return (
        <TableProBar
          title={title}
          dataList={dataList.value}
          onRefresh={onSearch}
          loading={loading.value}
          v-slots={{
            buttons: () =>
              (slots.create && slots.create()) ||
              (action.create && powers.some(i => i == "002") && (
                <Operation.Create
                  {...createActionProps("create", contentConfig.apis)}
                  onCreate={() => emit("createBtnClick")}
                />
              )),
            default: ({ size, checkList }) => renderPureTable(size, checkList)
          }}
        />
      );
    };
  }
});

export default PageConent;
