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 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
    }

    ColumnLayout{
        Layout.fillWidth: true
        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 ...")
        com_line_width.text = data.lineWidth
        com_color_line.current = data.lineColor
    }

    function update_only_data(data)
    {
        if (data) {
        } else {
            data_model.clear()
            control.isNeedSignal = false
            com_line_width.text = "1"
            com_color_line.current = "#ffffff"
        }
        // 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
        // } 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"
        // }
    }
}