import Handsontable from '@sc/handsontable';
import { parse, style } from '@/utils/frontend/dom';
import { TreeNode } from '@sc/tree';

export default function (
  instance: Handsontable,
  row: number,
  col: number,
  prop: string | number,
  value: any
): HTMLElement {
  // 当前行的源数据
  const rowSourceData = instance.getSourceDataAtRow(row) as TreeNode;
  // 当前行的上下文对象
  const ctx = rowSourceData.getCtx();

  const template = `
    <div class="ht-indent-renderer">
      <span>${value || ''}</span>
    </div>
  `;

  // indent-renderer
  const container = parse(template) as HTMLElement;

  // 层级缩进
  const paddingLeft = `${6 + ctx.depth() * 20}px`;
  style(container, {
    paddingLeft,
  });

  return container;
}
