import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
import { SFSchema } from '@delon/form';
import { NzContextMenuService, NzDropdownMenuComponent } from 'ng-zorro-antd/dropdown';
import { DropItem, PageEditorService } from 'src/app/layout/html-builder/page-editor/page-editor.service';

@Component({
  selector: 'app-ch-head',
  templateUrl: './ch-head.component.html',
  styleUrls: ['./ch-head.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class ChHeadComponent implements OnInit {

  public schema: SFSchema = {
    required: ['text'],
    properties: {
      head: {
        type: 'string',
        title: '标题类型',
        enum: [
          { label: 'H1 (字体大小：20)', value: 'H1' },
          { label: 'H2 (字体大小：15)', value: 'H2' },
          { label: 'H3 (字体大小：12)', value: 'H3' },
          { label: 'H4 (字体大小：10)', value: 'H4' },
          { label: 'H5 (字体大小：10)', value: 'H5' },
          { label: 'H6 (字体大小：10)', value: 'H6' },
        ],
        default: 'H2',
      },
      text: {
        type: 'string',
        title: '标题文本',
        ui: {
          widget: 'textarea',
          autosize: { minRows: 2 },
          firstVisual: true,
        },
      },
      size: {
        type: 'number',
        title: '字体大小',
        minimum: 8,
        maximum: 40,
      },
      headStyle: {
        type: 'string',
        title: '对齐方式',
        enum: [
          { label: '左对齐', value: 'left-align' },
          { label: '居中', value: 'center' },
          { label: '右对齐', value: 'right-align' },
          { label: '清除边距', value: 'clearmargin' },
        ],
        default: 'left-align',
      },
      href: {
        type: 'string',
        title: '标题链接url',
      },
      icon: {
        type: 'string',
        title: '前置图标',
        enum: [
          { label: '无', value: '' },
          { label: '亮点', value: 'hicon-light' },
        ],
        default: '',
      },
    },
  };

  @Input()
  public item: DropItem;

  @Input()
  public itemIndex: number;

  @Input()
  public itemParent: DropItem[];

  constructor(
    public pageEditorService: PageEditorService,
    private nzContextMenuService: NzContextMenuService,
  ) { }

  // 右键菜单
  public contextMenu(event: MouseEvent, menu: NzDropdownMenuComponent): void {
    event.stopPropagation();
    event.stopImmediatePropagation();
    this.nzContextMenuService.create(event, menu);
  }

  // 复制组件
  public copy() {
    this.pageEditorService.copyDropItem(this.itemIndex, this.itemParent);
  }

  // 删除组件
  public delete() {
    this.pageEditorService.removeDropItem(this.itemIndex, this.itemParent);
  }

  // 点击打开属性
  public click() {
    this.pageEditorService.updatePropForm(this.schema, this.item);
  }

  public ngOnInit() {
  }

}