<script>
import baseChart from "./base-chart.vue";
import slots from "./mixin/slots";
import g2plot from "./mixin/g2plot";
import omit from "mars-pro/src/pro/omit";
import ProDataTable from 'mars-pro/packages/pro-data-table';
export default {
  nme: "tableChart",
  mixins: [
    slots(),
    g2plot()
  ],
  components: { baseChart,ProDataTable },
  methods: {
    filterDataByGroupColumn(column, index){
      return (this.plotOption.data || []).map((r) => ({$index:index, ...r}))
    },
    renderTable() {
      const _datas = {
        props: {
          ...this.plotOption,
          enablePagination: false,
        },
        attrs: {
          ...this.plotOption,
        },
      };
      return (
        <div class="plot-chart-content table-plot">
          <pro-data-table
            {..._datas}
            scopedSlots={this.resolveBaseChartScopeSlot()}
          >
            {this.renderSlots(true)}
          </pro-data-table>
        </div>
      );
    },
    renderGroupTable() {
      return (
        <div class="plot-chart-content table-plot-group">
          <pro-layout-contaner
            columnCount={2}
            gutter={this.plotOption.gutter}
            enableBottomGutter={false}
          >
            {this.plotOption.group.map((opt, index) => {
              //过滤数据
              const _datas = {
                props: {
                  ...this.plotOption,
                  enablePagination: false,
                  data: this.filterDataByGroupColumn(opt.columns, index),
                  columns: opt.columns
                },
                attrs: {
                  ...omit(this.plotOption, ["group", "columns"]),
                },
              };
              return (
                <pro-data-table
                  {..._datas}
                  scopedSlots={this.resolveBaseChartScopeSlot()}
                >
                  {this.renderSlots(true)}
                </pro-data-table>
              );
            })}
          </pro-layout-contaner>
        </div>
      );
    },
  },
  render() {
    return (
      <baseChart
        scopedSlots={this.resolveBaseChartScopeSlot()}
        config={this.config}
        class={{ ["pot-chart-" + this.config._name]: true }}
      >
        {this.plotOption.group ? this.renderGroupTable() : this.renderTable()}
      </baseChart>
    );
  },
};
</script>