import QtQuick

import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import "base"

Item {
    id: control
    signal clickButton(var item)
    anchors.topMargin: 0
    anchors.leftMargin: 10
    Rectangle{
        height: 42
        width: parent.width
        radius: 5
        // anchors.fill: parent
        color: Qt.rgba(255/255,255/255,255/255, 0.05)

        Menu {
            id:menu
            width: 140
            title: qsTr("File")
            Action { text: qsTr("New...")}
            Action { text: qsTr("Open...") }
            Action { text: qsTr("Save") }
            MenuSeparator { }
            MenuItem{
                text: qsTr("Quit")
            }
            MenuItem{
                text: qsTr("Search")
                icon.name: FluentIcons.graph_Zoom
                icon.width: 14
                icon.height: 14
            }
            Action {
                text: qsTr("Disable")
                enabled:false
            }
            MenuSeparator { }
            Action { text: qsTr("Check");checkable: true;checked: true}
            Menu{
                width: 140
                title: qsTr("Save As...")
                Action { text: qsTr("Doc") }
                Action { text: qsTr("PDF") }
            }
        }

        RowLayout {
            width: parent.width
            height: parent.height
            spacing: 5

            IconButton{
                // icon.name: FluentIcons.graph_OEM
                icon.source: "qrc:/qt/qml/Gallery/res/image/components/tb_menu.png"
                icon.width: 12
                icon.height: 13
                topPadding: 10 //bottomPadding
                Layout.leftMargin: 5
                Layout.preferredHeight: 30
                Layout.preferredWidth: 30
                onClicked: {
                    console.log("click")
                    menu.popup()
                }
            }

            Rectangle{
                Layout.minimumWidth: 300
                Layout.preferredHeight: parent.height
                Layout.leftMargin: 10
                color: "transparent"

                MyBreadcrumb {
                    id: breadCrumb
                    anchors.fill: parent
                    moreSize: 14
                    items: [{title: "充换电"}, {title: "河津一号充换电站设计", children: [{title: "河津一号充换电站设计"},{title: "河津一号充换电站设计2"}]}]
                    anchors.verticalCenter: parent.verticalCenter
                    onClickItem: (model)=>{
                        showSuccess(model.title)
                    }
                }
            }

            Menu {
                id:menu_line
                width: 140
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/curve.png"
                    m_text: "曲线"
                    m_key: "P"
                    m_width: 16
                    m_height: 16
                    onClickItem: {
                        // control.clickItem("StartAddPoint")
                    }
                }
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/free_line.png"
                    m_text: "自由线"
                    m_key: "P"
                    m_width: 16
                    m_height: 16
                    onClickItem: {
                        // control.clickItem("StartAddPoint")
                    }
                }
                background: Rectangle{
                    width: 146
                    color: "#191919"
                    radius: 8
                    x: -3
                }
            }

            Menu {
                id:menu_area
                width: 140
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/polygon.png"
                    m_text: "多边形"
                    m_key: "D"
                    onClickItem: {
                        control.clickItem("StartAddPoly")
                    }
                }
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/triangle.png"
                    m_text: "三角形"
                    m_key: "T"
                    onClickItem: {
                        control.clickItem("StartTriangle")
                    }
                }
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/circle.png"
                    m_text: "圆"
                    m_key: "C"
                    onClickItem: {
                        control.clickItem("StartCircle")
                    }
                }
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/ellipse.png"
                    m_text: "椭圆"
                    m_key: "E"
                    onClickItem: {
                        control.clickItem("StartEllipse")
                    }
                }
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/free_area.png"
                    m_text: "自由面"
                    m_key: "A"
                    onClickItem: {
                        control.clickItem("StartFreeSurface")
                    }
                }
                background: Rectangle{
                    width: 146
                    color: "#191919"
                    radius: 8
                    x: -3
                }
            }

            Menu {
                id:menu_plugin
                width: 140
                BaseMenuItem{
                    m_icon: "qrc:/qt/qml/Gallery/res/image/icons/polygon.png"
                    m_text: "暂无"
                    m_key: "D"
                    onClickItem: {
                        control.clickItem("StartAddPoly")
                    }
                }
                background: Rectangle{
                    width: 146
                    color: "#191919"
                    radius: 8
                    x: -3
                }
            }

            Rectangle{
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "transparent"

                RowLayout{
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.centerIn: parent

                    spacing: 10

                    IconButton{
                        icon.source: "qrc:/qt/qml/Gallery/res/image/components/ico_loc.png"
                        icon.width: 12
                        icon.height: 15
                        topPadding: 10 //bottomPadding
                        Layout.leftMargin: 5
                        Layout.preferredHeight: 30
                        Layout.preferredWidth: 30
                        onClicked: {
                            console.log("click")
                            control.clickButton("StartAddPoint")
                        }
                    }

                    IconDropdownButton{
                        p_img: "qrc:/qt/qml/Gallery/res/image/components/ico_line.png"
                        p_menu: menu_line
                        Layout.preferredWidth: 30
                        Layout.preferredHeight: 30
                        p_others: [menu_area, menu_plugin]
                    }
                    IconDropdownButton{
                        p_img: "qrc:/qt/qml/Gallery/res/image/components/ico_area.png"
                        p_menu: menu_area
                        Layout.preferredWidth: 30
                        Layout.preferredHeight: 30
                        p_others: [menu_line, menu_plugin]
                    }
                    IconDropdownButton{
                        p_img: "qrc:/qt/qml/Gallery/res/image/components/ico_plugin.png"
                        p_menu: menu_plugin
                        Layout.preferredWidth: 30
                        Layout.preferredHeight: 30
                        p_others: [menu_area, menu_line]
                    }
                }
            }

            Rectangle{
                Layout.preferredWidth: 300
                Layout.preferredHeight: 30
                color: "transparent"
            }
        }

    }
}