import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

BaseCommon
{
    id: kvp
    width: parent.width
    height: 180
    property var keyValues: ListModel{}
    value : "{}"
    Item{
        width: parent.width
        height: 130
        clip: true
        ListView {
            anchors.fill: parent
            interactive: false
            model: keyValues
            delegate: KeyValueRow{

                Component.onCompleted: {
                    valueChanged.connect(kvp.onValueChanged)
                }
            }
            ScrollBar.vertical: ScrollBar { visible: true }
        }
    }

    Button {
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        width: 80
        height: 20
        text: "添加"
        onClicked: {
            keyValues.append({"key": "", "value": ""})
        }
    }

    function onValueChanged()
    {
        var json_obj = {}
        for(var i=0; i<keyValues.count; i++)
        {
            json_obj[keyValues.get(i).key] = keyValues.get(i).value
        }
        value = JSON.stringify(json_obj,null, 2)
        console.info("value",value)
    }

    function setValue(_value)
    {
        keyValues.clear()
        if (_value == null || _value == "")
            return
        try{
            var json_obj = JSON.parse(_value)
            for(var key in json_obj)
            {
                keyValues.append({"key": key, "value": json_obj[key]})
            }
            onValueChanged()
        }
        catch(e){
            console.error("setValue error: " + e)
        }   
    }
}