<template>
  <div>
    <a-table
      :columns="_columns"
      :data-source="Pagination.dataSource"
      :scroll="scrollOption"
      v-bind="getTableBind(Pagination)"
      v-on="$listeners"
    >
      <template v-for="item in slots" #[item]="record">
        <slot :name="item" v-bind="{ record }" />
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { BasesController, BasesPagination } from '@mamba/clients';
import lodash from 'lodash';
import { observer } from 'mobx-vue';
import { debounceTime, fromEvent, Subscription } from 'rxjs';
import { Component, Prop, Vue } from 'vue-property-decorator';
@observer
@Component({
  components: {},
})
export default class PageView extends Vue {
  @Prop({ required: true }) PageController: BasesController;
  get Pagination() {
    return this.PageController.Pagination;
  }
  // 列配置
  @Prop({ required: true }) columns: Array<any>;
  @Prop({}) scroll;
  @Prop({}) rowSelection;
  ResizeEvent: Subscription;

  style = { height: '500px' };
  get gridContent(): HTMLDivElement {
    return this.$el as any;
  }
  get _columns() {
    return lodash.map(this.columns, (item) => {
      return lodash.assign({}, item, { title: this.$t(item.title) });
    });
  }
  get scrollOption() {
    return lodash.assign(
      {
        x: lodash.reduce(
          this.columns,
          (prev, curr) => {
            return prev + lodash.get(curr, 'width', 200);
          },
          0,
        ),
        //  y: this.style.height
      },
      this.scroll,
    );
  }
  get slots() {
    return lodash.compact(lodash.map(this.columns, 'scopedSlots.customRender'));
  }
  /**
   * 计算 表格高度
   */
  onReckon() {
    let height = 500;
    height = window.innerHeight - this.gridContent.offsetTop - 210;
    height = lodash.max([height, 500]);
    this.style.height = height + 'px';
  }
  getTableBind(Pagination) {
    return lodash.assign(
      {},
      this.$attrs,
      lodash.merge(this.TableBind(Pagination), { rowSelection: this.rowSelection }),
    );
  }
  TableBind(Pagination: BasesPagination) {
    // https://www.antdv.com/components/table-cn/
    let options = {
      // https://www.antdv.com/components/table-cn/#components-table-demo-grouping-table-head
      rowSelection: {
        fixed: true,
        getCheckboxProps: (record) => {
          return { props: {} };
        },
        selectedRowKeys: Pagination.selectedRowKeys,
        // 选中项发生变化时的回调
        onChange: (selectedRowKeys, selectedRows) => {
          Pagination.onSelectChange(selectedRowKeys);
        },
        // 用户手动选择/取消选择某列的回调
        onSelect: (record, selected, selectedRows, nativeEvent) => {
          // console.log("LENG ~ record, selected, selectedRows, nativeEvent", record, selected, selectedRows, nativeEvent)
        },
        // 用户手动选择/取消选择所有列的回调
        onSelectAll: (selected, selectedRows, changeRows) => {
          // console.log("LENG ~ selected, selectedRows, changeRows", selected, selectedRows, changeRows)
        },
        // 用户手动选择反选的回调
        onSelectInvert: (selectedRows) => {
          // console.log("LENG ~ selectedRows", selectedRows)
        },
      },
      rowKey: Pagination.options.dataKey,
      dataSource: Pagination.dataSource,
      loading: Pagination.loading,
    };
    // https://www.antdv.com/components/pagination-cn/
    if (Pagination.total || lodash.eq(Pagination.total, 0)) {
      const onChange = (current, pageSize) => {
        this.$MergeQuery({
          // [Pagination.PaginationParams.currentKey]: current,
          [Pagination.PaginationParams.pageSizeKey]: String(pageSize),
        });
        const body = lodash.omit(Pagination.oldBody, [
          Pagination.PaginationParams.currentKey,
          Pagination.PaginationParams.pageSizeKey,
        ]);
        Pagination.onLoad({ current, pageSize, body });
      };
      lodash.set(options, 'pagination', {
        total: Pagination.total,
        current: Pagination.current,
        pageSize: Pagination.pageSize,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total) => `共 ${total} 条数据`,
        onShowSizeChange: onChange,
        onChange: onChange,
      });
    }
    return options;
  }
  created() {}
  mounted() {
    this.$nextTick(() => this.onReckon());
    this.ResizeEvent = fromEvent(window, 'resize').pipe(debounceTime(200)).subscribe(this.onReckon);
  }
  updated() {}
  destroyed() {
    this.ResizeEvent && this.ResizeEvent.unsubscribe();
    this.ResizeEvent = undefined;
  }
}
</script>
<style lang="less"></style>
