let tableInstance;
const input_editor = new VTable_editors.InputEditor();
VTable.register.editor('input-editor', input_editor);
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
  .then(res => res.json())
  .then(data => {
    const option = {
      records: data,
      rows: [
        {
          dimensionKey: 'Category',
          title: 'Category',
          headerStyle: {
            textStick: true
          },
          width: 'auto'
        },
        {
          dimensionKey: 'Sub-Category',
          title: 'Sub-Catogery',
          headerStyle: {
            textStick: true
          },
          width: 'auto'
        }
      ],
      columns: [
        {
          dimensionKey: 'Segment',
          title: 'Segment',
          headerStyle: {
            textStick: true
          },
          format: rec => {
            return 'kkk';
          },
        }
      ],
      columnTree: [
        {
          dimensionKey: 'Sment-1',
          value: 'Segment-1 (virtual-node)',
          virtual: true,
          children: [
            {
              dimensionKey: 'Segment',
              value: 'Consumer',
              children: [
                {
                  indicatorKey: 'Quantity',
                  value: 'Quantity'
                },
                {
                  indicatorKey: 'Sales',
                  value: 'Sales'
                },
                {
                  indicatorKey: 'Profit',
                  value: 'Profit'
                }
              ]
            },
            {
              dimensionKey: 'Segment',
              value: 'Corporate',
              children: [
                {
                  indicatorKey: 'Quantity',
                  value: 'Quantity'
                },
                {
                  indicatorKey: 'Sales',
                  value: 'Sales'
                },
                {
                  indicatorKey: 'Profit',
                  value: 'Profit'
                }
              ]
            }
          ]
        },
        {
          dimensionKey: 'Segment',
          value: 'Home Office',
          children: [
            {
              dimensionKey: 'Segment-2',
              value: 'Segment-2 (virtual-node)',
              virtual: true,
              children: [
                {
                  indicatorKey: 'Quantity',
                  value: 'Quantity'
                },
                {
                  indicatorKey: 'Sales',
                  value: 'Sales'
                },
                {
                  indicatorKey: 'Profit',
                  value: 'Profit'
                }
              ]
            }
          ]
        },
        {
          dimensionKey: 'Segment',
          value: 'Column Totals',
          children: [
            {
              indicatorKey: 'Quantity',
              value: 'Quantity'
            },
            {
              indicatorKey: 'Sales',
              value: 'Sales'
            },
            {
              indicatorKey: 'Profit',
              value: 'Profit'
            }
          ]
        }
      ],
      indicators: [
        {
          indicatorKey: 'Quantity',
          title: 'Quantity',
          width: 'auto',
          showSort: false,
          headerStyle: {
            fontWeight: 'normal'
          },
          style: {
            padding: [16, 28, 16, 28],
          }
        },
        {
          indicatorKey: 'Sales',
          title: 'Sales',
          width: 'auto',
          showSort: false,
          headerStyle: {
            fontWeight: 'normal'
          },
          format: rec => {
            return '$' + Number(rec).toFixed(2);
          },
          style: {
            padding: [16, 28, 16, 28],
          }
        },
        {
          indicatorKey: 'Profit',
          title: 'Profit',
          width: 'auto',
          showSort: false,
          headerStyle: {
            fontWeight: 'normal'
          },
          format: rec => {
            return '$' + Number(rec).toFixed(2);
          },
          style: {
            padding: [16, 28, 16, 28]
          }
        }
      ],
      corner: {
        titleOnDimension: 'row'
      },
      dataConfig: {
        totals: {
          row: {
            showGrandTotals: true,
            showSubTotals: true,
            showSubTotalsOnTop: true,
            showGrandTotalsOnTop: true,
            subTotalsDimensions: ['Category'],
            grandTotalLabel: 'Row Totals',
            subTotalLabel: 'Sub Totals'
          },
          column: {
            showGrandTotals: true,
            showSubTotals: false,
            grandTotalLabel: 'Column Totals'
          }
        }
      },
      theme: VTable.themes.DEFAULT.extends({
        headerStyle: {
          bgColor: '#5071f9',
          color(args) {
            if (
              (args.cellHeaderPaths.colHeaderPaths?.length === 1 && args.cellHeaderPaths.colHeaderPaths[0].virtual) ||
              (args.cellHeaderPaths.colHeaderPaths?.length === 2 && args.cellHeaderPaths.colHeaderPaths[1].virtual)
            ) {
              return 'red';
            }
            return '#fff';
          }
        },
        cornerHeaderStyle: {
          bgColor: '#5071f9',
          color: '#fff'
        }
      }),
      editor: 'input-editor',
      editCellTrigger: 'click',
      widthMode: 'standard'
    };
    tableInstance = new VTable.PivotTable(document.getElementById(CONTAINER_ID), option);
    window.tableInstance = tableInstance;
  });