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,
      enableFlagList: [
        { label: this.$t("ALL"), value: "" },
        { label: this.$t("ENABLED"), value: "Y" },
        { label: this.$t("DISABLED"), value: "N" },
      ],
    };
  },
  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,
      };
      if (this.$props.pagination === false) {
        delete req.size;
        delete req.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 momTableProps = {
      props: {
        ...$props,
        ...$attrs,
        pagination,
        enableFlag: {
          prop: "enableFlag",
          defaultValue: "",
          enableValue: "Y",
          options: this.enableFlagList || [],
          optionsProps: {
            label: "label",
            value: "value",
          },
        },
        columns: this.columns || [],
      },
      scopedSlots: { ...this.$scopedSlots },
      on: {
        change: tableChange,
        query,
        reset: search,
        ...$listeners,
      },
    };
    return <BusinessTable {...momTableProps} />;
  },
};
