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

Item {
    id: control

    signal clickMenuItem(var data)

    signal clickResource(var data)

    property var colors : [Colors.yellow,Colors.orange,Colors.red,Colors.magenta,Colors.purple,Colors.blue,Colors.teal,Colors.green]

    property var randomAccentColor: function(){
        return colors[Math.floor(Math.random() * 8)]
    }

    ListModel{
        id: tab_model
        ListElement{
            title: "元素"
            accentColor: function(){
                return colors[Math.floor(Math.random() * 8)]
            }
        }
        ListElement{
            title: "资源"
            accentColor: function(){
                return colors[Math.floor(Math.random() * 8)]
            }
        }
        ListElement{
            title: "蓝图"
            accentColor: function(){
                return colors[Math.floor(Math.random() * 8)]
            }
        }
    }

    TabBar {
        id: bar
        width: parent.width
        clip: true
        Repeater {
            model: tab_model
            TabButton {
                id: btn_tab
                text: model.title
                font.pointSize: 10
            }
        }
    }

    Component{
        id:comp_page
        Frame{
            anchors.fill: parent
            LeftProjectMenu{
                anchors.fill: parent
            }
        }
    }

    StackLayout {
        currentIndex: bar.currentIndex
        anchors{
            left: bar.left
            right: bar.right
            top: bar.bottom
            bottom: parent.bottom
            topMargin: 10
        }
        LeftProjectMenu{
            id: com_menu
            Layout.fillWidth: true
            Layout.fillHeight: true
            onClickItem: function(data) {
                control.clickMenuItem(data)
            }
        }

        // 资源面板
        LeftResource{
            Layout.fillWidth: true
            Layout.fillHeight: true
            onClickResource: function(data) {
                control.clickResource(data)
            }

            // color: 'yellow'
            // LeftResource{
            //     anchors.fill: parent
            // }
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'cyan'
        }
    }

    function setMenuData(data) {
        com_menu.setMenuData(data)
    }
}