import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Gallery

Item {
    id: control
    property int depthPadding: 15
    property var current: "0"
    property var initData: []

    property var homeChecked: true

    signal clickItem(var data)
    signal clickHome()

    Component{
        id: comp_row_key
        Item{
            id: item_layout
            anchors.fill: parent
            property var __display: display
            property bool chekced:  {
                if(!control.current){
                    return false
                }
                return __display === control.current
            }
            ListTile{
                anchors.fill: parent
                text: rowModel.key //String(__display)
                leftPadding: 6 + rowModel.depth * control.depthPadding
                highlighted: item_layout.chekced
                spacing: 0
                leading: Row{
                    spacing: 0
                    IconButton{
                        opacity: rowModel.hasChildren
                        enabled: opacity
                        icon.name: FluentIcons.graph_ChevronDown
                        width: 20
                        height: 20
                        icon.width: 12
                        icon.height: 12
                        padding: 0
                        anchors{
                            verticalCenter: parent.verticalCenter
                        }
                        contentItem.rotation: rowModel.expanded ? 0 : -90
                        onClicked: {
                            item_layout.toggle()
                        }
                    }
                    Item{
                        width: 4
                        height: parent.height
                    }
                    Image{
                        width: 15
                        height: 15
                        source: rowModel.icon ? rowModel.icon : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png" // rowModel.hasChildren ? "qrc:/qt/qml/Gallery/res/image/ic_folder.png" : "qrc:/qt/qml/Gallery/res/image/ic_file_text.png"
                        anchors{
                            verticalCenter: parent.verticalCenter
                        }
                    }
                    Item{
                        width: 10
                        height: parent.height
                    }
                }
                onDoubleClicked: {
                    console.log(rowModel["icon"])
                    if(rowModel.hasChildren){
                        item_layout.toggle()
                    }
                }
                onClicked: {
                    control.current = __display
                    control.clickItem(rowModel.cdata)
                }
                Rectangle{
                    height: 18
                    radius: 1.5
                    width: 3
                    visible: item_layout.chekced
                    color: Theme.accentColor.defaultBrushFor()

                    anchors{
                        verticalCenter: parent.verticalCenter
                        left: parent.left
                    }
                }
            }

            clip: true
            function toggle(){
                if(rowModel.expanded){
                    dataModel.collapse(rowModel.index)
                }else{
                    dataModel.expand(rowModel.index)
                }
            }
        }
    }
    // TreeDataGridModel{
    //     id: dataModel
    // }

    ListModel {
        id: dataModel
        ListElement {
            uuid: "1"
            title: "分组1"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
        ListElement {
            uuid: "2"
            title: "分组2"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
        ListElement {
            uuid: "3"
            title: "分组1"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
        ListElement {
            uuid: "4"
            title: "分组2"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
        ListElement {
            uuid: "5"
            title: "分组1"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
        ListElement {
            uuid: "6"
            title: "分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2分组2"
            icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png"
            checked: false
        }
    }

    Component{
        id: list_item
        Rectangle{
            width: parent.width
            height: 38
            color: "transparent"
            Rectangle{
                anchors.left: parent.left
                anchors.right: parent.right
                anchors.top: parent.top
                height: 34
                color: "transparent"
                RowLayout{
                    anchors.fill: parent
                    spacing: 5
                    z: 2
                    Image{
                        Layout.leftMargin: 10
                        Layout.preferredHeight: 12
                        Layout.preferredWidth: 14
                        source: "qrc:/qt/qml/Gallery/res/image/components/" + (control.current == model.uuid ? "folder_black.png" : "folder_white.png")
                    }
                    Label{
                        text: model.title
                        Layout.preferredWidth: parent.width - 80
                        elide: Text.ElideRight
                        color: control.current == model.uuid ? "#2a2a2a" : "#ffffff"
                    }
                    Item{
                        Layout.fillWidth: true
                    }
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.color = "#2d2d2d"
                    onExited: {
                        parent.color = "transparent"
                    }
                    onClicked: {
                        control.current = model.uuid
                        control.clickItem(model)
                    }
                }

                Rectangle{
                    // width: 3
                    anchors.fill: parent
                    height: 20
                    // anchors.top: parent.top
                    // anchors.topMargin: 7
                    color: "#4CA0E0"
                    radius: 5
                    z: 1
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop { position: 0.0; color: "#77ED8B" }
                        GradientStop { position: 1.0; color: "#22C55E" }
                    }
                    visible: control.current == model.uuid
                }
            }

            InfoBadge {
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.rightMargin: 10
                anchors.topMargin: 10
                count: 5
                color: "#ffffff"
                tcolor: "#2a2a2a"
            }
        }
    }

    ColumnLayout{
        spacing: 5
        anchors.fill: parent
        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            color: "transparent"
            RowLayout{
                anchors.fill: parent
                spacing: 5
                z: 2
                Image{
                    Layout.leftMargin: 10
                    Layout.preferredHeight: 12
                    Layout.preferredWidth: 14
                    source: "qrc:/qt/qml/Gallery/res/image/components/" + (control.current == "0" ? "home_black.png" : "home_white.png")
                }
                Label{
                    text: "主页"
                    color: control.current == "0" ? "#2a2a2a": "#ffffff"
                }
                Item{
                    Layout.fillWidth: true
                }
            }
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onEntered: parent.color = "#2d2d2d"
                onExited: parent.color = "transparent"
                onClicked: {
                    control.current = "0"
                    control.clickHome()
                }
            }

            Rectangle{
                // width: 3
                // height: 20
                z: 1
                anchors.fill: parent
                anchors.top: parent.top
                anchors.topMargin: 0
                radius: 5
                gradient: Gradient {
                    orientation: Gradient.Horizontal
                    GradientStop { position: 0.0; color: "#77ED8B" }
                    GradientStop { position: 1.0; color: "#22C55E" }
                }

                visible: control.current == "0"
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 1
            color: Qt.rgba(216/255,216/255,216/255, 0.2)
        }

        ScrollView{
            Layout.fillWidth: true
            Layout.fillHeight: true
            ListView{
                anchors.fill: parent
                id: list_view
                model: dataModel
                clip: true
                delegate: list_item
                highlight: Item{}
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            Layout.leftMargin: -10
            Layout.rightMargin: -10
            color: Qt.rgba(255/255,255/255,255/255, 0.05)
            radius: 5
            RowLayout{
                anchors.fill: parent
                spacing: 5
                IconButton{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.topMargin: 5
                    Layout.leftMargin: 5
                    Layout.bottomMargin: 5
                    icon.name: FluentIcons.graph_DictionaryAdd
                    icon.width: 14
                    icon.height: 14
                    spacing: 5
                    backgroundColor: "#535353"
                    onClicked: {
                        console.log(dataGrid)
                        folderNew.launch({ title: "" })
                    }
                }
                IconButton{
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    Layout.topMargin: 5
                    Layout.rightMargin: 5
                    Layout.bottomMargin: 5
                    icon.name: FluentIcons.graph_Delete
                    icon.width: 14
                    icon.height: 14
                    backgroundColor: "#535353"
                    spacing: 5
                    onClicked: {
                        console.log(dataGrid)
                        folderNew.launch({ title: "" })
                    }
                }
            }
        }
    }

    // 新建目录弹框
    WindowResultLauncher{
        id: folderNew
        path: "/newFolder"
        onResult: (data)=>{
            var data = {id: control.generateUUID(), title: data.title, height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
            control.setMenuData(data)
        }
    }
    ////////////

    Component.onCompleted: {
        // var data = {id: "1", title: "充电站规划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
        // control.setMenuData(data)
        // var data = {id: "12", title: "运输计划", height: 35, icon: "qrc:/qt/qml/Gallery/res/image/ico_tab.png", cdata: null}
        // control.setMenuData(data)
    }

    function setMenuData(data) {
        // var tmp = initData.find((v) => v.id == data.id)
        // if (!tmp) {
        //     tmp = { id: data.id, key: data.title ? data.title : "未命名", height: 35, icon: data.icon, cdata: data }
        //     initData.push(tmp)
        // } else {
        //     tmp.key = data.title
        //     tmp.cdata = data
        // }

        // dataModel.sourceData = initData
        dataModel.append({title: data.title, icon: data.icon,uuid:data.id,checked:false})
    }

    function generateUUID() {
        var d = new Date().getTime();
        var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
          var r = (d + Math.random()*16)%16 | 0;
          d = Math.floor(d/16);
          return (c=='x' ? r : (r&0x3|0x8)).toString(16);
        });
        return uuid;
    }
}