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

import "base"

ColumnLayout {
    id: control
    signal clickSee(var data);

    property var show_type: "card"
    property var show_banner: true
    property var show_tab: true

    anchors.fill: parent
    // 头部banner
    Rectangle{
        Layout.fillWidth: true
        Layout.preferredHeight: 160
        color: "transparent"
        visible: show_banner
        RowLayout{
            anchors.fill: parent
            spacing: 20
            Rectangle{
                Layout.preferredHeight: 80
                Layout.preferredWidth: 80
                radius: 40
                layer.enabled: true
                layer.effect: OpacityMask{
                    maskSource: Rectangle{
                        width: 80
                        height: 80
                        radius: 40
                    }
                }
                Layout.leftMargin: 30
                Image{
                    anchors.fill: parent
                    source: "qrc:/qt/qml/Gallery/res/image/avatars/300-1.jpg"
                    clip: true
                }
            }
            Rectangle{
                Layout.fillWidth: true
                Layout.fillHeight: true
                color: "transparent"

                ColumnLayout{
                    anchors.fill: parent
                    Item{
                        height: 50
                        RowLayout{
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            Label{
                                id: lbl_name
                                text: "公司名称"
                                font.pointSize: 16
                                visible: false
                            }
                            LinearGradient {
                                Layout.preferredHeight: lbl_name.height
                                Layout.preferredWidth: lbl_name.width
                                source: lbl_name
                                start: Qt.point(0, 0)
                                end: Qt.point(lbl_name.width, 0)
                                gradient: Gradient {
                                    GradientStop { position: 0.0; color: "#5BE49B" }
                                    GradientStop { position: 1.0; color: "#00A76F" }
                                }
                            }
                            Rectangle{
                                Layout.preferredWidth: 56
                                Layout.preferredHeight: 24
                                Layout.leftMargin: 10
                                color: "#4D4D4D"
                                radius: 5
                                Label{
                                    text: "免费版"
                                    anchors.centerIn: parent
                                }
                            }
                        }
                        RowLayout{
                            anchors.top: parent.top
                            anchors.topMargin: 35
                            Label{
                                text: "下一代新能源创新团队"
                                color: Qt.rgba(255/255,255/255,255/255, 0.6)
                            }
                        }
                    }
                }
            }
            Rectangle{
                Layout.preferredWidth: 230
                Layout.fillHeight: true
                color: "transparent"
                RowLayout{
                    anchors.fill: parent
                    Rectangle{
                        Layout.preferredWidth: 97
                        Layout.preferredHeight: 36
                        color: Qt.rgba(255/255,255/255,255/255, 0.1)
                        radius: 5
                        RowLayout{
                            anchors.fill: parent
                            Image{
                                source: "qrc:/qt/qml/Gallery/res/image/components/user_add.png"
                                // anchors.left: parent.left
                                Layout.leftMargin: 6
                            }

                            Label{
                                text: "邀请成员"
                                Layout.leftMargin: 0
                            }
                        }
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: parent.color = Qt.rgba(255/255,255/255,255/255, 0.2)
                            onExited: parent.color = Qt.rgba(255/255,255/255,255/255, 0.1)
                        }
                    }

                    Rectangle{
                        Layout.preferredWidth: 97
                        Layout.preferredHeight: 36
                        color: Qt.rgba(255/255,255/255,255/255, 0.1)
                        gradient: Gradient {
                            orientation: Gradient.Horizontal
                            GradientStop { position: 0.0; color: "#77ED8B" }
                            GradientStop { position: 1.0; color: "#22C55E" }
                        }

                        radius: 5
                        RowLayout{
                            anchors.fill: parent
                            Image{
                                source: "qrc:/qt/qml/Gallery/res/image/components/plus.png"
                                // anchors.left: parent.left
                                // anchors.leftMargin: 10
                                Layout.leftMargin: 5
                            }

                            Label{
                                text: "添加项目"
                                color: "#2a2a2a"
                                // anchors.left: parent.left
                                // anchors.leftMargin: 32
                                // anchors.top: parent.top
                                // anchors.topMargin: 9
                            }
                        }
                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true
                            onEntered: parent.gradient.stops[1].color = "#77ED8B"
                            onExited: parent.gradient.stops[1].color = "#22C55E"
                            onClicked: {
                                console.log("open")
                                dia_newproject.open()
                            }
                        }
                    }
                }
            }
        }
    }



    ListModel{
        id: radio_type
        ListElement{
            uuid: "1"
            title: "通用"
            icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_com.png"
        }
        ListElement{
            uuid: "2"
            title: "充换电"
            icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_ele.png"
        }
        ListElement{
            uuid: "3"
            title: "加氢制氢"
            icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_h2.png"
        }
        ListElement{
            uuid: "4"
            title: "车辆管理"
            icon: "qrc:/qt/qml/Gallery/res/image/components/ico_tp_car.png"
        }
    }

    ListModel{
        id: style_type
        ListElement{
            uuid: "1"
            title: "风格1"
        }
        ListElement{
            uuid: "2"
            title: "风格2"
        }
        ListElement{
            uuid: "3"
            title: "风格3"
        }
    }

    // 新建项目弹框
    MyDialogWindow {
        id: dia_newproject

        property var cur_type: "1"

        title: "新建项目"
        Rectangle {
            implicitWidth: 610
            implicitHeight: 390
            color: "transparent"
            ColumnLayout{
                anchors.fill: parent
                anchors.leftMargin: 10
                anchors.topMargin: 10
                anchors.rightMargin: 10
                RowLayout{
                    spacing: 20
                    Layout.fillWidth: true
                    TextBox{
                        Layout.preferredWidth: 400
                        Layout.preferredHeight: 44
                        placeholderText: "标题"
                    }
                    ComboBox{
                        Layout.preferredWidth: 170
                        Layout.preferredHeight: 44
                        model: ListModel {
                            ListElement { text: "充换电" }
                            ListElement { text: "制加氢" }
                            ListElement { text: "车辆" }
                        }
                    }
                }

                Label{
                    Layout.topMargin: 15
                    text: "选择项目类型："
                    color: "#9E9E9E"
                }

                IconRadioGroup{
                    models: radio_type
                }

                RowLayout{
                    Layout.topMargin: 50
                    Label{
                        text: "选择地图风格："
                        color: "#9E9E9E"
                    }
                    Switch {
                        text: ""
                        checked: true
                        FluentUI.primaryColor: "#77ED8B"
                    }
                }

                RowLayout{
                    spacing: 20
                    Layout.fillWidth: true
                    Repeater {
                        model: style_type
                        StyleButton{
                            p_txt: model.title
                            p_check: dia_newproject.cur_type == model.uuid
                            onClicked: {
                                dia_newproject.cur_type = model.uuid
                            }
                        }
                    }
                }

                Rectangle{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 70
                    color: "#1b1b1b"
                    Layout.topMargin: 10
                    Layout.leftMargin: -20
                    Layout.rightMargin: -20
                    Layout.bottomMargin: 0
                    RowLayout{
                        anchors.fill: parent
                        anchors.leftMargin: 20
                        anchors.rightMargin: 20
                        spacing: 20
                        Button{
                            Layout.fillWidth: true
                            Layout.preferredHeight: 36
                            text: "取消"
                            onClicked: {
                                dia_newproject.close()
                            }
                        }
                        Button{
                            Layout.fillWidth: true
                            Layout.preferredHeight: 36
                            text: "确认"
                            highlighted: true
                            background: Rectangle{
                                radius: 5
                                gradient: Gradient {
                                    orientation: Gradient.Horizontal
                                    GradientStop { position: 0.0; color: "#77ED8B" }
                                    GradientStop { position: 1.0; color: "#22C55E" }
                                }
                            }
                        }
                    }
                }

                Item{
                    Layout.fillHeight: true
                }
            }
        }
    }

    // 标签切换！！！
    ListModel{
        id: tab_model
        ListElement{
            title: "全部"
        }
        ListElement{
            title: "成员"
        }
        ListElement{
            title: "设置"
        }
        ListElement{
            title: "回收站"
        }
    }

    // tabs
    Rectangle{
        visible: show_tab
        Layout.leftMargin: 30
        Layout.rightMargin: 30
        Layout.fillWidth: true
        Layout.preferredHeight: 40
        color: "transparent"
        MyTabBar {
            anchors.fill: parent
            id: bar
            clip: true
            bottomPadding: 0
            Repeater {
                model: tab_model
                MyTabButton {
                    id: btn_tab
                    text: model.title
                    font.pointSize: 12
                    height: 33
                    width: 80
                }
            }
            background: Rectangle {
                height: 2
                width: parent.width
                anchors.bottom: parent.bottom
                anchors.bottomMargin: 1
                anchors.left: parent.left
                anchors.leftMargin: 5
                color: '#404143'
            }
        }

        IconButton{
            text: ""
            icon.name: control.show_type == 'list' ? FluentIcons.graph_ViewAll : FluentIcons.graph_GlobalNavButton
            icon.width: 18
            icon.height: 18
            spacing: 5
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.topMargin: 3
            onClicked: {
                if (control.show_type == "list") {
                    control.show_type = "card"
                } else {
                    control.show_type = 'list'
                }
            }
        }
        // FluentIcons.graph_GlobalNavButton
        // FluentIcons.graph_ViewAll
    }
    Rectangle{
        visible: !show_tab
        Layout.leftMargin: 30
        Layout.rightMargin: 30
        Layout.fillWidth: true
        Layout.preferredHeight: 30
        color: "transparent"
        IconButton{
            text: ""
            icon.name: control.show_type == 'list' ? FluentIcons.graph_ViewAll : FluentIcons.graph_GlobalNavButton
            icon.width: 18
            icon.height: 18
            spacing: 5
            anchors.right: parent.right
            anchors.top: parent.top
            anchors.topMargin: 3
            onClicked: {
                if (control.show_type == "list") {
                    control.show_type = "card"
                } else {
                    control.show_type = 'list'
                }
            }
        }
    }

    Component{
        id:comp_page
        Frame{
            anchors.fill: parent
            Label{
                anchors.centerIn: parent
                text: modelData.title
            }
        }
    }




    ListModel{
        id: list_model
        ListElement {
            uuid: "0"
            title: ""
            company: ""
            time: ""
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/add.png"
        }

        ListElement {
            uuid: "1"
            title: "赋新站25年1月计费（充电）"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
        ListElement {
            uuid: "2"
            title: "河津站"
            company: "绿电智联（浙江）数据科技有限公司"
            time: "2025-01-05 12:00:00"
            desc: ""
            img: "qrc:/qt/qml/Gallery/res/image/img/map.png"
        }
    }

    Rectangle{
        Layout.fillWidth: true
        Layout.fillHeight: true
        color: "transparent"
        StackLayout {
            anchors.fill: parent
            anchors.leftMargin: 30
            anchors.rightMargin: 30
            anchors.bottomMargin: 20
            currentIndex: bar.currentIndex

            // 主内容区域
            ProjectList{
                id: pl_com
                show_type: control.show_type
                p_data: list_model
                p_cellW: {
                    var width1 = parent.width / 4
                    var width2 = parent.width / 3
                    var width3 = parent.width / 2

                    if (width1 < 290) {
                        if (width2 < 180) {
                            return width3
                        }
                        return width2
                    }
                    return width1
                }

                p_cellH: pl_com.p_cellW * 0.8

                onClickItem: function(item) {
                    control.clickSee(item)
                }
                onClickNewItem: function() {
                    dia_newproject.open()
                }
            }


            Rectangle{
                color: "yellow"
            }
            Rectangle{
                color: "blue"
            }
            Rectangle{
                color: "cyan"
            }
        }
    }


}