import QtQuick 2.15
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt.labs.qmlmodels
import Qt5Compat.GraphicalEffects

Rectangle{
    id: control
    property var show_type: "card"
    property var p_data

    property var p_cellW: 310
    property var p_cellH: 210

    signal clickNewItem()

    signal clickItem(var item)

    color: "transparent"
    Layout.fillWidth: true

    Menu {
        id:menu_group
        width: 140
        BaseMenuItem{
            m_icon: "qrc:/qt/qml/Gallery/res/image/icons/edit.png"
            m_text: "重命名"
            m_key: ""
            show_key: false
            onClickItem: {

            }
        }
        BaseMenuItem{
            m_icon: "qrc:/qt/qml/Gallery/res/image/icons/delete.png"
            m_text: "删除"
            m_key: ""
            show_key: false
            onClickItem: {

            }
        }
    }

    Component{
        id: com_project
        Rectangle{
            id: rect_con
            width: control.p_cellW - 10
            height: control.p_cellH - 10
            color: Qt.rgba(255/255,255/255,255/255, 0.05)
            radius: 5
            Rectangle{
                visible: model.uuid != "0"
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                anchors.topMargin: 5
                anchors.bottomMargin: 5
                color: "transparent"
                layer.enabled: true
                layer.effect: OpacityMask{
                    maskSource: Rectangle{
                        width: control.p_cellW - 10
                        height: control.p_cellH - 70
                        radius: 5
                    }
                }

                Image{
                    id: image
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.right: parent.right
                    height: control.p_cellH - 70
                    source: model.img
                }

                Rectangle{
                    width: parent.width
                    height: 40
                    color: "transparent"
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                    RowLayout{
                        anchors.fill: parent
                        anchors.topMargin: 1
                        Item{
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            RowLayout{
                                anchors.top: parent.top
                                anchors.left: parent.left
                                anchors.leftMargin: 5
                                Image{
                                    source: "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"
                                }
                                Label{
                                    text: model.title
                                    font.pointSize: 10
                                    font.bold: true
                                    Layout.maximumWidth: rect_con.width - 135
                                    elide: Text.ElideRight
                                }
                                Rectangle{
                                    color: "#159A59"
                                    width: 51
                                    height: 20
                                    radius: 10
                                    Label{
                                        anchors.centerIn: parent
                                        text: "已启用"
                                        font.pointSize: 9
                                    }
                                }
                            }
                            Label{
                                anchors.bottom: parent.bottom
                                anchors.bottomMargin: 1
                                anchors.left: parent.left
                                anchors.leftMargin: 5
                                text: "更新于 2月24日  20:34"
                                color: Qt.rgba(255/255,255/255,255/255, 0.6)
                                font.pointSize: 9
                            }
                        }
                        Item{
                            Layout.preferredWidth: 30
                            Layout.fillHeight: true
                            Layout.rightMargin: 5
                            RoundImageView{
                                width: 32
                                height: 32
                                radius: 32/2
                                borderWidth: 2
                                sourceSize: Qt.size(32*2,32*2)
                                source: "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg"
                                anchors{
                                    verticalCenter: parent.verticalCenter
                                }
                            }
                        }
                    }
                }
            }

            Rectangle{
                visible: model.uuid == "0"
                anchors.fill: parent
                anchors.leftMargin: 5
                anchors.rightMargin: 5
                anchors.topMargin: 5
                anchors.bottomMargin: 5

                color: "#303030"
                radius: 3
                Image{
                    source: "qrc:/qt/qml/Gallery/res/image/img/add.png"
                    anchors.centerIn: parent
                }
            }

            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: parent.color = Qt.rgba(255/255,255/255,255/255, 0.15)
                onExited: parent.color = Qt.rgba(255/255,255/255,255/255, 0.05)
                onClicked: {
                    if (model.uuid == "0") {
                        control.clickNewItem()
                    } else {
                        control.clickItem(model)
                    }
                }
            }
        }
    }


    ColumnLayout{
        anchors.fill: parent

        Item{
            visible: control.show_type == "card"
            Layout.fillWidth: true
            Layout.fillHeight: true
            ScrollView{
                anchors.fill: parent

                ColumnLayout{

                    RowLayout{
                        Layout.fillWidth: true
                        Layout.preferredHeight: 30
                        Label{
                            text: "分组名称"
                            font.pointSize: 11
                            color: "#20C05D"
                            Layout.leftMargin: 5
                        }
                        IconButton{
                            icon.name: FluentIcons.graph_More
                            icon.width: 14
                            icon.height: 14
                            spacing: 5
                            Layout.leftMargin: 5
                            onClicked: {
                                menu_group.popup(this)
                                menu_group.x = -50
                                menu_group.y = 20
                            }
                        }
                    }

                    GridView{
                        id: gv
                        Layout.preferredWidth: control.width
                        Layout.preferredHeight: gv.contentHeight
                        cellWidth: control.p_cellW
                        cellHeight: control.p_cellH
                        model: p_data
                        delegate: com_project
                        clip: true
                        interactive: false
                        boundsBehavior:  Flickable.StopAtBounds
                    }

                    RowLayout{
                        visible: control.show_type == "card"
                        Layout.preferredHeight: 30
                        Label{
                            text: "分组名称"
                            font.pointSize: 11
                            color: "#20C05D"
                            Layout.leftMargin: 5
                        }
                        IconButton{
                            icon.name: FluentIcons.graph_More
                            icon.width: 14
                            icon.height: 14
                            spacing: 5
                            Layout.leftMargin: 5
                            onClicked: {
                                menu_group.popup(this)
                                menu_group.x = -50
                                menu_group.y = 20
                            }
                        }
                    }
                }
            }

        }


        // 表格模式
        Rectangle{
            visible: control.show_type == "list"
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.leftMargin: 5
            id: com_project_list
            color: 'transparent'

            Row{
                id: tb_header
                anchors.fill: parent
                anchors.topMargin: 10
                spacing: 0

                Repeater{
                    model: ["文件名","项目状态","更新时间","创建时间", "创建人"]

                    Rectangle{
                        width: {
                            var w = 0
                            switch(index){
                                case 0: w = parent.width - 700;break;
                                case 1: w = 150;break;
                                case 2: w = 200;break;
                                case 3: w = 200;break;
                                case 4: w = 150;break;
                            }
                            console.log(w)
                            return w
                        }
                        height: 30
                        color: "transparent"
                        Text {
                            text: modelData
                            anchors.centerIn: this
                            font.pointSize: 10
                            color: "#9E9E9E"
                        }
                    }
                }
            }

            ScrollView{
                anchors.fill: parent
                anchors.topMargin: 40

                ColumnLayout{
                    id: col_container
                    width: tb_header.width

                    // 表格头部
                    RowLayout{
                        Layout.topMargin: 0

                        Label{
                            text: "分组名称"
                            font.pointSize: 11
                            color: "#20C05D"
                        }
                        IconButton{
                            icon.name: FluentIcons.graph_More
                            icon.width: 14
                            icon.height: 14
                            spacing: 5
                            Layout.leftMargin: 5
                            onClicked: {
                                menu_group.popup(this)
                                menu_group.x = -50
                                menu_group.y = 20
                            }
                        }
                    }


                    TableView {
                        id: tv_data
                        columnSpacing: 0
                        rowSpacing: 10
                        clip: true
                        Layout.topMargin: 0
                        Layout.fillWidth: true
                        Layout.preferredHeight: tv_data.rows * 40
                        interactive: false

                        model: TableModel {
                            TableModelColumn { display: "title" }
                            TableModelColumn { display: "status" }
                            TableModelColumn { display: "utime" }
                            TableModelColumn { display: "ctime" }
                            TableModelColumn { display: "user" }

                            rows: [
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                                { "title": {"title": "河津一号充换电站设计", "icon": "qrc:/qt/qml/Gallery/res/image/components/ico_project.png"}, "status": "已启用", "utime": "2025-02-24 16:00:00", "ctime": "2025-02-24 16:00:00", "user": {"avatar": "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg", "name": "任泊然"}  },
                            ]
                        }

                        delegate: DelegateChooser{

                            DelegateChoice{
                                column: 0
                                delegate: Rectangle{
                                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                                    implicitWidth: tb_header.width - 700
                                    implicitHeight: 40

                                    Image{
                                        source: display.icon
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.leftMargin: 10
                                        anchors.topMargin: 13
                                    }

                                    Text {
                                        text: display.title
                                        font.pointSize: 12
                                        color: "#ffffff"
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.leftMargin: 35
                                        anchors.topMargin: 9

                                        width: parent.width - 50
                                        elide: Text.ElideRight
                                    }

                                    MouseArea{
                                        anchors.fill: parent
                                        hoverEnabled: true
                                        onEntered: {
                                            console.log(index)
                                        }
                                        onExited: {
                                        }
                                    }
                                }
                            }
                            DelegateChoice{
                                column: 1
                                delegate: Rectangle{
                                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                                    implicitWidth: 150
                                    implicitHeight: 40

                                    Rectangle {
                                        radius: 20
                                        width: 70
                                        height: 30
                                        anchors.top: parent.top
                                        anchors.topMargin: 5
                                        color: "#159A59"
                                        Label{
                                            text: display
                                            anchors.centerIn: parent
                                            font.pointSize: 10
                                        }
                                    }
                                }
                            }
                            DelegateChoice{
                                column: 2
                                delegate: Rectangle{
                                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                                    implicitWidth: 200
                                    implicitHeight: 40

                                    Text {
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.leftMargin: 0
                                        anchors.topMargin: 11
                                        text: display
                                        font.pointSize: 10
                                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                                    }
                                }
                            }
                            DelegateChoice{
                                column: 3
                                delegate: Rectangle{
                                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                                    implicitWidth: 200
                                    implicitHeight: 40

                                    Text {
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.leftMargin: 0
                                        anchors.topMargin: 11
                                        text: display
                                        font.pointSize: 10
                                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                                    }
                                }
                            }
                            DelegateChoice{
                                column: 4
                                delegate: Rectangle{
                                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                                    implicitWidth: 150
                                    implicitHeight: 40

                                    RoundImageView{
                                        width: 32
                                        height: 32
                                        radius: 32/2
                                        borderWidth: 2
                                        sourceSize: Qt.size(32*2,32*2)
                                        source: display.avatar
                                        anchors{
                                            verticalCenter: parent.verticalCenter
                                        }
                                    }

                                    Text {
                                        anchors.left: parent.left
                                        anchors.top: parent.top
                                        anchors.leftMargin: 40
                                        anchors.topMargin: 11
                                        text: display.name
                                        font.pointSize: 10
                                        color: Qt.rgba(255/255,255/255,255/255, 0.6)
                                    }
                                }

                            }

                        }

                    }


                    RowLayout{
                        Layout.topMargin: 20

                        Label{
                            text: "分组名称"
                            font.pointSize: 11
                            color: "#20C05D"
                        }
                        IconButton{
                            icon.name: FluentIcons.graph_More
                            icon.width: 14
                            icon.height: 14
                            spacing: 5
                            Layout.leftMargin: 5
                            onClicked: {
                                menu_group.popup(this)
                                menu_group.x = -50
                                menu_group.y = 20
                            }
                        }
                    }

                }
            }
        }
    }
}