FluentUI/Gallery/res/qml/component/ComDesignInfo.qml

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

ColumnLayout {
    id: control
    property var lon: "";
    property var lat: "";
    property var hei: "";
    property var isNeedSignal: true;

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

    property var cur_color
    property var entityId

    spacing: 5
    Label{
        Layout.preferredHeight: 20
        Layout.alignment: Qt.AlignTop
        text: "坐标"
        font.pointSize: 12
    }
    TextBox{
        Layout.preferredHeight: 35
        placeholderText: "经度"
        leading: Label{
            text: "经度"
        }
        text: lon
    }
    TextBox{
        Layout.preferredHeight: 35
        placeholderText: "纬度"
        leading: Label{
            text: "纬度"
        }
        text: lat
    }
    TextBox{
        Layout.preferredHeight: 35
        placeholderText: "高度"
        leading: Label{
            text: "高度"
        }
        text: hei
    }
    Label{
        Layout.preferredHeight: 20
        Layout.topMargin: 10
        text: "显示"
        font.pointSize: 12
    }

    WindowResultLauncher{
        id: iconResultLauncher
        path: "/icons"
        onResult:
            (data)=>{
                icon_img.source = data.image
                control.iconChanged(data.key)
            }
    }

    Rectangle{
        Layout.fillWidth: true
        Layout.preferredHeight: 35
        color: "#373737"
        RowLayout{
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            // Layout.alignment: Qt.AlignHCenter
            Rectangle{
                color: "#292929"
                Layout.fillWidth: false
                Layout.preferredHeight: 30
                Layout.preferredWidth: 30
                radius: 5
                Layout.leftMargin: 5
                Layout.rightMargin: 5
                Image{
                    id: icon_img
                    width: 15
                    height: 15
                    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: {
                    }
                }
            }
            Rectangle{
                Layout.preferredWidth: 110
                Layout.preferredHeight: 35
                color: 'transparent'
                Label{
                    text: "选择图标"
                    width: parent.width
                    height: parent.height
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        iconResultLauncher.launch({ title: "Test" })
                    }
                }
            }
        }
    }

    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) {
        control.lon = data.pos[0]
        control.lat = data.pos[1]
        control.hei = data.pos[2]

        com_tb.text = data.title
        if (data.textColor) {
            com_color.current = data.textColor
        }
        if (data.img) {
            icon_img.source = "qrc:/qt/qml/Gallery/res/image/icons/" + data.img
        }
        control.entityId = data.id
    }

    function update_only_data(data)
    {
        if (data) {
            control.lon = data.pos[0]
            control.lat = data.pos[1]
            control.hei = data.pos[2]

            control.isNeedSignal = false
            com_tb.text = data.title
            com_color.current = data.textColor
            icon_img.source = "qrc:/qt/qml/Gallery/res/image/icons/" + data.img
            control.entityId = data.id
        } else {
            console.log("reset info...")
            control.lon = ""
            control.lat = ""
            control.hei = ""

            com_tb.text = ""
            com_color.current = "#ffffff"
            icon_img.source = "qrc:/qt/qml/Gallery/res/image/ico_home.png"
            control.entityId = ""
        }
    }
}