import { BusinessTable } from "@mega-design/ui-vue";

export default {
  name: "MomTable",
  props: {
    ...BusinessTable.props,
    page: { type: Number, default: 1 },
    total: { type: [Number, String], default: 0 },
    pageSizes: Array,
    pageSize: Number,
    initCall: { type: Boolean, default: true },
  },
  data() {
    return {
      sortRule: null,
      sortColumn: null,
    };
  },
  computed: {
    defaultPageSize() {
      return this.$store.state.pagination.pageSize;
    },
  },
  async created() {
    if (this.initCall) {
      if (this.$listeners.beforeSearch instanceof Function) {
        await this.$listeners.beforeSearch();
      }
      this.search();
    }
  },
  methods: {
    search(params = {}) {
      const req = {
        sortRule: this.sortRule,
        sortColumn: this.sortColumn,
        size: this.pageSize || this.defaultPageSize,
        page: this.page,
      };
      // eslint-disable-next-line
      for (const key in this.$props.queryParam) {
        req[key] = this.$props.queryParam[key] || null;
      }
      if (this.$listeners.search instanceof Function) {
        this.$listeners.search({ ...req, ...params });
      }
    },
    async tableChange(pagination, filters, sorter) {
      const { current, pageSize } = pagination;
      const { order, field } = sorter;
      const _pageSize = this.pageSize || this.defaultPageSize;
      if (pageSize !== _pageSize) {
        if (this.pageSize === undefined) {
          this.$store.commit("pagination/SET_PAGINATION_PAGE_SIZE", pageSize);
        } else {
          await this.$emit("update:pageSize", pageSize);
        }
        await this.$emit("update:page", 1);
      } else {
        await this.$emit("update:page", current);
      }
      // eslint-disable-next-line
      this.sortRule =
        // eslint-disable-next-line
        order !== undefined ? (order === "ascend" ? "ASC" : "DESC") : null;
      // eslint-disable-next-line
      this.sortColumn =
        // eslint-disable-next-line
        order !== undefined
          ? field.endsWith("Text")
            ? field.substr(0, field.length - 4)
            : field
          : null;
      this.search();
    },
    async query() {
      await this.$emit("update:page", 1);
      this.search();
    },
  },
  render() {
    const {
      $props,
      $attrs,
      $listeners,
      page,
      total,
      pageSize,
      defaultPageSize,
      pageSizes,
      query,
      search,
      tableChange,
    } = this;

    let pagination;
    if (this.pagination === false) {
      pagination = false;
    } else {
      const source = {
        ...this.pagination,
        current: page,
        total: Number(total),
        pageSize: pageSize || defaultPageSize,
        pageSizeOptions: pageSizes,
      };

      if (pageSizes === undefined) {
        delete source.pageSizeOptions;
      }
      pagination = { ...source };
    }
    const cprops = { ...$props };
    if (cprops.queryParamItem) {
      Object.keys(cprops.queryParamItem).forEach((e) => {
        if (!cprops.queryParamItem[e].itemType) {
          cprops.queryParamItem[e].on = {
            pressEnter: () => {
              this.search();
            },
          };
        }
      });
    }
    const momTableProps = {
      props: {
        ...$props,
        ...$attrs,
        pagination,
        showUtilOperator: false,
        columns: this.columns || [],
      },
      scopedSlots: { ...this.$scopedSlots },
      on: {
        change: tableChange,
        query,
        reset: search,
        ...$listeners,
      },
    };
    return <BusinessTable {...momTableProps} />;
  },
};