import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import "../component"

Item {
    id: control
    anchors.fill: parent

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

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

        TitleBar{
            id: title_bar
            Layout.preferredWidth: parent.width

            onClickNav: (params) => {
                control.is_home = true
                nav_main.visitUrl("/")
            }
        }

        ToolBar{
            visible: !control.is_home
            Layout.preferredWidth: parent.width
            onClickButton: (fun) => {
                console.log(fun)
                map_container.run_js(fun)
            }
        }

        RowLayout{
            Layout.topMargin: 30
            Layout.fillWidth: true
            Layout.fillHeight: true
            Rectangle{
                visible: control.is_home
                Layout.fillHeight: true
                Layout.preferredWidth: 250
                color: "transparent"

                // 主页的菜单。
                // LeftMainMenu{
                //     anchors.fill: parent
                // }

                LeftNavMenu{
                    id: nav_main
                    height: parent.height
                    onClickMenu: (item) => {
                        if (item.key == "/") {
                            control.is_home = true
                        } else if (item.key == "/newproject") {

                        } else {
                            console.log(item.title + ", filter list...")
                            control.is_home = false
                            title_bar.addTab(item.title, item.key)
                        }
                    }
                }
            }

            // Rectangle{
            //     visible: control.is_home
            // }


            // LeftProjectMenu{
            //     visible: !control.is_home
            //     Layout.preferredWidth: 200
            //     Layout.preferredHeight: parent.height
            // }
            LeftMainMenuTab{
                id: left_tab
                visible: !control.is_home
                Layout.preferredWidth: 200
                Layout.preferredHeight: parent.height
                Layout.leftMargin: 10

                onClickMenuItem: function(data) {
                    map_container.run_js("QT_ZoomTo", [data.id])
                    // 更新右侧
                    com_info.update_only_data(data)
                }
            }

            Rectangle{
                visible: !control.is_home
                Layout.fillHeight: true
                Layout.fillWidth: true
                color: "transparent"
                MapContainer{
                    id: map_container
                    Layout.fillHeight: true
                    Layout.fillWidth: true
                    onAsyncMapInfo: function(data) {
                        console.log("接受===" + data.type)
                        if (data.type == "point") {
                            control.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
                            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
                            com_info.update_design(data.data)
                            left_tab.setMenuData(data.data)
                        }
                    }
                }
            }

            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})
                }
                onTextChanged: function(data) {
                    map_container.run_js("QT_ChangeIcon", {text: data})
                }
                onTextColorChanged: function(data) {
                    map_container.run_js("QT_ChangeIcon", {textColor: data})
                }

                onLineInfoChanged: function(data) {
                    map_container.run_js("QT_ChangeLine", data)
                }

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