import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import QtQuick.Dialogs
    
Rectangle {
    id: rectModel
    width: 200
    height: 300


    color: "#f8f9fa"  /* 柔和背景色 */
    border.color: "#e9ecef"  /* 浅灰色边框 */
    border.width: 1
    property var listModel: ListModel{}
    property var title: ""
    property var baseName: ""

    onTitleChanged: {
        if (!title || !_G[baseName] || !_G[baseName][title]) {
            return;
        }
        updateListModel()
    }
    onBaseNameChanged: {
        if (!title || !_G[baseName] || !_G[baseName][title]) {
            return;
        }
        updateListModel()
    }
    function updateListModel() {
        listModel.clear()
        var items = _G[baseName][title]
        for (var key in items) {
                if (items.hasOwnProperty(key)) {
                    listModel.append({"name": key, "value": String(items[key])})
                }
            }
    }
    Rectangle {
        id: rectLine
        width: parent.width
        height: 2
        y: 40
        color: "#dee2e6"  /* 更浅的分隔线 */
    }
    Text {
        id: txtTitle
        anchors.top: parent.top
        anchors.topMargin: 12  /* 调整标题上边距 */
        anchors.left: parent.left
        anchors.leftMargin: 10
        text: title
        font.family: "微软雅黑"
        font.pointSize: 14  /* 增大字体大小 */
        color: "#262626"  /* 更深的文本颜色 */
    }
    Item{
        anchors.top: rectLine.bottom
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        clip: true
        ListView{
            id: listViewContent
            anchors.fill: parent
            boundsBehavior: Flickable.StopAtBounds
            model: listModel
            delegate: Item {
                width: 200
                height: 30
                Row {
                    anchors.fill: parent
                    Rectangle {
                        id: rectName
                        width: 100
                        height: 30
                        color: "#e9ecef"  /* 柔和背景色 */
                        TextInput {
                            text: name
                            anchors.fill: parent
                            anchors.leftMargin:10
                            font.pixelSize: 12  /* 增大字体大小 */
                            color: "#262626"  /* 更深的文本颜色 */
                            enabled: false
                            verticalAlignment: TextInput.AlignVCenter
                        }
                    }
                    Rectangle {
                        id: rectValue
                        width: 200
                        height: 30
                        color: "#f8f9fa"  /* 柔和背景色 */
                        TextInput {
                            text: value
                            anchors.fill: parent
                            anchors.leftMargin:10
                            font.pixelSize: 12  /* 增大字体大小 */
                            color: "#262626"  /* 更深的文本颜色 */
                            verticalAlignment: TextInput.AlignVCenter
                            enabled: false
                        }
                        MouseArea {
                            anchors.fill: parent
                            onDoubleClicked: {
                            }
                        }
                    }
                }
            }
        }
    }
}