import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Gallery
import "../component"
import "../dataconnect"
import "../component/window"
import "../component/base"

import QtQuick.LocalStorage 2.0
import "../DB/database.js" as DB

Item {
    id: control
    anchors.fill: parent

    property bool is_home: true
    property bool show_right: false
    property var right_type: "point"

    property var page_type: "home"

    Component.onCompleted: {
        console.log("初始化数据库")
        DB.initDatabase()
    }

    AddPointWindow{
        id: add_point_win
        onClickEditIcon: {
            icon_edit_win.open()
        }
        onClickEditFont: {
            font_edit_win.open()
        }
    }
    FontEditWindow{
        id: font_edit_win
    }
    EditIconWindow{
        id: icon_edit_win
    }
    SearchNearWindow{
        id: search_near_win
    }

    Menu {
        id:map_right_menu
        width: 140
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "搜索周边"
            onClickItem: {
                search_near_win.open()
            }
        }
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "创建点位"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "行政区域检索"
            onClickItem: {
            }
        }
        MenuSeparator { }

        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "放大"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "缩小"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "设为地图中心点"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: false
            show_key: false
            m_text: "经纬度"
            onClickItem: {
            }
        }
        MenuSeparator { }
        BaseMenuItem{
            show_img: true
            show_key: false
            m_text: "设为起点"
            m_width: 20
            m_height: 20
            m_hover: false
            m_icon: "qrc:/qt/qml/Gallery/res/image/components/map/nav_start.png"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: true
            show_key: false
            m_text: "设为终点"
            m_width: 20
            m_height: 20
            m_hover: false
            m_icon: "qrc:/qt/qml/Gallery/res/image/components/map/nav_stop.png"
            onClickItem: {
            }
        }
        BaseMenuItem{
            show_img: true
            show_key: false
            m_text: "设为途径点"
            m_width: 20
            m_height: 20
            m_hover: false
            m_icon: "qrc:/qt/qml/Gallery/res/image/components/map/nav_mid.png"
            onClickItem: {
            }
        }
        background: Rectangle{
            width: 146
            color: "#191919"
            radius: 8
            x: -3
        }
    }

    ColumnLayout {
        spacing: 3
        width: parent.width
        height: parent.height

        ToolBar{
            Layout.fillWidth: true
            Layout.preferredHeight: 45
            Layout.topMargin: 3
            Layout.leftMargin: 5
            Layout.rightMargin: 10
            visible: !control.is_home
            Layout.preferredWidth: parent.width
            onClickButton: (fun) => {
                // control.show_right = false
                // com_info.reset_info()

                map_container.run_js(fun)
            }
        }

        RowLayout{
            Layout.topMargin: 1
            Layout.fillWidth: true
            Layout.fillHeight: true
            Rectangle{
                visible: control.is_home
                Layout.fillHeight: true
                Layout.preferredWidth: 220
                Layout.leftMargin: 5
                Layout.rightMargin: 3
                Layout.bottomMargin: 10
                radius: 5
                color: Qt.rgba(255/255,255/255,255/255, 0.05)

                // 主页的菜单。

                LeftMainMenu{
                    anchors.fill: parent
                    anchors.leftMargin: 10
                    anchors.rightMargin: 10
                    anchors.topMargin: 10
                    onClickItem: function(data) {
                        control.page_type = "page"
                        console.log(data.uuid)
                    }
                    onClickHome: function() {
                        control.page_type = "home"
                    }
                }
            }

            Rectangle{
                visible: control.is_home
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "transparent"
                // RightMainContent {
                //     anchors.fill: parent
                //     onClickSee: function(data) {
                //         // title_bar.addTab(data.title, data.uuid)
                //         control.is_home = false
                //     }
                // }
                RightMainIntro{
                    show_banner: control.page_type == "home"
                    show_tab: control.page_type == "home"

                    anchors.fill: parent
                    onClickSee: function(data) {
                        control.is_home = false
                    }
                }
            }



            SplitView {
                visible: !control.is_home
                id:split_layout
                Layout.fillWidth: true
                Layout.fillHeight: true
                orientation: Qt.Horizontal
                // handle: Rectangle {
                //     implicitWidth: 4
                //     color: "darkgray"
                // }
                Rectangle {
                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                    radius: 5
                    clip: true
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 10
                    anchors.left: parent.left
                    anchors.leftMargin: 5
                    implicitWidth: 230
                    implicitHeight: 200
                    SplitView.minimumWidth: 230
                    SplitView.minimumHeight: 200
                    SplitView.maximumWidth: 400
                    SplitView.maximumHeight: 400
                    LeftMainMenuTab{
                        id: left_tab
                        anchors.fill: parent
                        anchors.leftMargin: 5
                        anchors.topMargin: 5
                        anchors.rightMargin: 5

                        onClickMenuItem: function(data) {
                            if (data.type && data.type == "resource") {
                                map_container.run_js("QT_ZoomToResource", data.id)
                            } else {
                                map_container.run_js("QT_ZoomTo", [data.id])
                                // 更新右侧
                                control.right_type = data.right_type
                                com_info.update_only_data(data)
                            }
                        }

                        onClickResource: function(data) {
                            map_container.run_js("QT_LoadResource", [data.type, data.title])
                            // 需要更新元素tab数据
                        }

                        onLockItem: function(data) {
                            map_container.run_js("QT_LockItem", [data.id, data.lock])
                        }

                        onShowItem: function(data) {
                            map_container.run_js("QT_SetShowItem", [data.id, data.show])

                            com_info.reset_info()
                            control.show_right = false
                        }
                    }
                }
                Item {
                    clip: true
                    id: centerItem
                    SplitView.fillWidth: true
                    SplitView.fillHeight: true
                    // 中间地图
                    Rectangle{
                        anchors.fill: parent
                        color: "#000"
                        MapContainer{
                            id: map_container
                            anchors.fill: parent
                            onAsyncMapInfo: function(data) {
                                // com_info.reset_info()
                                console.log("接受===" + data.type)
                                if (data.type == "point") {
                                    add_point_win.open()
                                    // control.right_type = data.type

                                    // data.data.right_type = data.type
                                    // com_info.update_design(data.data)

                                    // left_tab.setMenuData(data.data)

                                    // control.show_right = true
                                } else if (data.type == "empty") {
                                    control.show_right = false
                                    com_info.reset_info()
                                } else if (data.type == "line") {
                                    control.show_right = true
                                    control.right_type = data.type
                                    data.data.right_type = data.type

                                    com_info.update_design(data.data)
                                    left_tab.setMenuData(data.data)
                                } else if (data.type == "polygon") {
                                    control.show_right = true
                                    control.right_type = data.type
                                    data.data.right_type = data.type

                                    com_info.update_design(data.data)
                                    left_tab.setMenuData(data.data)
                                } else if (data.type == "search-near") {
                                    WindowRouter.go("/searchNear",{type:"WindowType.Standard"})
                                } else if (data.type == "resource") {
                                    // 资源类的没有右侧面板
                                    data.data.right_type = data.type
                                    left_tab.setMenuData(data.data)
                                } else if (data.type == "delete") {
                                    // 删除左侧菜单，关闭右侧面板
                                    left_tab.deleteMenuData(data.data)
                                    control.show_right = false
                                } else if (data.type == "rightClick") {
                                    var pos = data.data.pos
                                    map_right_menu.popup(map_container)
                                    map_right_menu.y += -10
                                }
                            }
                        }

                        SearchRoute{
                            anchors.left: parent.left
                            anchors.top: parent.top
                            anchors.bottom: parent.bottom
                            anchors.leftMargin: 10
                            anchors.topMargin: 10
                            anchors.bottomMargin: 20
                        }
                    }
                }
            }

            RightCommon{
                Layout.preferredWidth: 270
                Layout.preferredHeight: parent.height - 20
                Layout.rightMargin: 10
                visible: !control.is_home
            }

            // RightComponentInfo{
            //     id: com_info
            //     cur_type: control.right_type
            //     visible: !control.is_home && control.show_right
            //     Layout.preferredWidth: 200
            //     Layout.preferredHeight: parent.height
            //     Layout.rightMargin: 10
            //     onIconChanged: function(data) {
            //         map_container.run_js("QT_ChangeIcon", {img: data.key})
            //         if (data.image && data.id) {
            //             left_tab.setMenuData(data)
            //         }
            //     }
            //     onTextChanged: function(data) {
            //         map_container.run_js("QT_ChangeIcon", {text: data.title})
            //         // 更新左侧标题
            //         if (data.title && data.id) {
            //             left_tab.setMenuData(data)
            //         }
            //     }
            //     onTextColorChanged: function(data) {
            //         map_container.run_js("QT_ChangeIcon", {textColor: data})
            //     }

            //     onLineInfoChanged: function(data) {
            //         map_container.run_js("QT_ChangeLine", data)
            //         // 更新左侧标题
            //         console.log("id====" + data.id)
            //         if (data.title && data.id) {
            //             left_tab.setMenuData(data)
            //         }
            //     }

            //     onPolyInfoChanged: function(data) {
            //         map_container.run_js("QT_ChangePoly", data)
            //         // 更新左侧标题
            //         if (data.title && data.id) {
            //             left_tab.setMenuData(data)
            //         }
            //     }
            // }
        }
    }


    Connections {
        target: Global
        onSendMessage: function(message) {
            console.log("Window 2 received:", message)
            map_container.run_js("QT_StartSim", "")
        }
    }

    Connections {
        target: DataConnect
        onGoHome: function goHome(value) {
            control.is_home = true
        }
    }


}