import {AfterViewChecked, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService, NzModalService} from 'ng-zorro-antd';
import {DomSanitizer} from '@angular/platform-browser';
import * as $ from 'jquery';

declare let editor: any;
declare var layui: any;

@Component({
    selector: 'smart-ne-topology',
    templateUrl: './ne-topology.component.html',
    styles: [
            `
            .layui-side-scroll {
                width: initial;
            }

            .layui-layout-right {
                color: #666666;
            }

            .layui-header span {
                margin-right: 15px;
                cursor: pointer;
            }
            .tips{
                position: absolute;
                top: 10px;
                left: 20px;
                color: #ca0814;
                font-size: 20px;
            }
        `
    ]
})
export class NeTopologyComponent implements OnInit {
    @ViewChild('topologyCanvas') topologyCanvas: ElementRef;

    element;
    dataSet;
    isVisible = false;
    image;
    topoId;
    name;
    topoType = '只读模式';

    constructor(private topologySer: TopologyService, private message: NzMessageService,
                private sanitizer: DomSanitizer, private modalSer: NzModalService) {
        layui.use('element', () => {
             this.element = layui.element;
        });
    }

    ngOnInit() {

        this.loadCanvas();
        this.getList();
    }

    //新增拓扑图
    addTopo() {
        this.topoType = '添加模式';
        this.message.info('添加模式');
        editor.utils.editTopology();
    }

    //编辑拓扑图
    editTopo() {
        if(!this.topoId){
            this.message.info("请选择需要编辑的拓扑图");
            return false;
        }
        this.topoType = '编辑模式';
        this.message.info('编辑模式');
        editor.utils.editTopology();
    }

    //获取列表
    getList() {
        this.topologySer.findAll().subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.dataSet = res.data;
                } else {
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    save() {
        if (this.topoType == '添加模式') {
            this.create();
        } else {
            this.update();
        }
    }

    //创建
    create() {
        if (!this.name) {
            this.message.info('请输入拓扑图名称');
            return false;
        }
        let data = {
            name: this.name,
            json: editor.saveTopology()
        };

        this.topologySer.create(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.message.info('创建成功');
                    editor.utils.normalTopology();
                    this.getList();
                } else {
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    //编辑
    update() {
        if (!this.name) {
            this.message.info('请输入拓扑图名称');
            return false;
        }
        let data = {
            id: this.topoId,
            name: this.name,
            json: editor.saveTopology()
        };
        this.topologySer.update(data).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    this.message.info('编辑成功');
                    editor.utils.normalTopology();
                    this.getList();
                } else {
                    this.message.info(res.errMsg);
                }
            }
        );
    }

    //查询单个
    getDetail(id) {
        this.topologySer.findItem(id).subscribe(
            (res) => {
                if (res.errCode == 10000) {
                    let json = JSON.parse(res.data.json);
                    this.name = res.data.name;
                    this.topoId = res.data.id;
                    editor.utils.normalTopology();
                    this.topoType = '只读模式';
                    editor.loadTopologyByJson(json, 'img/backimg.png');
                }
            }
        );
    }

    //删除拓扑图
    deleteTopo() {
        if(!this.topoId){
            this.message.info("请选择需要删除的拓扑图")
            return false;
        }
        this.modalSer.confirm({
                nzTitle: '删除',
                nzContent: '<b style="color: red;">确认删除该拓扑图吗？</b>',
                nzOkText: '确定',
                nzOkType: 'danger',
                nzOnOk: () => {
                    this.topologySer.delete(this.topoId).subscribe(
                        (res) => {
                            if (res.errCode == 10000) {
                                this.topoId = null;
                                this.message.info('删除成功');
                                this.getList();
                            } else {
                                this.message.info(res.errMsg);
                            }
                        }
                    );
                },
                nzCancelText: '取消',
                nzOnCancel: () => console.log('Cancel')
            }
        );
    }

    //load
    loadCanvas() {
        // 选择连线方式后的css样式
        $('#link-line').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-foldline-h').css('background-color', 'white');
            $('#link-foldline-v').css('background-color', 'white');
            $('#link-flexline-h').css('background-color', 'white');
            $('#link-flexline-v').css('background-color', 'white');
            $('#link-curveline').css('background-color', 'white');
        });
        $('#link-foldline-h').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-line').css('background-color', 'white');
            $('#link-foldline-v').css('background-color', 'white');
            $('#link-flexline-h').css('background-color', 'white');
            $('#link-flexline-v').css('background-color', 'white');
            $('#link-curveline').css('background-color', 'white');
        });
        $('#link-foldline-v').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-line').css('background-color', 'white');
            $('#link-foldline-h').css('background-color', 'white');
            $('#link-flexline-h').css('background-color', 'white');
            $('#link-flexline-v').css('background-color', 'white');
            $('#link-curveline').css('background-color', 'white');
        });
        $('#link-flexline-h').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-line').css('background-color', 'white');
            $('#link-foldline-h').css('background-color', 'white');
            $('#link-foldline-v').css('background-color', 'white');
            $('#link-flexline-v').css('background-color', 'white');
            $('#link-curveline').css('background-color', 'white');
        });
        $('#link-flexline-v').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-line').css('background-color', 'white');
            $('#link-foldline-h').css('background-color', 'white');
            $('#link-foldline-v').css('background-color', 'white');
            $('#link-flexline-h').css('background-color', 'white');
            $('#link-curveline').css('background-color', 'white');
        });
        $('#link-curveline').click(() => {
            $(this).css('background-color', 'darkgray');
            $('#link-line').css('background-color', 'white');
            $('#link-foldline-h').css('background-color', 'white');
            $('#link-foldline-v').css('background-color', 'white');
            $('#link-flexline-h').css('background-color', 'white');
            $('#link-flexline-v').css('background-color', 'white');
        });

        console.log($('.layui-collapse') );
        this.element.init();

        // 节点树中每个节点的拖放动作定义给拓扑图编辑器
        let nodes = $('[topo-div-type=\'topo-node\']');
        let nodeLength = nodes.length;
        for (let i = 0; i < nodeLength; i++) {
            let text = $(nodes[i]).find('span').eq(0).text();
            editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
        }
        editor.loadTopology('', 'img/backimg.png');
    }

}
