FluentUI/Gallery/res/qml/component/ComDesignInfoLine.qml

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

ColumnLayout {
    id: control
    property var isNeedSignal: true;

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

    property var entityId
    property var points: [[],[]]
    signal lineWidth(var width)
    signal lineColorChanged(var color)

    spacing: 5
    Label{
        Layout.preferredHeight: 20
        Layout.alignment: Qt.AlignTop
        text: "点坐标"
        font.pointSize: 12
    }

    Component.onCompleted: {
    }

    Component{
        id:comp_page
        RowLayout{
            spacing: 5
            Label{
                text: "点"
            }
            TextBox{
                Layout.preferredHeight: 35
                Layout.preferredWidth: 55
                placeholderText: "经度"
                // leading: Label{
                //     text: "经度"
                // }
                text: modelData.lon
            }
            TextBox{
                Layout.preferredHeight: 35
                Layout.preferredWidth: 55
                placeholderText: "纬度"
                // leading: Label{
                //     text: "纬度"
                // }
                text: modelData.lat
            }
            TextBox{
                Layout.preferredHeight: 35
                Layout.preferredWidth: 55
                placeholderText: "高度"
                // leading: Label{
                //     text: "高度"
                // }
                text: modelData.hei
            }
        }
    }

    ListModel {
        id: data_model
    }

    ScrollView {
        Layout.fillWidth: true
        Layout.preferredHeight: 200
        ColumnLayout{
            anchors.fill: parent
            Repeater{
                model:data_model
                AutoLoader{
                    property var modelData: model
                    sourceComponent: comp_page
                }
            }
        }
    }

    Label{
        Layout.preferredHeight: 20
        Layout.topMargin: 10
        text: "显示"
        font.pointSize: 12
    }

    // 线的样式
    TextBox{
        id: com_line_width
        Layout.preferredHeight: 35
        placeholderText: "线宽"
        leading: Label{
            text: "线宽"
        }
        onTextChanged: {
            if (control.isNeedSignal) {
                control.lineWidth(text)
            }
            control.isNeedSignal = true
        }
    }
    RowLayout{
        Layout.fillWidth: true
        Layout.fillHeight: true
        Label{
            text: "线颜色"
        }

        ColorPicker{
            id: com_color_line
            onCurrentChanged: {
                if (control.isNeedSignal) {
                    control.lineColorChanged(com_color_line.current + "")
                }
                control.isNeedSignal = true
            }
        }
    }

    // 文字样式
    RowLayout{
        Layout.fillWidth: true
        Layout.fillHeight: true
        // ColorPicker{
        //     id: com_color
        //     // anchors.verticalCenter: parent.verticalCenter
        //     // onAccepted: function() {
        //     //     control.textColorChanged(com_color.current + "")
        //     // }
        //     onCurrentChanged: {
        //         if (control.isNeedSignal) {
        //             control.textColorChanged(com_color.current + "")
        //         }
        //         control.isNeedSignal = true
        //     }
        // }
        TextBox{
            id: com_tb
            Layout.preferredHeight: 35
            Layout.fillWidth: true
            placeholderText: "标题"
            onTextChanged: {
                if (control.isNeedSignal) {
                    control.textChanged(text)
                }
                control.isNeedSignal = true
            }
        }
    }


    Rectangle{
        Layout.fillHeight: true
        Layout.fillWidth: true
        color: 'green'
    }

    // 地图更新数据，调用此方法
    function updateInfo(data) {
        data_model.clear()
        for(var d of data.pos) {
            data_model.append(d)
        }
        console.log("update info ..." + data.id)
        com_line_width.text = data.lineWidth
        com_color_line.current = data.lineColor
        com_tb.text = data.title
        control.entityId = data.id
    }

    function update_only_data(data)
    {
        if (data) {
            control.entityId = data.id
        } else {
            data_model.clear()
            control.isNeedSignal = false
            com_line_width.text = "1"
            com_color_line.current = "#ffffff"
            com_tb.text = ""
            control.entityId = ""
        }
    }
}