<template>
    <div id="baseEditer" ref="graphy">
        <div id="fengMap"></div>
        <div class="canvas-container">
            <canvas id="canvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
        </div>
    </div>
</template>
<script>
import { SFengParser } from "@saga-web/feng-map";
import { SFloorParser } from "@saga-web/big";
import { FloorView } from "./../lib/FloorView";
import { EditScence } from "./mapClass/EditScence";
import bus from "@/bus";
import {
  saveGroup,
  readGroup,
  queryTypeGraph,
  publishGraph
} from "@/api/editer.js";
import { STopologyParser } from "./../lib/parsers/STopologyParser";
import { uuid } from "@/components/mapClass/until";
import { SImageItem } from "@saga-web/graph/lib";
import { SPainter, SColor, SFont, SPoint } from "@saga-web/draw";
import store from "../store";
import { Loading } from "element-ui";
import { Message } from "element-ui";
import { SEquipParser } from "../../../sagacloud-web/saga-web-big/src";
import { SEquipmentParser } from "../lib/parsers/SEquipmentParser";
let fengmap = null;
//// 底图空间增加字段 isExtracted:boolean true 已被提取过
export default {
    props: {
        cmdType: {
            type: String,
            default: "choice",
            required: false
        },
        changeTextMsg: {
            type: String,
            default: "",
            required: false
        }
    },
    data() {
        return {
            appName: "万达可视化系统",
            key: "23f30a832a862c58637a4aadbf50a566",
            mapServerURL: "http://map.wanda.cn/editor",
            canvasWidth: 700,
            canvasHeight: 800,
            fParser: null,
            scene: null,
            view: null,
            floorList: {},
            urlMsg: {},
            chiceItemList: [], //选中itemlist
            hasTypeList: [], // 当前类型下包含的typeid(提取)
            graphId: "",
            initScale: 1, //加载好底图之后的，初始缩放比例
            changeScaleByClick: false //区分 滚轮，点击 事件改变的缩放比例
        };
    },
    mounted() {
        this.canvasWidth = this.$refs.graphy.offsetWidth;
        this.canvasHeight = this.$refs.graphy.offsetHeight - 10;
        this.init();
        // 挂在bus
        this.getBus();
        store.dispatch("getElementType", { PageSize: 1000 });
        window.vm = this;
    },
    methods: {
        init() {
            document.getElementById(`canvas`).focus();
            this.clearGraphy();
            this.scene = new EditScence();
            this.view.scene = this.scene;
            this.view.fitSceneToView();
            this.scene.emitChange = this.emitChange;
            this.scene.scenceUpdate = this.scenceUpdate;
        },
        // 不适用平面图逻辑(调用蜂鸟接口,加载底图)
        init1() {
            const loadings = Loading.service({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            document.getElementById(`canvas`).focus();
            this.clearGraphy();
            this.scene = new EditScence();
            fengmap = new SFengParser("fengMap", this.mapServerURL + "/fmap/" + this.urlMsg.fmapID, this.key, this.appName, null);
            const floorid = this.urlMsg.FloorID;
            fengmap.loadMap(this.urlMsg.fmapID, resp => {
                this.floorList = resp;
                fengmap.loadTheme(`${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${this.urlMsg.fmapID}.theme`).then(response => {
                    console.log("获取rf成功", response);
                    this.parserData(floorid);
                    this.readGraph();
                    loadings.close();
                });
                this.view.fitSceneToView();
            });
            // 获取typeid
            this.getTypeId();
            this.scene.emitChange = this.emitChange;
            this.scene.scenceUpdate = this.scenceUpdate;
        },
        parserData(floor) {
            if (floor == "g80") {
                // 屋顶
                if (fengmap.frImg) {
                    const imgItem = new SImageItem(null, `${this.mapServerURL}/webtheme/${this.urlMsg.fmapID}/${fengmap.frImg}`);
                    this.scene.addItem(imgItem);
                    this.view.scene = this.scene;
                    this.view.fitSceneToView();
                    this.loading = false;
                    this.isQuerying = false;
                }
            } else {
                if (this.floorList[floor]) {
                    fengmap.parseData(this.floorList[floor], res => {
                        if (res.err) {
                            console.log(res.err);
                            return;
                        }
                        this.fParser = new SFloorParser(null);
                        this.fParser.parseData(res);
                        this.scene.fidToItem = {};
                        this.fParser.spaceList.forEach(t => {
                            t.zOrder = t.zOrder + t.data.Height;
                            t.selectable = true;
                            this.scene.fidToItem[t.data.SourceId] = t;
                            this.scene.addItem(t);
                        });
                        this.scene.spaceList = this.fParser.spaceList;
                        this.fParser.wallList.forEach(t => this.scene.addItem(t));
                        this.fParser.virtualWallList.forEach(t => this.scene.addItem(t));
                        this.fParser.doorList.forEach(t => this.scene.addItem(t));
                        this.fParser.columnList.forEach(t => this.scene.addItem(t));
                        this.fParser.casementList.forEach(t => this.scene.addItem(t));
                        this.view.scene = this.scene;
                        this.view.fitSceneToView();
                        this.loading = false;
                        this.isQuerying = false;
                        console.log("success");
                        // 设置初始化缩放比例
                        this.initScale = this.view.scale;
                        bus.$emit("initScale", this.view.scale);
                    });
                } else {
                    console.log("楼层不正确");
                }
            }
        },
        // 读取绘制数据
        readGraph() {
            this.readGroup().then(data => {
                this.graphId = data.Data[0].ID;
                bus.$emit("setGraphId", this.graphId);
                if (data.Data) {
                    const parserData = new STopologyParser(null);
                    parserData.parseData(data.Data[0].Elements);
                    // 多边形
                    parserData.zoneLegendList.forEach(t => {
                        this.scene.addItem(t);
                        // 记录提取
                        if (t.data.Properties && t.data.Properties.FID) {
                            this.scene.fidToItem[t.data.Properties.FID].isExtracted = true;
                        }
                        this.scene.Nodes.push(t);
                    });
                    // 增加文字
                    parserData.textMarkerList.forEach(t => {
                        this.scene.addItem(t);
                        this.scene.Markers.push(t);
                    });
                    // 增加图片
                    parserData.imageMarkerList.forEach(t => {
                        this.scene.addItem(t);
                        this.scene.Markers.push(t);
                    });
                    // 增加直线
                    parserData.lineMarkerList.forEach(t => {
                        this.scene.addItem(t);
                        this.scene.Markers.push(t);
                    });
                    // 增加图标类图例(此item需在管线item添加之前添加)
                    const ancToAnchor = {};
                    parserData.imageLegendList.forEach(t => {
                        this.scene.addItem(t);
                        this.scene.Nodes.push(t);
                        if (t.anchorList && t.anchorList.length) {
                            t.anchorList.forEach(anc => {
                                ancToAnchor[anc.id] = anc;
                            });
                        }
                    });
                    // 增加管线类(需在图标类图例添加后添加)
                    parserData.relationList.forEach(t => {
                        this.scene.addItem(t);
                        this.scene.Relations.push(t);
                        // 设置锚点
                        if (t.anchor1ID) {
                            const startAnc = ancToAnchor[t.anchor1ID];
                            startAnc.isConnected = true;
                            startAnc.parent?.connect("changePos", t, t.changePos);
                            t.startAnchor = startAnc || null;
                        }
                        if (t.anchor2ID) {
                            const endAnc = ancToAnchor[t.anchor2ID];
                            endAnc.isConnected = true;
                            endAnc.parent?.connect("changePos", t, t.changePos);
                            t.endAnchor = endAnc || null;
                        }
                    });
                    this.view.fitSceneToView();
                    bus.$emit("elementDataChange", this.scene);
                }
            });
        },
        // 监听变化
        emitChange(itemMsg) {
            this.chiceItemList = itemMsg.itemList;
            this.$emit("changeFocusItem", itemMsg);
            bus.$emit("FocusItemChanged", itemMsg);
        },
        // 监听场景元素数据变化
        scenceUpdate(scence) {
            bus.$emit("elementDataChange", scence);
        },
        clearGraphy() {
            if (this.view) {
                this.view.scene = null;
                return;
            }
            this.view = new FloorView("canvas");
            document.getElementById("canvas").focus();
        },
        getBus() {
            // 添加设备
            bus.$on("addEquip", () => {
                console.log(11111);
                // console.log("addEquip");
                console.log("get bus addEquip");
                console.log(event);
                const parserData = new SEquipmentParser(null);
                //  14d978b7edd346f088d6cfb53ada4070`;  //冷冻泵
                //  4fde075cdafe4e4ea46e876276feab9d`;  //水冷螺杆机组
                //  4aa6051e025d4193a776a5b2d2604ed8 //冷却塔1
                //  ece9f93ffc754035bcec2e8f27d66a59 //冷却塔2
                let Nodes = [
                    {
                        ID: "123123", // ID
                        Name: "1#冷冻泵", // 名称
                        AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
                        Pos: { X: 170, Y: 188 }, // 位置
                        Size: { Width: 80, Height: 80 }, // 大小
                        InfoList: [
                            {
                                Code: "", // 对应设备的信息点
                                Name: "温度", //信息点名称
                                X: 30,
                                Y: 20,
                                Width: 100,
                                Height: 25,
                                FontSize: 12,
                                Background: "#ffffff",
                                TextAlign: "",
                                Color: "#000000"
                            },
                            {
                                Code: "", // 对应设备的信息点
                                Name: "湿度", //信息点名称
                                X: 40,
                                Y: 28,
                                Width: 100,
                                Height: 25,
                                FontSize: 12,
                                Background: "#ffffff",
                                TextAlign: "",
                                Color: "#000000"
                            }
                        ],
                        Properties: {
                            StatusImage: [
                                {
                                    Status: "Running", // 运行
                                    ImageKey: "14d978b7edd346f088d6cfb53ada4070"
                                },
                                {
                                    Status: "Stop", // 停止
                                    ImageKey: "4aa6051e025d4193a776a5b2d2604ed8"
                                },
                                {
                                    Status: "Selected", // 选择
                                    ImageKey: "ece9f93ffc754035bcec2e8f27d66a59"
                                },
                                {
                                    Status: "Warning", // 报警
                                    ImageKey: ""
                                }
                            ]
                        } // 由应用自己定义
                    },
                    {
                        ID: "34535345", // ID
                        Name: "2#冷冻泵", // 名称
                        AttachObjectIds: ["Eq001", "Eq002"], // 返回工程信息化对象 ID 列表
                        Pos: { X: 177, Y: 288 },
                        Size: { Width: 80, Height: 80 }, // 大小
                        InfoList: [
                            {
                                Code: "", // 对应设备的信息点
                                Name: "温度", //信息点名称
                                X: 50,
                                Y: 50,
                                Width: 100,
                                Height: 25,
                                FontSize: 12,
                                Background: "#000000",
                                TextAlign: "",
                                Color: "#FFFFFF"
                            }
                        ],
                        Properties: {
                            StatusImage: [
                                {
                                    Status: "Running", // 运行
                                    ImageKey: "4fde075cdafe4e4ea46e876276feab9d"
                                }
                            ]
                        } // 由应用自己定义
                    }
                ];
                parserData.parseData(Nodes);
                parserData.equipmentItem.map(item => {
                    item.selectable = true;
                    this.scene.addItem(item);
                    this.scene.equipmentItem.push(item);
                });
                window.vm = this;
                // this.scene.addEquipment(event);
            });
            // TODO: 修改底图
            bus.$on("changeImgUrl", val => {
                window.vm = this;
                let url = "/serve/topology-wanda/Picture/query/" + val;
                console.log(url);
                this.scene.setBackgroundImgItem(url);
                // 通过监听 scene.bgImg来适配到页面上
                // this.view.fitSceneToView();
            });
            bus.$on("changeText", val => {
                this.scene.updatedText(val);
            });
            bus.$on("changeFont", val => {
                this.scene.updatedFontSize(val);
            });
            bus.$on("changeLineWidth", val => {
                this.scene.updatedLineWidth(val);
            });
            bus.$on("changeBorderColor", val => {
                this.scene.updatedBorderColor(val);
            });
            bus.$on("changeFontColor", val => {
                this.scene.updatedFontColor(val);
            });
            bus.$on("itemWidth", val => {
                this.scene.updatedWidth(Number(val));
            });
            bus.$on("itemHeight", val => {
                this.scene.updatedHeight(Number(val));
            });
            bus.$on("itemPositon", (x, y) => {
                this.scene.updatedPosition(Number(x), Number(y));
            });
            bus.$on("changebackColor", val => {
                this.scene.updatedbackColor(val);
            });
            bus.$on("deleiteItem", () => {
                this.scene.deleiteItem();
            });
            bus.$on("changeAlignItem", val => {
                this.scene.changeAlignItem(val);
            });
            bus.$on("extractItem", () => {
                const map = {};
                console.log(this.hasTypeList);
                this.fParser.spaceList.forEach(t => {
                    if (this.hasTypeList.indexOf(t.data.Type) > -1) {
                        if (map[t.data.Type]) {
                            map[t.data.Type]++;
                        } else {
                            map[t.data.Type] = 1;
                        }
                    }
                });
                const data = [];
                for (const key in map) {
                    data.push({
                        key: key,
                        name: key,
                        age: "",
                        number: map[key],
                        address: "提取"
                    });
                }
                bus.$emit("exportItem", data);
            });
            bus.$on("saveMsgItem", () => {
                const Elements = this.scene.saveMsgItem();
                const data = {
                    Elements,
                    Name: this.appName, // 名称
                    categoryId: this.urlMsg.categoryId,
                    ProjectID: this.urlMsg.projectId, // 项目ID
                    BuildingID: this.urlMsg.BuildingID, // 建筑ID
                    FloorID: this.urlMsg.FloorID // 楼层id
                };
                Message({
                    message: "上传中，切勿关闭窗口！",
                    type: "warning"
                });
                console.log("%c========", "color:blue");
                console.log(data);
                return true;
                saveGroup(data)
                    .then(res => {
                        Message.close();
                        this.graphId = res.Data;
                    })
                    .catch(err => {});
            });
            bus.$on("exportByKey", val => {
                const list = this.fParser.spaceList
                    .map(t => {
                        if (t.data.Type == val.key) {
                            if (!t.isExtracted) {
                                t.isExtracted = true;
                                return {
                                    ID: uuid(),
                                    Name: val.name,
                                    GraphElementType: val.properties.Type,
                                    GraphElementId: "273d633cc5c54a4882794b34843d1a00",
                                    AttachObjectIds: [],
                                    Pos: { x: t.x, y: t.y },
                                    OutLine: t.pointArr[0],
                                    SubType: "",
                                    Properties: {
                                        StrokeColor: "#3d73c0",
                                        FillColor: "#72f5f980",
                                        font: 0,
                                        color: "",
                                        TextPos: { X: 0, Y: 0 }
                                    },
                                    Num: 1
                                };
                            }
                        }
                    })
                    .filter(item => item);
                const parserData = new STopologyParser(null);
                parserData.parseData({ Nodes: list });
                parserData.zoneLegendList.forEach(t => {
                    this.scene.addItem(t);
                    this.scene.Nodes.push(t);
                });
            });
            // 设备图例样式对象
            bus.$on("setLenged", obj => {
                this.scene.setlegend = obj;
            });
            //  修改图片url
            bus.$on("upadataImageUrl", val => {
                console.log(val);
                this.scene.upadataImageUrl(val);
            });
            // 改变边框样式
            bus.$on("changeBorder", val => {
                this.scene.upadataBorder(val);
            });
            // 改变图例名称
            bus.$on("changeLengedName", val => {
                this.scene.upadataLengedName(val);
            });
            // 改变图例名称
            bus.$on("changeImageNum", val => {
                this.scene.upadatImageNum(val);
            });
            // 修改填充色
            bus.$on("changefillColor", val => {
                this.scene.upadatfillColor(val);
            });
            // 修改当前得状态是否为编辑状态
            bus.$on("OpenEditStatus", () => {
                ` `; // 获取焦点item (必须选中且仅选中一个)
                if (this.chiceItemList && this.chiceItemList.length && this.chiceItemList.length == 1) {
                    if (this.scene.grabItem) {
                        this.view.tryDbclick();
                    } else {
                        this.scene.grabItem = this.chiceItemList[0];
                        this.view.tryDbclick();
                    }
                }
            });
            //修改图例说明
            bus.$on("changeitemExplain", val => {
                this.scene.upadatitemExplain(val);
            });
            //发布图
            bus.$on("publishGraph", val => {
                publishGraph({ graphId: this.graphId, pubUser: "" }).then(res => {
                    if (res.Result == "success") {
                        this.$message.success(res.Message);
                    } else {
                        this.$message.error(res.Message);
                    }
                });
            });
            //创建区域是否点选
            bus.$on("changeDrawType", val => {
                this.scene.isSelecting = val == "select";
            }),
                //发布图
                bus.$on("publishMap", () => {
                    if (this.graphId == "") {
                        this.$message.error("请先保存");
                        return false;
                    }
                    this.publishBtn();
                });
            /**
             * @name changeScale缩放底图
             * @param { Number } zoom 缩放比例
             *
             */
            // TODO: changeScale缩放底图
            bus.$on("changeScale", zoom => {
                const { scale } = this.view;
                this.changeScaleByClick = true;
                this.view.scaleByPoint(zoom, this.canvasWidth / 2, this.canvasHeight / 2);
                this.changeScaleByClick = false;
                setTimeout(() => {}, 100);
            });
            // 更改图例数据工程化数据
            bus.$on("changeAttachObjectIds", arr => {
                this.scene.upadatAttachObjectIds(arr);
            });
        },
        // 读取数据
        readGroup() {
            const data = {
                categoryId: this.urlMsg.categoryId,
                projectId: this.urlMsg.projectId,
                BuildingID: this.urlMsg.BuildingID, // 建筑ID
                FloorID: this.urlMsg.FloorID // 楼层id
            };
            return readGroup(data);
        },
        //发布
        publishBtn() {
            console.log(this.graphId);
            const loadings = Loading.service({
                lock: true,
                text: "Loading",
                spinner: "el-icon-loading",
                background: "rgba(0, 0, 0, 0.7)"
            });
            const data = {
                BuildingID: this.urlMsg.BuildingID,
                CategoryID: this.urlMsg.categoryId,
                FloorID: this.urlMsg.FloorID,
                GraphId: this.graphId,
                ProjectID: this.urlMsg.projectId,
                PubUser: ""
            };
            publishGraph(data).then(res => {
                loadings.close();
                if (res.Result == "success") {
                    this.$message.success("发布成功");
                    setTimeout(() => {
                        const data = `categoryId=${this.urlMsg.categoryId}&projectId=${this.urlMsg.projectId}&BuildingID=${this.urlMsg.BuildingID}&FloorID=${this.urlMsg.FloorID}&fmapID=${this.urlMsg.fmapID}`;
                        const url = window.location.origin + "/wandaEditer/drafts?" + encodeURIComponent(data);
                        window.open(url, true);
                    }, 1000);
                } else {
                    this.$message.error(res.Message);
                }
            });
        },
        // 获取typeid
        getTypeId() {
            const data = {
                categoryId: this.urlMsg.categoryId
            };
            queryTypeGraph(data).then(res => {
                this.hasTypeList = res.Data.map(t => Number(t));
            });
        }
    },
    watch: {
        cmdType: {
            handler(cmd) {
                if (cmd == null || cmd == "") {
                    cmd = "choice";
                }
                this.scene.setCmd = cmd;
            },
            deep: true
        },
        "scene.cmd": {
            handler(cmd) {
                this.$emit("setCmdType", cmd);
            },
            deep: true
        },
        // 背景图加载完成后,屏幕适配
        "scene.bgImg": {
            handler(v) {
                this.view.fitSceneToView();
            }
        },
        // 监听scale的变化
        "view.scale": {
            handler(scale) {
                // 滚轮触发的缩放
                if (!this.changeScaleByClick) {
                    bus.$emit("mouseScale", scale / this.initScale);
                }
            }
        }
    },
    created() {
        const href = window.location.href;
        // 路由
        // const route = href.split("?")[0];
        // 参数处理
        let params = href.split("?")[1];
        if (!params) {
            // 参数有问题
            return false;
        }
        params = decodeURIComponent(params);
        // params = "categoryId=NTXT&ProjectID=5&BuildingID=1&FloorID=1"; // mock 参数
        const paramsArr = params.split("&");
        console.log("paramsArr", paramsArr);
        const obj = {};
        paramsArr.map(item => {
            const arr = item.split("=");
            obj[arr[0]] = arr[1];
        });
        this.urlMsg = obj;
    }
};
</script>
<style lang="less" scoped>
#baseEditer {
    background: #f7f9fa;
    width: 100%;
    height: 100%;
    // overflow: hidden;
    // position: relative;
    #fengMap {
        position: absolute;
        width: 100px;
        height: 100px;
        z-index: -1;
    }
    .canvas-container {
        width: 100%;
        height: 100%;
    }
}
</style>