<template>
    <div class="h100 steps4">
        <div class="btns-view">
            <el-button @click="checkedAll">获取展开点位数据</el-button>
            <el-button @click="clickTabs">获取全部点位数据</el-button>
        </div>
        <div class="center point-border">
            <el-radio-group v-model="activeIndex" @change="clickTabs">
                <el-radio-button label="0">从物理世界角度检查</el-radio-button>
                <el-radio-button label="1">从原始点位表角度检查</el-radio-button>
            </el-radio-group>
        </div>
        <div class="jsmind-container" v-show="activeIndex == 0">
            <js-mind-component ref="jsmind"></js-mind-component>
        </div>
        <div class="jsmind-container" v-show="activeIndex == 1">
            <js-mind-component ref="jsmind1"></js-mind-component>
        </div>
        <!-- <el-tabs type="border-card" @tab-click="clickTabs" class="tabs-h" tab-position="bottom">
                    <el-tab-pane>
                        <span slot="label">
                                从物理世界角度检查
                            </span>
                        
                    </el-tab-pane>
                    <el-tab-pane class="h100" label="从原始点位表角度检查">
                        <js-mind-component ref="jsmind1" @openNode="openNode"></js-mind-component>
                    </el-tab-pane>
                </el-tabs> -->
    </div>
</template>
<script>
    import {
        mapGetters,
        mapActions
    } from "vuex";
    import jsMindComponent from "@/components/common/jsmind"
    import {
        queryAllRela,
        platformEqJsMind,
        platformIdentJsMind,
        platformInfoJsMind,
        platformPointJsMind,
        queryAllPointRela,
        pointPostJsMind,
        pointInfoJsMind,
        pointTypeJsMind,
    } from "@/fetch/point_http"
    export default {
        name: "steps4",
        data() {
            return {
                jsMind: "",
                activeIndex: 0,
                mindArr: []
            }
        },
        computed: {
            ...mapGetters("project", [
                "datasourceId",
                "protocolType",
                "dataName"
            ]),
            projectId () {
                return this.$store.getters['layout/projectId']
            }
        },
        created() {},
        mounted() {
            this.clickTabs({
                index: this.activeIndex
            })
        },
        methods: {
            checkedAll() {
                this.mindArr[this.activeIndex].expand_all()
            },
            //节点选中事件
            // async openNode(node) {
            //     //次级列表children,自定义id ownId,请求参数,请求函数ajaxFun,显示子集的文案text,子集的data
            //     let children, ownId, param, ajaxFun, text, nodeOwnData;
            //     this.jsMind.options.editable = true
            //     console.log(node.data)
            //     //删除已有的假节点
            //     this.removeNode(node, this.jsMind)
            //     if (!!node.data && node.data.pointType == "system") {
            //         //系统级
            //         param = {
            //             DataSourceId: this.datasourceId,
            //             PhysicalSystem: node.data.name
            //         }
            //         ajaxFun = this.activeIndex == 0 ? platformEqJsMind : pointTypeJsMind
            //         console.log(ajaxFun)
            //         children = await this.getList(param, ajaxFun)
            //         console.log(children)
            //         children.map(item => {
            //             text = item.EquipmentType || `${item.Description}(${item.Address})`
            //             nodeOwnData = {
            //                 pointType: "eq",
            //                 name: item.EquipmentType || item.Description,
            //                 systemName: node.data.name
            //             }
            //             ownId = this.createRandomId()
            //             this.jsMind.add_node(node, ownId, text, nodeOwnData)
            //             this.addNodeDefault(ownId)
            //         })
            //     }
            //     if (!!node.data && node.data.pointType == "eq") {
            //         //标识级
            //         param = {
            //             DataSourceId: this.datasourceId,
            //             EquipmentType: node.data.name,
            //             PhysicalSystem: node.data.systemName
            //         }
            //         ajaxFun = this.activeIndex == 0 ? platformIdentJsMind : pointPostJsMind
            //         children = await this.getList(param, ajaxFun)
            //         if (!children) {
            //             return false
            //         }
            //         console.log(children)
            //         children.map(item => {
            //             text = this.activeIndex == 0 ? item.DataQuality + item.EquipmentMark : `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
            //             nodeOwnData = {
            //                 pointType: "ident",
            //                 name: this.activeIndex == 0 ? item.EquipmentMark : item.Description,
            //                 systemName: node.data.systemName,
            //                 EquipmentType: node.data.name
            //             }
            //             console.log(text, nodeOwnData)
            //             ownId = this.createRandomId()
            //             this.jsMind.add_node(node, ownId, text, nodeOwnData)
            //             this.addNodeDefault(ownId)
            //         })
            //     }
            //     if (!!node.data && node.data.pointType == "ident") {
            //         //信息级
            //         param = {
            //             DataSourceId: this.datasourceId,
            //             EquipmentType: node.data.EquipmentType,
            //             PhysicalSystem: node.data.systemName,
            //             [this.activeIndex == 0 ? "EquipmentMark" : "Description"]: node.data.name
            //         }
            //         ajaxFun = this.activeIndex == 0 ? platformInfoJsMind : pointInfoJsMind
            //         children = await this.getList(param, ajaxFun)
            //         if (!children) {
            //             return false
            //         }
            //         console.log(children)
            //         children.map(item => {
            //             ownId = this.createRandomId()
            //             text = `${item.InfomationPoint}(${item.MeterFunc}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`
            //             nodeOwnData = {
            //                 pointType: "point",
            //                 InfomationPoint: item.InfomationPoint,
            //                 EquipmentMark: node.data.name,
            //                 systemName: node.data.systemName,
            //                 EquipmentType: node.data.EquipmentType
            //             }
            //             this.jsMind.add_node(node, ownId, text, nodeOwnData)
            //             if (this.activeIndex == 0) {
            //                 console.log(111)
            //                 this.addNodeDefault(ownId)
            //             }
            //         })
            //     }
            //     if (!!node.data && node.data.pointType == "point") {
            //         //信息级
            //         children = await this.getList({
            //             DataSourceId: this.datasourceId,
            //             EquipmentType: node.data.EquipmentType,
            //             PhysicalSystem: node.data.systemName,
            //             EquipmentMark: node.data.EquipmentMark,
            //             InfomationPoint: node.data.InfomationPoint
            //         }, platformPointJsMind)
            //         if (!children) {
            //             return false
            //         }
            //         console.log(children)
            //         children.map(item => {
            //             ownId = this.createRandomId()
            //             this.jsMind.add_node(node, ownId, `${item.Description}(${item.Address}):${item.Data.Data}-${item.Data.Unit}-${item.Data.Time}`, {
            //                 pointType: "point",
            //                 InfomationPoint: item.InfomationPoint,
            //                 EquipmentMark: node.data.name,
            //                 systemName: node.data.systemName,
            //                 EquipmentType: node.data.EquipmentType
            //             })
            //         })
            //     }
            // },
            //统一添加默认级数
            addNodeDefault(ownId) {
                //给下一级添加默认的级数
                this.jsMind.add_node(ownId, this.createRandomId(), "")
                //收起该节点下的子节点
                this.jsMind.collapse_node(ownId)
            },
            /**
             * 删除某个节点下所有的节点
             * @param {该节点} node
             * @param {jsmind实例} jsmind
             */
            removeNode(node, jsmind) {
                if (!!node.children) {
                    node.children.map(item => {
                        this.jsMind.remove_node(item)
                    })
                }
            },
            //获取接口封装
            getList(param, fun) {
                return new Promise((resolve, reject) => {
                    fun(
                        param,
                        res => {
                            console.log(res)
                            resolve(res.Content)
                        }
                    )
                })
            },
            clickTabs(val) {
                this.activeIndex = this.activeIndex
                var data = {
                        id: "root",
                        topic: this.dataName,
                        children: []
                    },
                    mind = {
                        /* 元数据，定义思维导图的名称、作者、版本等信息 */
                        meta: {
                            name: "jsMind-demo-tree",
                            author: "sagacloud",
                            version: "0.2"
                        },
                        /* 数据格式声明 */
                        format: "node_tree",
                        /* 数据内容 */
                        data: data
                    },
                    id, func;
                func = this.activeIndex == 0 ? queryAllRela : queryAllPointRela
                func({
                    DataSourceId: this.datasourceId
                }, res => {
                    console.log(res)
                    data.children = res.Content.map(item => {
                        id = this.createRandomId();
                        return {
                            id: id,
                            topic: `${item.SpecialtySystem}(${item.PointCount})`,
                            expanded: false,
                            pointType: "system",
                            name: item.SpecialtySystem,
                            // children: [{
                            //     id: this.createRandomId()
                            // }]
                        }
                    })
                    console.log(data, "data")
                    this.$nextTick(_ => {
                        if (!!this.mindArr[this.activeIndex]) {
                            this.jsMind = this.mindArr[this.activeIndex]
                            return false
                        }
                        // console.log(val.index, this.$refs.jsmind, this.$refs.jsmind1)
                        if (this.activeIndex == 0) {
                            data.children = this.delPlatform(res.Content)
                            console.log(data.children)
                            this.jsMind = this.$refs.jsmind.initData({}, mind)
                        } else {
                            data.children = this.delPoint(res.Content)
                            console.log(data.children)
                            this.jsMind = this.$refs.jsmind1.initData({}, mind)
                        }
                        this.mindArr[this.activeIndex] = this.jsMind
                        this.setBgColor([data], this.jsMind)
                        this.jsMind.options.editable = false
                    })
                })
            },
            delPlatform(arr) {
                return arr.map(item => {
                    if (item.hasOwnProperty('EquipmentTypeList')) {
                        let obj = {
                            id: this.createRandomId(),
                            topic: `${item.SpecialtySystem}(${item.PointCount})`,
                            expanded: false,
                            DataQuality: item.DataQuality
                        }
                        if (item.hasOwnProperty("EquipmentTypeList")) {
                            obj.children = []
                            obj.children = item.EquipmentTypeList.map(child => {
                                let obj1 = {
                                    id: this.createRandomId(),
                                    topic: `${child.EquipmentType}`,
                                    children: [],
                                    expanded: false,
                                    DataQuality: child.DataQuality
                                }
                                if (child.hasOwnProperty("EquipmentMarkList")) {
                                    child.EquipmentMarkList.map(node => {
                                        let obj2 = {
                                            id: this.createRandomId(),
                                            topic: `${node.EquipmentMark}`,
                                            expanded: false,
                                            children: [],
                                            DataQuality: node.DataQuality
                                        }
                                        if (node.hasOwnProperty("InfoList")) {
                                            node.InfoList.map(node1 => {
                                                let obj3 = {
                                                    id: this.createRandomId(),
                                                    expanded: false,
                                                    topic: `${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
                                                    children: [],
                                                    DataQuality: node1.DataQuality
                                                }
                                                if (node1.hasOwnProperty("PointList")) {
                                                    node1.PointList.map(node2 => {
                                                        let obj4 = {
                                                            id: this.createRandomId(),
                                                            DataQuality: node2.DataQuality,
                                                            topic: `${node2.Description}(${node2.Address}):${node2.Data.Time}-${node2.Data.Data}-${node2.Data.Unit}`,
                                                        }
                                                        obj3.children.push(obj4)
                                                    })
                                                }
                                                obj2.children.push(obj3)
                                            })
                                        }
                                        obj1.children.push(obj2)
                                    })
                                }
                                return obj1
                            })
                        }
                        return obj
                    }
                    if (item.hasOwnProperty("CheckTodos")) {
                        let obj = {
                            id: this.createRandomId(),
                            topic: `${item.SpecialtySystem}(${item.PointCount})`,
                            expanded: false,
                            DataQuality: item.DataQuality,
                            children: []
                        }
                        obj.children = item.CheckTodos.map(node => {
                            return {
                                id: this.createRandomId(),
                                topic: `${node.Description}(${node.Address})`,
                                DataQuality: node.DataQuality
                            }
                        })
                        return obj
                    }
                })
            },
            setBgColor(data, jm) {
                data.map(item => {
                    if (item.DataQuality) {
                        jm.set_node_color(item.id, "#e6a23c", "#fff")
                    }
                    if (item.children && item.children.length) {
                        this.setBgColor(item.children, jm)
                    }
                })
            },
            changeData(arr) {
                console.log(arr)
                if (arr && arr instanceof Array) {
                    return arr.map(item => {
                        if (item.children && item.children.length) {
                            return {
                                id: item.id,
                                topic: item.topic,
                                expanded: item.expanded,
                                children: this.changeData(item.children),
                                theme: item.DataQuality ? "orange" : "greensea"
                            };
                        } else {
                            return {
                                id: item.id,
                                expanded: item.expanded,
                                topic: item.topic,
                                theme: item.DataQuality ? "orange" : "greensea"
                            };
                        }
                    });
                } else {
                    return {
                        id: "root",
                        topic: arr.topic,
                        children: this.changeData(arr.children)
                    };
                }
            },
            delPoint(arr) {
                return arr.map(item => {
                    if (item.hasOwnProperty('EquipmentTypeList')) {
                        let obj = {
                            id: this.createRandomId(),
                            topic: `${item.SpecialtySystem}(${item.PointCount})`,
                            expanded: false,
                            DataQuality: item.DataQuality
                        }
                        if (item.hasOwnProperty("EquipmentTypeList")) {
                            obj.children = []
                            obj.children = item.EquipmentTypeList.map(child => {
                                let obj1 = {
                                    id: this.createRandomId(),
                                    topic: `${child.EquipmentType}`,
                                    children: [],
                                    expanded: false,
                                    DataQuality: item.DataQuality
                                }
                                if (child.hasOwnProperty("OriginalPointList")) {
                                    child.OriginalPointList.map(node => {
                                        let obj2 = {
                                            id: this.createRandomId(),
                                            topic: `${node.Description}(${node.Address}):${node.Data.Time}-${node.Data.Data}-${node.Data.Unit}`,
                                            expanded: false,
                                            children: [],
                                            DataQuality: item.DataQuality
                                        }
                                        if (node.hasOwnProperty("InfoList")) {
                                            node.InfoList.map(node1 => {
                                                let obj3 = {
                                                    id: this.createRandomId(),
                                                    expanded: false,
                                                    topic: `${node1.EquipmentMark}-${node1.InfomationPoint}(${node1.MeterFunc}):${node1.Data.Time}-${node1.Data.Data}-${node1.Data.Unit}`,
                                                    children: [],
                                                    DataQuality: item.DataQuality
                                                }
                                                obj2.children.push(obj3)
                                            })
                                        }
                                        obj1.children.push(obj2)
                                    })
                                }
                                return obj1
                            })
                        }
                        return obj
                    }
                    if (item.hasOwnProperty("CheckTodos")) {
                        let obj = {
                            id: this.createRandomId(),
                            topic: `${item.SpecialtySystem}(${item.PointCount})`,
                            expanded: false,
                            children: [],
                            DataQuality: item.DataQuality
                        }
                        obj.children = item.CheckTodos.map(node => {
                            return {
                                id: this.createRandomId(),
                                topic: `${node.Description}(${node.Address})`,
                                DataQuality: item.DataQuality
                            }
                        })
                        return obj
                    }
                })
            },
            createRandomId() {
                return (Math.random() * 10000000).toString(16).substr(0, 4) + '-' + (new Date()).getTime() + '-' + Math.random().toString().substr(2, 5);
            }
        },
        components: {
            jsMindComponent
        }
    }
</script>
<style lang="scss">
    .steps4 {
        flex: 1;
        display: flex;
        flex-flow: column;
        .btns-view {
            height: 40px;
            line-height: 40px;
            margin-bottom: 10px;
            text-align: right;
            padding: 0 10px;
        }
        .point-border {}
        .jsmind-container {
            flex: 1;
        }
    }
</style>