FluentUI/Gallery/res/qml/component/RightComponentInfo.qml

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

Item {
    id: control

    signal iconChanged(var path)
    signal textChanged(var text)
    signal textColorChanged(var color);

    property var cur_type: ""
    signal lineInfoChanged(var info)
    signal polyInfoChanged(var info)

    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
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'transparent'
            ComDesignInfo{
                visible: control.cur_type == "point"
                id: com_design
                Layout.fillWidth: true
                Layout.fillHeight: true
                onIconChanged: function(data) {
                    control.iconChanged(data)
                }
                onTextChanged: function(data) {
                    control.textChanged(data)
                }
                onTextColorChanged: function(data) {
                    console.log(data)
                    control.textColorChanged(data)
                }
            }
            ComDesignInfoLine{
                visible: control.cur_type == "line"
                id: com_design_line
                Layout.fillWidth: true
                Layout.fillHeight: true
                onLineWidth: function(data) {
                    console.log("change line width ==" + data)
                    control.lineInfoChanged({lineWidth: data})
                }
                onLineColorChanged: function(data) {
                    console.log("change line color ==" + data)
                    control.lineInfoChanged({lineColor: data})
                }
                // onIconChanged: function(data) {
                //     control.iconChanged(data)
                // }
                // onTextChanged: function(data) {
                //     control.textChanged(data)
                // }
                // onTextColorChanged: function(data) {
                //     console.log(data)
                //     control.textColorChanged(data)
                // }
            }
            ComDesignInfoPolygon {
                visible: control.cur_type == "polygon"
                id: com_design_poly
                Layout.fillWidth: true
                Layout.fillHeight: true
                onBgColorChanged: function(data) {
                    console.log("change line color ==" + data)
                    control.polyInfoChanged({backColor: data})
                }
                onTextChanged: function(data) {
                    console.log("change title ==" + data)
                    control.polyInfoChanged({title: data, id: com_design_poly.entityId })
                }
            }
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'yellow'
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'transparent'
            ComAnalysisInfo{
                Layout.fillWidth: true
                Layout.fillHeight: true
            }
        }

        // Repeater{
        //     model:tab_model
        //     AutoLoader{
        //         property var modelData: model
        //         sourceComponent: comp_page
        //     }
        // }
    }

    function set_type(type) {
        control.cur_type = type
    }

    function update_design(data)
    {
        if (control.cur_type == "point") {
            com_design.updateInfo(data)
        } else if (control.cur_type == "line") {
            com_design_line.updateInfo(data)
        } else if (control.cur_type == "polygon") {
            com_design_poly.updateInfo(data)
        }
    }

    function update_only_data(data)
    {
        if (control.cur_type == "point") {
            com_design.update_only_data(data)
        } else if (control.cur_type == "line") {
            com_design_line.update_only_data(data)
        } else if (control.cur_type == 'polygon') {
            com_design_poly.update_only_data(data)
        }
    }

    function reset_info() {
        com_design.update_only_data(null)
        com_design_line.update_only_data(null)
        com_design_poly.update_only_data(null)
    }

}