import { SBaseEditScene, SBaseLineEdit, SBaseTextEdit, SBaseExpainEdit, SBaseRectEdit, SBaseEquipment } from "./../big-edit";
import { SPersagyImageEdit } from "./"
// import { SGraphItem } from "@persagy-web/graph/";
import { SGraphEdit } from "./../edit"
import { SMouseEvent } from "@persagy-web/base/lib";
import { SGraphSelectContainer, SLineStyle } from "@persagy-web/graph";
import { SItemStatus } from "@persagy-web/big/lib/enums/SItemStatus";
import { uuid, rgbaNum } from "./../big-edit/until";

// 引入命令
import { SGraphAddCommand } from "./../edit/commands/SGraphAddCommand"
import { SColor } from '@persagy-web/draw/lib';
import { SBaseTriangelEdit } from '../big-edit/items/SBaseTriangleEdit';
import { SBaseArrowEdit } from '../big-edit/items/SBaseArrowEdit';
import { SBaseCircleEdit } from '../big-edit/items/SBaseCircleEdit';
export class PTopoScene extends SBaseEditScene {
    constructor() {
        super()
        // // 选择绑定选额item事件
        this.selectContainer.connect("listChange", this, this.listChange);
    }

    /**
     * 选中返回的选中item回调方法
     *
     * @param   event   鼠标事件参数
     */
    listChange(list: any): void {
        this.emitChoice(list.itemList);
    }

    /**
     * 选中返回的选中item回调方法(用于场景的外部调用)
     *
     * @param   list   选中的item数组
    */
    emitChoice(list: any) {
    }

    /**
     * 鼠标左键按下
     *
     * @param   event   鼠标事件参数
     */
    onMouseDown(event: SMouseEvent): any {
        this.vueOnMouseDown(event) //外部调用
        if (this.editCmd == "EditBaseLine") {
            this.addLine(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBasetext") {
            this.addTextItem(event);
            this.clearCmdStatus();
        } else if (this.editCmd == "BaseExplain") {
            this.addExplainItem(event);
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBaseImage") {
            this.addImageItem(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBasePolygon") {
            console.log('编辑多边形')
        } else if (this.editCmd == "EditBaseRect") {
            this.addRectItem(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBaseTriangle") {
            this.addTriangleItem(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBaseCircle") {
            this.addCircleItem(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditBaseArrows") {
            this.addArrowsItem(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "EditEuqipment") {
            this.addEuqipment(event)
            this.clearCmdStatus();
        } else if (this.editCmd == "") {
            super.onMouseDown(event);
        }
    }
    /**
     * 鼠标右键事件
     *
     * @param   event   鼠标事件参数
     */
    onContextMenu(event: SMouseEvent): boolean {
        if (!super.onContextMenu(event)) {
            this.getItem(null, [event])
        }
        return true
    }
    /////////////////////////////////////////////////////////////////////////////////////////////////
    //新增 item 类方法；
    /**
     * 新增基础类直线
     *
     * @param   event   鼠标事件参数
     */
    addLine(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            Name: '基础直线',
            /** 图标（Image），线类型(Line) */
            Type: "Line",
            /** 缩放比例（Image），线类型(Line) */
            Scale: { X: 1, Y: 1, Z: 1 },
            /** 缩放比例（Image），线类型(Line) */
            Rolate: { X: 0, Y: 0, Z: 0 },
            /** 位置  */
            Pos: { X: 0, Y: 0 },
            /** 由应用自己定义  */
            Properties: {
                Type: "BaseLine"           // 自定义类型用于区分mark与node
            },
            Style: {
                Default: {
                    Line: [{ X: event.x, Y: event.y }],
                }

            }
        }
        const lineItem = new SBaseLineEdit(null, data);
        lineItem.status = SItemStatus.Create;
        this.addItem(lineItem);
        this.undoStack.push(new SGraphAddCommand(this, lineItem));
        lineItem.selectable = true;
        this.grabItem = lineItem;
        lineItem.connect("finishCreated", this, this.finishCreated);
        lineItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 新增基础类文本
     *
     * @param   event   鼠标事件参数
     */
    addTextItem(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            Name: '基础文本',
            /** 图标 */
            Type: "Text",
            /** 位置  */
            Pos: { X: event.x, Y: event.y },
            Size: { Width: 0, Height: 0 },
            /** 由应用自己定义  */
            Properties: {
                Type: "BaseText"           // 自定义类型用于区分mark与node
            },
            Style: {
                Default: {
                    Text: '请在右侧属性栏输入文字！',
                    Color: "#646c73",
                    Font: 14,
                    BackgroundColor: "#f7f9facc",
                }
            }
        }
        const item = new SBaseTextEdit(null, data);
        item.moveTo(event.x, event.y);
        item.moveable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.grabItem = null;
        item.connect("onContextMenu", this, this.getItem);
        this.finishCreated(item);
    }

    /**
     * 新增基础类注释
     *
     * @param   event   鼠标事件参数
     */
    addExplainItem(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            Name: '基础注释文本',
            /** 图标 */
            Type: "Text",
            /** 位置  */
            Pos: { X: event.x, Y: event.y },
            /** 由应用自己定义  */
            Properties: {
                Type: "BaseExplain",
            },
            Style: {
                Default: {
                    Text: '请在右侧属性栏输入文字！',
                    Color: "#646c73",
                    Font: 14,
                    BackgroundColor: "#f7f9facc",
                }
            }
        }
        const item = new SBaseExpainEdit(null, data);
        item.moveTo(event.x, event.y);
        item.selectable = true;
        item.moveable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        // this.Markers.push(item);
        this.grabItem = null;
        // this.focusItem = item;
        this.finishCreated(item);
        // this.scenceUpdate(this);
    }

    /**
     * 新增基础类图片
     *
     * @param   event   鼠标事件参数
     */
    addImageItem(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            Name: '基础图片',
            Num: 1,
            /** 图标（Image），线类型(Line) */
            Type: "Image",
            /** 位置  */
            Pos: { X: event.x, Y: event.y },
            /** 由应用自己定义  */
            Properties: {
                Type: "BaseImage",
            },
            Style: {
                Default: {
                    StrokeColor: "#c0ccda",
                    Url: '',
                }
            }
        }
        const item = new SPersagyImageEdit(null, data);
        item.selectable = true;
        item.moveable = true;
        this.addItem(item);
        this.undoStack.push(new SGraphAddCommand(this, item));
        this.Markers.push(item);
        this.finishCreated(item);
    }

    /**
     * 添加基本矩形item
     */
    addRectItem(event: SMouseEvent): void {
        const data = {
            ID: uuid(),
            Name: '基础矩形',
            /** 图标（Image），线类型(Line) */
            Type: "Zone",
            /** 位置  */
            Pos: { X: 0, Y: 0 },
            Properties: {
                Type: "BaseRect",
            },
            Style: {
                Default: {
                    Line: [{ X: event.x, Y: event.y }],
                }
            }
        }
        const rectItem = new SBaseRectEdit(null, data);
        rectItem.status = SItemStatus.Create;
        this.addItem(rectItem);
        this.undoStack.push(new SGraphAddCommand(this, rectItem));
        rectItem.selectable = true;
        this.grabItem = rectItem;
        rectItem.connect("finishCreated", this, this.finishCreated);
        rectItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加基本三角形item
     */
    addTriangleItem(event: SMouseEvent): void {
        const data = {
            ID: uuid(),
            Name: '基础三角形',
            Type: "Zone",
            Pos: { X: 0, Y: 0 },
            Properties: {
                Type: "BaseTriangle",
            },
            Style: {
                Default: {
                    Line: [{ X: event.x, Y: event.y }],
                }
            }
        }
        const triangleItem = new SBaseTriangelEdit(null, data);
        triangleItem.status = SItemStatus.Create;
        this.addItem(triangleItem);
        this.undoStack.push(new SGraphAddCommand(this, triangleItem));
        triangleItem.selectable = true;
        this.grabItem = triangleItem;
        triangleItem.connect("finishCreated", this, this.finishCreated);
        triangleItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加基本箭头item
     */
    addArrowsItem(event: SMouseEvent): void {
        const data = {
            ID: uuid(),
            Name: '基础箭头',
            Type: "Zone",
            Pos: { X: 0, Y: 0 },
            Properties: {
                Type: "BaseArrow",
            },
            Style: {
                Default: {
                    Line: [{ X: event.x, Y: event.y }],
                }
            }
        }
        const arrowItem = new SBaseArrowEdit(null, data);
        arrowItem.status = SItemStatus.Create;
        this.addItem(arrowItem);
        this.undoStack.push(new SGraphAddCommand(this, arrowItem));
        arrowItem.selectable = true;
        this.grabItem = arrowItem;
        arrowItem.connect("finishCreated", this, this.finishCreated);
        arrowItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }

    /**
     * 添加基本箭头item
     */
    addCircleItem(event: SMouseEvent): void {
        const data = {
            ID: uuid(),
            Name: '基础圆形',
            Type: "BaseCircle",
            Pos: { X: 0, Y: 0 },
            Properties: {
            },
            Style: {
                Default: {
                    Line: [{ X: event.x, Y: event.y }],
                }
            }
        }
        const circleItem = new SBaseCircleEdit(null, data);
        circleItem.status = SItemStatus.Create;
        this.addItem(circleItem);
        this.undoStack.push(new SGraphAddCommand(this, circleItem));
        circleItem.selectable = true;
        this.grabItem = circleItem;
        circleItem.connect("finishCreated", this, this.finishCreated);
        circleItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }
    /**
     * 添加基本设备item
     */
    addEuqipment(event: SMouseEvent): void {
        const data = {
            /** 名称  */
            Name: '基础设备',
            Num: 1,
            Size: { Width: 50, Height: 50 },
            /** 图标（Image），线类型(Line) */
            Type: "Image",
            /** 位置  */
            Pos: { X: event.x, Y: event.y },
            /** 由应用自己定义  */
            Properties: {
                Type: "baseEquipment",
            },
            Style: {
                Default: {
                    StrokeColor: "#c0ccda",
                    Url: require('./../../../assets/images/svg.svg'),
                }
            }
        }
        const circleItem = new SBaseEquipment(null, data);
        circleItem.status = SItemStatus.Create;
        this.addItem(circleItem);
        this.undoStack.push(new SGraphAddCommand(this, circleItem));
        circleItem.selectable = true;
        this.grabItem = circleItem;
        circleItem.connect("finishCreated", this, this.finishCreated);
        circleItem.connect("onContextMenu", this, this.getItem);
        if (this.view) {
            this.view.update();
        }
    }
    /**
     * 修改 item 样式，数据等方法
     * @param styleType string 修改样式类型
     * @param changeStyle 更改样式数据
     * @param itemList? SGraphEdit[] 如果不传入默认使用选择器中选中得item
     */
    updateStyle(styleType: string, changeStyle: any, itemList?: SGraphEdit[]): void {
        console.log('------------>');
        console.log(styleType);
        console.log(changeStyle);
        console.log(itemList);
        console.log('------------>');
        
        // 如果未传入需要修改样式的item,默认取选择器中的item
        let List = null;
        if (itemList && itemList.length) {
            List = itemList;
        } else {
            List = this.selectContainer.itemList;
        };
        let styleValue: any
        if (styleType == "strokeColor" || styleType == "backgroundColor") {
            const colorlist = rgbaNum(changeStyle)
            styleValue = new SColor(Number(colorlist[0]), Number(colorlist[1]), Number(colorlist[2]), colorlist[3] * 255);
        } else if (styleType == "lineStyle") {
            styleValue = SLineStyle[changeStyle]
        } else {
            styleValue = changeStyle
        }
        List.forEach((item: SGraphEdit, index: number) => {
            if (item instanceof SGraphSelectContainer) {
                return
            }
            item[styleType] = styleValue;
        })

    }

    /**
     * item 创建完成后回调
     *
     * @param   event   鼠标事件参数
     */
    finishCreated(item: SGraphEdit): void {
        this.grabItem = null;
        item.status = SItemStatus.Normal;
    }
    /**
     * 修改 cmdstatus 函数；常在在业务中调用
     *
     */
    clearCmdStatus() {
    }
    /**
     * 获取item (常用与场景外的调用F)
     * @param  event SMouseEvent 鼠标事件
     * @param  item SGraphEdit|null 返回item
     *
     */
    getItem(item: SGraphEdit | null, event: SMouseEvent[]) {
    }
    /**
     * 获取item (常用与场景外的调用F)
     * @param  event SMouseEvent 鼠标事件
     * @param  item SGraphEdit|null 返回item
     *
     */
    vueOnMouseDown(event: SMouseEvent) {
    }

    /**
     * 获取item (常用与场景外的调用F)
     * @return obj 返回保存的数据接口
     */
    save() {
        if (!this.view) return;
        const MarkType: string[] = ['BaseLine', 'BaseText', 'BaseExplain', 'BaseImage'];
        const Markers: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
        const Nodes: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
        const Relations: any = [];   /**图例节点 */  // 与工程信息无关的标识对象（增加文本注释，图上的图片说明）
        this.root.children.forEach(item => {
            if ((item instanceof SGraphEdit) && !(item instanceof SGraphSelectContainer) && MarkType.includes(item.data.Properties.Type)) {
                Markers.push(item.toData())
            }
        });
        return {
            Markers,
            Nodes,
            Relations
        }
    }
}