import { attribute, elementDefine, innerHtml, onAttributeChanged } from '../index';
import { SwcHTMLMeterElementBase } from '../elements/base/SwcHTMLMeterElementBase';

@elementDefine({ name: 'swc-object-meter', extends: 'meter' })
export class SwcObjectMeter extends SwcHTMLMeterElementBase {
  @attribute('swc-value') _swcValue: any = {};
  private _renderedNodes: Node[] = [];
  @onAttributeChanged('swc-value') onValueChange() { if (typeof this._swcValue !== 'object' || this._swcValue === null) this._swcValue = {}; this._swcValue = this.createReactiveProxy(this._swcValue, () => this.updateUI()); if (this._masterTplNodes.length === 0) this.initCore(); this.render(); }
  set swcValue(val: any) { this._swcValue = val; } get swcValue(): any { return this._swcValue; }
  @innerHtml renderTemplate() { return `<slot id="tpl-slot" style="display:none;"></slot>`; }
  connectedCallback() { this.initCore(); if (this._masterTplNodes.length > 0) { this.innerHTML = ''; this.render(); } }
  private updateUI() { this._renderedNodes.forEach(node => { this.applyData(node, this._swcValue); }); }
  private render() { this.innerHTML = ''; this._renderedNodes = []; if (this._masterTplNodes.length === 0) return; this._masterTplNodes.forEach(tplNode => { const clone = tplNode.cloneNode(true) as HTMLElement; this.appendChild(clone); if (clone.style) clone.style.display = 'contents'; this._renderedNodes.push(clone); this.applyData(clone, this._swcValue); }); }
}
