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

Rectangle {
    id: control

    color: Qt.rgba(255/255,255/255,255/255, 0.05)
    radius: 5

    signal clickMenuItem(var data)

    signal clickResource(var data)

    signal lockItem(var data)
    signal showItem(var data)

    ListModel{
        id: tab_model
        ListElement{
            title: "元素"
        }
        ListElement{
            title: "资源"
        }
        ListElement{
            title: "蓝图"
        }
    }

    MyTabBar {
        id: bar
        width: parent.width

        clip: true
        spacing: 20
        Repeater {
            model: tab_model
            MyTabButton {
                id: btn_tab
                text: model.title
                font.pointSize: 10
                implicitHeight: 30
                p_color: "#cccccc"
            }
        }
        background: Rectangle {
            anchors.fill: parent
            color: '#242424'
            radius: 5
            border.color: Qt.rgba(74/255,74/255,74/255, 0.5)
            border.width: 1
        }
    }

    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: 3
        }
        // 元素
        LeftProjectMenu{
            id: com_menu
            Layout.fillWidth: true
            Layout.fillHeight: true
            onClickItem: function(data) {
                control.clickMenuItem(data)
            }
            onLockItem: function(data) {
                control.lockItem(data)
            }
            onShowItem: function(data) {
                control.showItem(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)
    }

    function deleteMenuData(data) {
        com_menu.delMenuData(data)
    }
}