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

ColumnLayout {
    id: control
    property var isNeedSignal: true;
    property var entityId

    signal textChanged(var text);

    signal bgColorChanged(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_bg
            onCurrentChanged: {
                if (control.isNeedSignal) {
                    control.bgColorChanged(com_color_bg.current + "")
                }
                control.isNeedSignal = true
            }
        }
    }

    // 文字样式
    RowLayout{
        Layout.fillWidth: true
        Layout.fillHeight: 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_color_bg.current = data.backColor
        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_color_bg.current = "#ffffff"
            com_tb.text = ""
            control.entityId = ""
        }
    }
}