// parent.component.ts
import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { SHARED_IMPORTS } from '@shared';
import { NzDropDownModule } from 'ng-zorro-antd/dropdown';
import { NzIconModule } from 'ng-zorro-antd/icon';
@Component({
  selector: 'data-v-card',
  standalone: true,
  template: `
    <div class="card-content">
      <!-- <img src="assets/dashboard/dashboard_card_bg.jpg" style="width: 100%;" /> -->

      <div class="card-content-title">
        <div class="card-content-l">{{ title }}</div>
        <div *ngIf="showSetting" class="card-content-r">
          <a nz-dropdown [nzDropdownMenu]="menu" nz-icon nzType="setting" nzTrigger="click" nzTheme="outline"></a>
          <nz-dropdown-menu #menu="nzDropdownMenu">
            <ul nz-menu nzSelectable>
              <li nz-menu-item *ngFor="let option of optionsList">
                <label nz-checkbox [(ngModel)]="option.checked" (ngModelChange)="onCheckChange()">{{ option.label }}</label>
              </li>
            </ul>
          </nz-dropdown-menu>
        </div>
      </div>

      <ng-content />
    </div>
  `,
  styleUrls: ['./card.component.less'],
  imports: [NzIconModule, CommonModule, NzDropDownModule, ...SHARED_IMPORTS]
})
export class DataVCardComponent {
  @Input() showSetting = false;
  @Input()
  optionsList: Array<{ label: string; checked: boolean }> = [];
  // 定义输出事件
  @Output() onCheckedItemsChange = new EventEmitter<Array<{ label: string; checked: boolean }>>();
  @Input() title: string = '';
  getCheckedItems() {
    return this.optionsList.filter(option => option.checked);
  }

  onCheckChange() {
    const checkedItems = this.getCheckedItems();
    this.onCheckedItemsChange.emit(checkedItems);
  }
}