import QtQuick
import QtQuick.Controls
import QtQuick.Dialogs

Page {
    title: qsTr("AppStore")
    property var appList: []
    ListModel{
        id: appModel
    }
    Component.onCompleted: {
        createAddButton()
        updateAppList()
    }

    function createAddButton()
    {
        appModel.append({
                "id": "add",
                "name": "",
                "desc": "",
                "icon": "",
                "qmlfile": "",
                "show": false
            })
    }

    function updateAppList()
    {
        appModel.clear()
        createAddButton()
        common.updateAppList()
        appList = common.appList()
        for(var i = 0; i < appList.length; i++)
        {
            var appPath = "./plus/" + appList[i].id
            var qmlfile = appPath + "/main.qml"
            var icon = appPath + "/icon.png"
            var obj = {
                "id": appList[i].id,
                "name": appList[i].info.General.Name,
                "desc": appList[i].info.General.Description,
                "icon": icon,
                "qmlfile": qmlfile,
                "show": appList[i].show
            }
            appModel.insert(appModel.count-1, obj)
        }
    }

    Rectangle {
        anchors.fill: parent
        gradient: Gradient {
            GradientStop { position: 0.0; color: "#ecf3fb" } // 左上角颜色       
            GradientStop { position: 1.0; color: "#b7d6fb" } // 右上角颜色
            orientation: Gradient.Horizontal
        }
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.bottom: parent.bottom
            anchors.leftMargin: 10
            anchors.rightMargin: 10
            anchors.topMargin: 12
            anchors.bottomMargin: 10
           
            radius: 10
            color: "#ffffff"
            Component {
                id: contactDelegate
                Item {
                    width: grid.cellWidth
                    height: grid.cellHeight
                    Rectangle
                    {
                        id: panel
                        width: 400
                        height: 150
                        radius: 10
                        visible: model.id != "add"
                        anchors.horizontalCenter: parent.horizontalCenter
                        Behavior on scale {
                            NumberAnimation { duration: 100 }
                        }
                        border.color: "#f2f2f2"
                        border.width: 2
                        Image{
                            id: imgIcon
                            width: 130
                            height: 130
                            source: icon
                            anchors.top: parent.top
                            anchors.left: parent.left
                            anchors.bottom: parent.bottom
                            anchors.margins: 20
                        }
                        Text {
                            id: txName 
                            text: name
                            font.family: "微软雅黑"
                            font.pointSize: 12
                            anchors.left: imgIcon.right
                            anchors.leftMargin: 10
                            anchors.top: imgIcon.top
                            color: "#5b5b5b"
                        }
                        Text {
                            id: txDesc
                            text: desc
                            font.family: "微软雅黑"
                            font.pointSize: 10
                            anchors.left: imgIcon.right
                            anchors.leftMargin: 10
                            anchors.top: txName.bottom
                            anchors.topMargin: 10
                            color: "#b4b4b4"
                        }
                        Image
                        {
                            source: "./resource/delete.svg"
                            anchors.right: parent.right
                            anchors.top: parent.top
                            anchors.margins: 20
                            width: 16
                            height: 16
                            MouseArea
                            {
                                anchors.fill: parent
                                onPressed: {
                                    panel.scale = 1.0
                                }
                                onReleased:{
                                    panel.scale = 1.03
                                }
                                onClicked: {
                                    if( common.deleteApp(model.id) )
                                        updateAppList()
                                }
                            }
                        }
                        Rectangle {
                            width: 60
                            height: 20
                            radius: 5
                            anchors.right: parent.right
                            anchors.bottom: parent.bottom
                            anchors.margins: 20
                            color: "#f9f9f9"
                            border.color: "#fbfbfb"
                            border.width: 1
                            Text {
                                anchors.centerIn: parent
                                text: model.show ? "停用" : "启用"
                                color:  model.show ? "#ff0000" : "#00b042"
                                font.pointSize: 9
                            }
                            MouseArea{
                                anchors.fill: parent
                                onPressed:{
                                    panel.scale = 1.0
                                }
                                onReleased:{
                                    panel.scale = 1.03
                                }

                                onClicked:{
                                    if (model.show == true)
                                    {
                                        if( common.showApp(model.id, false) )
                                        {
                                            model.show = false
                                        }
                                    }
                                    else{
                                        
                                        if ( common.showApp(model.id, true) )
                                        {
                                            model.show = true
                                        }
                                    }
                                }
                            }
                        }
                        MouseArea {
                            anchors.fill: parent
                            hoverEnabled: true
                            propagateComposedEvents: false
                            onEntered:{
                                panel.scale = 1.03
                            }
                            onExited: {
                                panel.scale = 1
                            }
                            
                            onPressed:(mouse)=> 
                            {
                                mouse.accepted = false
                                // stackView.push(model.qmlfile)
                                // grid.currentIndex = index
                            }
                        }
                    }
                    Rectangle
                    {
                        width: 400
                        height: 150
                        radius: 10
                        visible: model.id == "add"
                        anchors.horizontalCenter: parent.horizontalCenter
                        Behavior on scale {
                            NumberAnimation { duration: 100 }
                        }
                        border.color: "#f2f2f2"
                        border.width: 2
                        Image{
                            id: imgAdd
                            anchors.centerIn: parent
                            source: "./resource/add.svg"
                        }
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered:{
                                imgAdd.scale = 1.1
                            }
                            onExited: {
                                imgAdd.scale = 1
                            }
                            onClicked:{
                                fileDialog.open()
                            }
                        }
                    }                  
                }
            }
            Item{
                id: gridItem
                anchors.centerIn: parent
                width: parent.width *5/6; height: parent.height - 200
                clip: true
                GridView {
                    id: grid
                    width: parent.width ; height: parent.height
                    anchors.fill: parent
                    cellWidth: 450; cellHeight: 200
                    model: appModel
                    delegate: contactDelegate
                    focus: true
                }
            }
            Text{
                anchors.bottom: gridItem.top
                anchors.left: gridItem.left
                anchors.bottomMargin: 20
                anchors.leftMargin: 25
                font.pointSize: 20
                color: "#000000"
                text: "应用中心"
            }

        }
    }
    FileDialog {
        id: fileDialog
        //currentFolder: StandardPaths.standardLocations(StandardPaths.PicturesLocation)[0]
        nameFilters: ["app files (*.tpa)"]
        onAccepted: {
            if( common.installApp(selectedFile) )
                updateAppList()
        }
    }
}