<script>
import PlotChart from "./plot-chart.vue";
import TableChart from "./table-chart.vue";
import slots from "./mixin/slots";
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';
export default {
  mixins: [slots()],
  components: {
    PlotChart,
    TableChart,
    ProLayoutContaner,
  },
  inject: ['jdatachart'],
  props: {
    config: {},
  },
  computed: {
    regions() {
      return this.config.regions || [];
    },
  },
  methods: {
    renderChart() {
      return this.regions.map((item) => {
        //重新包装scopeSlot
        if (item._plot === "Table") {
          return (
            <TableChart
              config={item}
              key={item._name}
              span={item._span}
            >
              {this.renderSlots(true)}
            </TableChart>
          );
        } else {
          return (
            <PlotChart
              config={item}
              key={item._name}
              span={item._span}
            >
              {this.renderSlots(true)}
            </PlotChart>
          );
        }
      });
    },
  },
  render() {
    const config = this.config;
    return (
      <pro-layout-contaner
        columnCount={config.columnCount}
        gutter={config.gutter}
      >
        {this.renderChart()}
      </pro-layout-contaner>
    );
  },
};
</script>