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

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

  public schema: SFSchema = {
    properties: {
      layout: {
        type: 'array',
        title: '栅格布局',
        minItems: 1,
        maxItems: 12,
        description: '* 栅格布局，基于Boostrap，24分格。',
        items: {
          type: 'object',
          properties: {
            pc: {
              type: 'number',
              title: '桌面',
              minimum: 1,
              maximum: 24,
              default: 4,
            },
            pad: {
              type: 'number',
              title: '平板',
              minimum: 1,
              maximum: 24,
              default: 4,
            },
            phone: {
              type: 'number',
              title: '手机',
              minimum: 1,
              maximum: 24,
              default: 4,
            },
            padding: {
              type: 'string',
              title: '左右边距',
              enum: [
                { label: '默认', value: '' },
                { label: '左边距:0', value: 'pl0' },
                { label: '右边距:0', value: 'pr0' },
                { label: '两边距:0', value: 'px0' },
              ],
              default: '',
            },
          },
        },
        ui: {
          grid: { arraySpan: 8 },
        },
      },
    },
  };

  @Input()
  public gridItem: DropItem;

  @Input()
  public itemIndex: number;

  @Input()
  public itemParent: DropItem[];

  // 格子分列数据
  public colItemsTemp: ColItem[];

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

  public initColData() {
    // console.log('initColData');
    // 连接拖放组件
    if (!this.gridItem.data.layout) {
      this.gridItem.data.layout = [
        { pc: 12, pad: 12, phone: 24 },
        { pc: 12, pad: 12, phone: 24 },
      ];
    }
    this.colItemsTemp = this.pageEditorService.updateDropConnect(this.gridItem.data.layout);
    // 初始化ch-grid栅格数据
    if (this.gridItem.colItems.length) {
      this.colItemsTemp.forEach((_, index: number) => {
        if (this.gridItem.colItems[index]) {
          this.colItemsTemp[index].dropItems = this.gridItem.colItems[index].dropItems;
        }
      });
    }
    this.gridItem.colItems = this.colItemsTemp;
    // console.log(this.pageEditorService.dropItems, this.gridItem);
  }

  // 拖放组件
  public drop(event: CdkDragDrop<DropItem>) {
    // console.log('In ChGridComponent');
    // console.log(`previousIndex => ${event.previousIndex}, currentIndex => ${event.currentIndex}`);
    // console.log('previousContainer.data => ', event.previousContainer.data);
    this.gridItem.colItems.forEach((colItem: ColItem) => {
      if (event.container.id === colItem.id) {
        if (event.previousContainer === event.container) {
          moveItemInArray(colItem.dropItems, event.previousIndex, event.currentIndex);
        } else {
          if (this.gridItem.rootUid === undefined) {
            this.gridItem.rootUid = this.gridItem.uid;
          }
          colItem.dropItems.splice(event.currentIndex, 0, new DropItem(event.previousContainer.data.code, undefined,
            this.gridItem.rootUid));
        }
      }
    });
  }

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

  // 分割栅格
  public split(n: number) {
    if (n !== this.gridItem.data.layout.length) {
      switch (n) {
        case 2:
          this.gridItem.data.layout = this.gridItem.data.layout = [
            { pc: 12, pad: 12, phone: 24 },
            { pc: 12, pad: 12, phone: 24 },
          ];
          break;
        case 3:
          this.gridItem.data.layout = this.gridItem.data.layout = [
            { pc: 8, pad: 8, phone: 24 },
            { pc: 8, pad: 8, phone: 24 },
            { pc: 8, pad: 8, phone: 24 },
          ];
          break;
        case 4:
          this.gridItem.data.layout = this.gridItem.data.layout = [
            { pc: 6, pad: 6, phone: 24 },
            { pc: 6, pad: 6, phone: 24 },
            { pc: 6, pad: 6, phone: 24 },
            { pc: 6, pad: 6, phone: 24 },
          ];
          break;
      }
      this.initColData();
      this.click();
    }
  }

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

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

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

  public ngOnInit() {
    this.initColData();
  }

}