import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl

import Qt5Compat.GraphicalEffects

Item {
    signal clickNav(var path, var params)
    id: control
    property var mapTabs: {"": ""}
    // anchors.fill: parent
    RowLayout {
        // anchors.topMargin: 10
        // anchors.bottomMargin: 10
        // anchors.rightMargin: 10
        // anchors.leftMargin: 10
        // anchors.fill: parent
        width: parent.width
        height: 40
        spacing: 5

        // Image{
        //     source: "qrc:/qt/qml/Gallery/res/image/logo.png"
        //     Layout.preferredHeight: 20
        //     Layout.preferredWidth: 16
        //     Layout.leftMargin: 10
        //     visible: false
        // }
        // Rectangle{
        //     color: "transparent"
        //     width: 30
        //     height: 30
        // }

        // Text{
        //     id: logoText
        //     text: "AntsEV Studio"
        //     visible: false
        // }
        // LinearGradient {
        //     Layout.preferredHeight: logoText.height
        //     Layout.preferredWidth: logoText.width
        //     source: logoText
        //     start: Qt.point(0, 0)
        //     end: Qt.point(0, logoText.height)
        //     gradient: Gradient {
        //         GradientStop { position: 0.0; color: "#5BE49B" }
        //         GradientStop { position: 1.0; color: "#00A76F" }
        //     }
        // }

        Rectangle{
            color: "#292929"
            Layout.preferredHeight: 30
            Layout.preferredWidth: 30
            radius: 5
            Layout.leftMargin: 10
            Layout.rightMargin: 10
            Image{
                source: "qrc:/qt/qml/Gallery/res/image/ico_home.png"
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: parent.color = "#000000"
                onExited: parent.color = "#292929"
                onClicked: {
                    control.clickNav("home", "")
                  // selectedSegment = model.text
                  // segmentDialog.close()
                }
            }
        }

        Rectangle{
            Layout.minimumWidth: 100
            Layout.fillWidth: true
            Layout.preferredHeight: 34
            color: "transparent"

            TabView{
                id: tab_view
                closeButtonVisibility: TabViewType.OnHover
                tabWidthBehavior: TabViewType.SizeToContent
                addButtonVisibility: false
                Component.onCompleted: {
                    // newTab()
                    // newTab()
                }
                Component{
                    id:com_page
                    Rectangle{
                        anchors.fill: parent
                        color: "green"
                    }
                }
                onClickNav: function(data) {
                    control.clickNav("other", data.argument.path)
                }
                onCloseTabed: function(index) {
                    console.log("tab count=" + tab_view.count())
                    control.mapTabs[index.argument.path] = undefined
                }
                onCloseTabOk: {
                    if (tab_view.count() > 0) {
                        tab_view.choose(tab_view.count() - 1)
                        var curt = tab_view.get_cur_tab()
                        var uuid = curt.argument.path
                        console.log(curt.argument.title)
                        control.clickNav("other", uuid)
                    } else {
                        control.clickNav("home", "")
                    }
                }
                function newTab(){
                    tab_view.appendTab("qrc:/qt/qml/Gallery/res/image/ico_tab.png","耳字壕充换电站规划",com_page,"green")
                }
            }
        }
    }

    function addTab(title, path) {
        var inx = 0
        if (!control.mapTabs[path]) {

            for (var k in control.mapTabs) {
                inx++
            }

            var params = {title: title, path: path}
            control.mapTabs[path] = params

            tab_view.appendTab("qrc:/qt/qml/Gallery/res/image/ico_tab.png",title,com_page, params)
        } else {
            for (var k in control.mapTabs) {
                if (k == path) {
                    break
                }
                inx++
            }
        }

        tab_view.choose(inx - 1)
    }
}