import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';
import { BaseService } from '@shared';

@Component({
  selector: 'app-dynamic-setting-h5',
  templateUrl: './dynamic-setting-h5.component.html',
  styleUrls: ['./dynamic-setting-h5.component.less']
})
export class DynamicSettingH5Component implements OnInit {
  @Input()
  tabs: any[] = [];
  @Input()
  selectedTab: any = null;

  @Input()
  configList: any = [];
  @Output()
  selectedEvent = new EventEmitter<any>();
  @Output()
  saveEvent = new EventEmitter<any>();

  @Input()
  tabSpan = 4;
  @Input()
  labelWidth = 250;
  @Input()
  itemValue = 'itemValue';

  constructor(public service: BaseService) {}

  ngOnInit() {}

  changeType(type: any): void {
    this.selectedTab = type;
    this.selectedEvent.emit(this.selectedTab);
  }

  saveAction() {
    if (this.configList?.length < 0) {
      return;
    }
    const params = this.configList.map((item: any) => ({
      ...item,
      remark: item.remark ? JSON.stringify(item.remark) : null,
      itemData: item.itemData ? JSON.stringify(item.itemData) : null,
      itemValue: item.itemValue ? JSON.stringify(item.itemValue) : null
    }));
    this.saveEvent.emit(params);
  }
}
