import QtQuick 2.11
import QtQuick.Controls 2.11

Rectangle {
    width: 220
    height: 300

    gradient: Gradient {
        GradientStop {
            position: 0.0
            color: "#f6f6f6"
        }
        GradientStop {
            position: 1.0
            color: "#d7d7d7"
        }
    }

    Popup {
        id: popup
        x: 100
        y: 100
        width: 200
        height: 300
        modal: true
        focus: true
        closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutsideParent
        property int pindex: 0
        MouseArea {
            anchors.fill: parent
            onClicked: {
                print(pindex)
            }
        }
    }

    ListModel {
        id: actionModel

        ListElement {
            name: "Copenhagen"
            hello: function (value) {
                console.log(value + ": You clicked Copenhagen!")
                //popup.pindex = 1
                //popup.open()
            }
            hello1: function (value) {
                console.log(value + ": You unclicked Copenhagen!")
            }
        }

        ListElement {
            name: "Helsinki"
            hello: function (value) {
                console.log(value + ": Helsinki here!")
            }
            hello1: function (value) {
                console.log(value + ": You unclicked Copenhagen!")
            }
        }

        ListElement {
            name: "Oslo"
            hello: function (value) {
                console.log(value + ": Hei Hei fra Oslo!")
            }
            hello1: function (value) {
                console.log(value + ": You unclicked Copenhagen!")
            }
        }

        ListElement {
            name: "Stockholm"
            hello: function (value) {
                console.log(value + ": Stockholm calling!")
            }
            hello1: function (value) {
                console.log(value + ": You unclicked Copenhagen!")
            }
        }
    }

    ListView {
        anchors.fill: parent
        anchors.margins: 20

        clip: true

        model: actionModel

        delegate: actionDelegate
        spacing: 5

        focus: true
    }

    Component {
        id: actionDelegate

        Pane {
            background: Rectangle {
                color: "#157efb"
            }
            Row {
                Label {
                    text: name
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            popup.pindex = 1
                            popup.open()
                            //hello(index)
                        }
                    }
                }
                //Image {}
                Label {
                    text: " - "
                    MouseArea {
                        anchors.fill: parent
                        onClicked: hello1(index)
                    }
                }
                Label {
                    text: " + "
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            hello(index)
                        }
                    }
                }
            }
        }
    }
}