<template>
    <div class="junbiao3d" ref="junbiao3d">
        <div class="box" v-draggable>
            <div class="boxHeader nav">
                <span></span>
                <span class="title">三维军标</span>
                <span class="closeBox">
                    <span @click="close">✕</span>
                </span>
            </div>
            <div class="boxBody">
                <div class="contentBox">
                    <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                        <template v-for="item in tabs">
                            <el-tab-pane :label="item.label" :name="item.key">
                                <div class="imgItemBox custom_scroll_bar">
                                    <div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
                                        <img :src="item.url" alt="" :title="item.name">
                                    </div>
                                </div>
                            </el-tab-pane>
                        </template>
</el-tabs> -->
                    <template v-for="item in tabs">
                        <div class="imgItemBox custom_scroll_bar">
                            <div class="imgItem" v-for="item in iconList[item.key]" @click="selectImg(item)">
                                <div class="imgBox">
                                    <img :src="item.url" alt="" :title="item.name">
                                    <div class="label">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </template>

                </div>
            </div>
        </div>

    </div>
</template>

<script>
import { getSelectedNode, getNodeData, cusAddNodes, cusRenderNode, nodeType } from "@/components/Tree/treeNode";
import { addSource, delSource } from "@/api/gisAPI";
import { getGraphLabelType } from "../../api/gisAPI";
import { getIP } from "../../utils";
import { leftClick, rightClick, tileClick, vrLeftClick } from "../Tree/entityClick";
export default {
    name: "junbiao",
    data() {
        return {
            yuanshishuju: [],
            allGraphLabels: [],
            graphLabelTypeList: [],
            graphLabelProps: {
                id: 'type_id',
                children: 'sonNode',
                label: 'type_name'
            },
            graphLabelDataMaps: new Map(),
            graphTableData: [],
            filterText: "",
            selectedGraphLabelType: "",

            tabs: [],
            treeObj: null,

            activeName: "",

            iconList: {}
        }
    },
    watch: {
        /*  filterText(val) {
            if (!val)
              this.$refs.myTree.filter(val);
          }*/
    },
    methods: {
        searchContent(val) {
            /* if (key == 'type') {
               this.$refs.myTree.filter(val);
               if (!val) {
                 let arr = this.graphLabelTypeList.filter(item => {
                   return item.type_id == this.selectedGraphLabelType
                 })
                 console.log(arr)
                 if (arr.length)
                   this.graphTableData = arr[0].children
               }
             } else {*/
            console.log("搜索值", val)
            if (val) {
                this.graphTableData = this.allGraphLabels
                this.graphTableData = this.graphTableData.filter((item) => {
                    return item.name.indexOf(val) !== -1;
                })
            } else {
                console.log(this.graphLabelTypeList)
                console.log(this.graphLabelDataMaps)
                if (this.selectedGraphLabelType) {
                    this.yuanshishuju.forEach(item => {
                        if (this.selectedGraphLabelType == item.type_id) {
                            this.graphTableData = []
                            if (item.children)
                                this.graphTableData = item.children
                            console.log('this.graphTableDatathis.graphTableDatathis.graphTableData', this.graphTableData);
                        }
                    })

                } else {
                    this.graphTableData = []
                }

            }
            // }
        },
        handleClick() {
        },
        selectImg({ key, url, name, glbUrl }) {
            let jun_biao_id = "03826cc9d84e13cb404745ebd5b3963e"
            console.log('glbUrlglbUrlglbUrl', glbUrl);
            //jun_biao_id: "67bee03d6370434d7e98bcda940e67e7"
            // name: "a常用new_37 (23)"
            //  p_id: "8277e0910d750195b448797616e091ad"
            // url: "http://localhost:8890/yjearth4.0/api/v1/junbiao_2d/static/67bee03d6370434d7e98bcda940e67e7"
            this.close()
            let selectedNode = getSelectedNode(this.treeObj);
            new YJ.Draw.DrawPoint(window.Earth1).start(async (err, position) => {
                if (err == null || err != false) {
                    let source_id = this.$md5(new Date().getTime() + name);
                    let p_id = selectedNode
                        ? nodeType[selectedNode.source_type].allowChildren
                            ? selectedNode.source_id
                            : selectedNode.p_id
                        : -1;
                    let DbOption = {
                        source_id,
                        source_name: name,
                        source_type: "model",
                        p_id,
                    };

                    let option = {
                        id: source_id,
                        position,
                        name: name,
                        show: true,
                        scale: 1,
                        url: glbUrl,
                        maximumScale: 1,
                        host: getIP(),
                        isJunBiao: true
                    };
                    let Model = await new YJ.Obj.Model(window.Earth1, option)
                    window._entityMap.set(option.id, Model)
                    Model.onClick = () => {
                        leftClick(node)
                    }
                    let detailOption = JSON.parse(JSON.stringify(Model.options))
                    detailOption.url = glbUrl
                    let node = getNodeData(DbOption, detailOption)
                    let detail = JSON.parse(node.detail)
                    detail.isJunBiao = true
                    node.detail = JSON.stringify(detail)
                    addSource(node).then((res) => {
                        if ([0, 200].includes(res.code)) {
                            // cusRenderNode(DbOption)
                            //  DbOption.p_id
                            cusAddNodes(this.treeObj,jun_biao_id, [node])
                        }
                    });
                }
            });
        },
        close() {
            console.log("close")
            this.$changeComponentShow(".junbiao3dBox", false)
            // this.$changeComponentShow("#modal", false)
        },
        open() {
            this.tabs = []
            this.iconList = {};
            let dirObj = {
                dirName: "junbiao_3d/img",
            }
            for (const dirObjElement in dirObj) {
                this.tabs.push({
                    label: dirObj[dirObjElement] == 'junbiao_3d/img' ? "三维军标" : "其他军标",
                    key: dirObj[dirObjElement],
                    icons: []
                })
            }
            this.activeName = this.tabs[0].key
            console.log(this.tabs, "this.tabsthis.tabsthis.tabs");

            // $changeComponentShow("#modal", true)
            this.$sendElectronChanel("requireGEMarkerName", dirObj)
            this.$recvElectronChanel("dirFiles", (e, res) => {
                for (const resKey in res) {
                    res[resKey].forEach((item, index) => {
                        let arr = item.split('/')
                        console.log(arr);
                        let obj = {
                            name: arr[arr.length - 1].split(".")[0],
                            url: "http://localhost:" + window.staticPort + "/" + item,
                            key: item,
                            glbUrl: "http://localhost:" + window.staticPort + "/" + arr[0] + "/glb/" + arr[arr.length - 1].split(".")[0] + ".glb"
                        }
                        res[resKey][index] = obj
                    })
                }
                this.iconList = res
                // window.$root_home_index.$refs.selectImg.init(res, selected)
            })
        }
    },
    mounted() {
        this.$recvChanel("getTreeObj", (treeObj) => {
            console.log(treeObj)
            this.treeObj = treeObj
            this.$removeChanel("getTreeObj")
        })
    },
}
</script>

<style lang="scss">
.junbiao3d {
    user-select: none;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;


    .box {
        width: 30vw;
        height: 23vw;
        display: flex;
        flex-direction: column;
        position: absolute;
        left: 50%;
        top: 45%;
        transform: translate(-50%, -50%);
        background: linear-gradient(180deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 255, 255, 0) 100%), rgba(0, 0, 0, 0.6);
        padding: 10px;
        border: 1.5px solid rgba(0, 255, 255, 1);
        box-sizing: border-box;


        .boxHeader {
            display: flex;
            justify-content: flex-start;
            color: #fff;

            font-size: 18px;
            padding: .5vh 0;

            .title {
                width: 100%;
                height: 30px;
                text-shadow: 0px 0px 9px rgba(20, 118, 255, 1);
                font-family: 'alimamashuheiti';
            }

            i {
                cursor: pointer;
            }

            .closeBox {
                right: 0;
                top: -1px;
                position: absolute;
                display: inline-block;
                width: 28px;
                height: 26px;
                border-radius: 0 0 0 90%;
                background: #00ffff8f;

                &>span {
                    font-size: 18px;
                    position: absolute;
                    right: 5px;
                    cursor: pointer;
                }
            }
        }

        .boxBody {
            overflow-y: scroll;
            flex: auto;
            flex-direction: column;
            display: flex;
            flex-wrap: wrap;

            .contentBox {
                width: 100%;
                flex: auto;
                display: flex;
            }

            .typeBox {
                &>div {
                    height: 340px;
                    overflow-y: auto;
                }

                width: 150px;
            }

            .imgItemBox {
                display: flex;
                flex-wrap: wrap;
                //justify-content: space-between;
                overflow-y: auto;
            }

            .imgItem {
                display: flex;
                flex-direction: column;
                align-self: center;
                text-align: center;
                border: 1px solid transparent;
                width: 20%;

                //height: 100px;
                .imgBox {
                    img {
                        width: 80px;
                        align-self: center;
                    }
                }


                &:hover {
                    cursor: pointer;

                    // & {
                    //     border-color: red;
                    // }
                }

                .label {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    color: #fff;
                }
            }
        }

        .boxBody::-webkit-scrollbar {
            width: 6px;
        }

        .boxBody::-webkit-scrollbar-thumb {
            background-color: #00ffff;
            border-radius: 5px;
        }

        .boxBody::-webkit-scrollbar-track {
            background-color: #fff;
            border-radius: 5px;
        }
    }

    .el-tree-node__label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

}
</style>