import { Injectable } from '@angular/core';
import { SFSchema } from '@delon/form';

export class DropItem {
  public uid: number;
  public code: string;
  public data?: any;
  public rootUid?: number;
  public colItems?: ColItem[];

  constructor(code: string, data?: any, rootUid?: number) {
    this.code = code;
    this.uid = Math.random();
    this.data = data || {};
    this.rootUid = rootUid;
    this.colItems = [];
  }
}

export class ColItem {
  public id: string;
  public pc: number;
  public pad: number;
  public phone: number;
  public dropItems?: DropItem[];

  constructor(id: string, dropItem?: DropItem[], pc?: number, pad?: number, phone?: number) {
    this.id = id;
    this.pc = pc || 12;
    this.pad = pad || 12;
    this.phone = phone || 24;
    this.dropItems = dropItem || [];
  }
}

@Injectable({
  providedIn: 'root',
})
export class PageEditorService {

  // playground 列表
  public dropItems: Array<DropItem> = [];

  // dropIds
  public dropConnectPlayground: string[] = ['playground'];

  // 组件属性表结构 schema
  public schema: SFSchema;

  // 组件属性表数据
  public editItem: DropItem;

  // 组件属性表默认数据
  public defaultEditItemValue: object;

  // 通用数据表结构
  public commonSchema: SFSchema = {
    properties: {
      hideCls: {
        type: 'string',
        title: '指定设备隐藏',
        enum: [
          { label: '默认', value: '' },
          { label: '手机端隐藏', value: 'xs-hide' },
          { label: 'PC端隐藏', value: 'sm-hide md-hide lg-hide' }],
        default: '',
      },
      bg: {
        type: 'string',
        title: '背景色',
        enum: [{ label: '默认', value: '' },
        { label: '灰色背景（整屏）', value: 'bgGray' },
        { label: '灰色背景（区域）', value: 'bgGray bgGrayMin' },
        { label: '整屏灰色带上标', value: 'bgGray bgGrayDown' }],
        default: '',
      },
      marginSetting: {
        type: 'string',
        title: '行间距',
        enum: [{ label: '默认', value: '' },
        { label: '行间距清零', value: 'marginZero' }],
        default: '',
      },
      paddingTop: {
        type: 'number',
        title: '上边距',
        minimum: 0,
        maximum: 10,
        default: 0,
        multipleOf: 1,
      },
      paddingBottom: {
        type: 'number',
        title: '下边距',
        minimum: 0,
        maximum: 10,
        default: 0,
        multipleOf: 1,
      },
    },
  };

  constructor() { }

  // 插入拖放组件
  public insertDropItem(dropItem: DropItem, index: number) {
    this.dropItems.splice(index, 0, dropItem);
    // console.log(this.dropItems);
  }

  // 删除拖放组件
  public removeDropItem(index: number, parent?: DropItem[]) {
    // 如果没有传入父节点，则复制对应的root节点。
    if (!parent) {
      this.dropItems.splice(index, 1);
    } else {
      parent.splice(index, 1);
    }
    this.schema = undefined;
    // console.log(this.dropItems);
  }

  // 复制拖放组件
  public copyDropItem(index: number, parent?: DropItem[]) {
    // 如果没有传入父节点，则复制对应的root节点。
    if (!parent) {
      const deepClone = JSON.parse(JSON.stringify(this.dropItems[index])) as DropItem;
      deepClone.rootUid = Math.random();
      deepClone.uid = deepClone.rootUid;
      if (deepClone.code === 'app-ch-grid') {
        this.resetRootUid(deepClone, deepClone.uid);
        deepClone.uid = deepClone.rootUid;
        // console.log(deepClone);
      }
      this.dropItems.splice(index + 1, 0, deepClone);
    } else {
      const deepClone = JSON.parse(JSON.stringify(parent[index])) as DropItem;
      deepClone.uid = Math.random();
      if (deepClone.rootUid === undefined || deepClone.rootUid === deepClone.uid) {
        deepClone.rootUid = deepClone.uid;
      }
      deepClone.uid = deepClone.rootUid;
      parent.splice(index + 1, 0, deepClone);
    }
  }

  // 递归重建栅格的rootUid
  public resetRootUid(dropItem: DropItem, rootUid: number) {
    if (dropItem.code === 'app-ch-grid') {
      dropItem.colItems.forEach((colItem: ColItem) => {
        colItem.dropItems.forEach((colDropItem: DropItem) => {
          this.resetRootUid(colDropItem, rootUid);
        });
      });
    }
    dropItem.uid = Math.random();
    dropItem.rootUid = rootUid;
  }

  // 通过uid获取节点排序号
  public rootDropIndex(uid: number): number {
    return this.dropItems.findIndex((dropItem) => dropItem.uid === uid);
  }

  // 更新ch-grid的拖放连接
  public updateDropConnect(colLayouts: Array<{ pc: number, phone: number }>) {
    const colItems: ColItem[] = [];
    const dropConnectGrid: string[] = [];
    const uid = Math.random();
    colLayouts.forEach((col, index) => {
      const droplistConnectId = `grid-${index}-${uid}`;
      dropConnectGrid.push(droplistConnectId);
      colItems.push(new ColItem(droplistConnectId, undefined, col.pc, col.pc, col.phone));
    });
    // 清理重复的链接droplist
    if (dropConnectGrid.length) {
      this.dropConnectPlayground = [...dropConnectGrid, ...this.dropConnectPlayground];
      this.dropConnectPlayground = Array.from(new Set(this.dropConnectPlayground));
    }
    // console.log(this.dropConnectPlayground);
    return colItems;
  }

  // 设置并打开组件属性表单
  public updatePropForm(schema: SFSchema, dropItem: DropItem) {
    this.schema = schema;
    this.editItem = dropItem;
    if (dropItem.data) {
      this.defaultEditItemValue = JSON.parse(JSON.stringify(dropItem.data));
    } else {
      this.defaultEditItemValue = {};
    }
  }

}