import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Gallery
import "../component/base"

import QtQuick.LocalStorage 2.0
import "../DB/database.js" as DB

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

    signal clickItem(var data)
    signal lockItem(var data)
    signal showItem(var data)

    FileTreeDataController{
        id: controller
        onLoadDataStart: {
            panel_loading.visible = true
        }
        onLoadDataSuccess: {
            // dataModel.sourceData  = controller.data
            panel_loading.visible = false
        }
    }
    Component{
        id: comp_row_key
        Item{
            id: item_layout
            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{
                            top: parent.top
                            topMargin: 3
                        }
                    }
                    Item{
                        width: 10
                        height: parent.height
                    }
                }
                onDoubleClicked: {
                    console.log(rowModel["icon"])
                    console.log(rowModel["key"])
                    console.log(rowModel["height"])
                    if(rowModel.hasChildren){
                        item_layout.toggle()
                    }
                }
                onClicked: {
                    if (!rowModel["lock"]) {
                        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
                    }
                }

                IconButton{
                    id: btn_lock
                   icon.name: rowModel["lock"] ? FluentIcons.graph_Lock : FluentIcons.graph_Unlock //graph_Lock
                   icon.width: 15
                   icon.height: 15
                   anchors{
                       verticalCenter: parent.verticalCenter
                       right: parent.right
                   }
                   onClicked: {
                       rowModel["lock"] = !rowModel["lock"]
                       control.initData.forEach((v) => {
                            if (v.id == rowModel["id"]) {
                                v.lock = rowModel["lock"]
                            }
                       })
                       control.lockItem(rowModel)
                   }
                }

                IconButton{
                    icon.name: rowModel["show"] ? FluentIcons.graph_RevealPasswordMedium : FluentIcons.graph_HWPJoin // FluentIcons.
                    icon.width: 15
                    icon.height: 15
                    anchors{
                        verticalCenter: parent.verticalCenter
                        right: parent.right
                        rightMargin: 35
                    }
                    onClicked: {
                        rowModel["show"] = !rowModel["show"]
                        control.initData.forEach((v) => {
                             if (v.id == rowModel["id"]) {
                                 v.show = rowModel["show"]
                             }
                        })
                        control.showItem(rowModel)
                    }
                }
            }

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

    ColumnLayout{
        anchors.fill: parent
        spacing: 5

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 30
            Layout.topMargin: 5
            color: 'transparent'
            TextBox{
                id: tb_searcn
                anchors.fill: parent
                placeholderText: "请输入图层名称"
                trailing: IconButton{
                    implicitWidth: 30
                    implicitHeight: 20
                    icon.name: FluentIcons.graph_Search
                    icon.width: 14
                    icon.height: 14
                    padding: 0
                }
                background: InputBackground {
                    implicitWidth: 200
                    implicitHeight: 32
                    radius: 5
                    activeColor: "#22C55E"
                    color: {
                        if(!tb_searcn.enabled){
                            return tb_searcn.FluentUI.theme.res.controlFillColorDisabled
                        }else if(tb_searcn.activeFocus){
                            return tb_searcn.FluentUI.theme.res.controlFillColorInputActive
                        }else if(tb_searcn.hovered){
                            return tb_searcn.FluentUI.theme.res.controlFillColorSecondary
                        }else{
                            return tb_searcn.FluentUI.theme.res.controlFillColorDefault
                        }
                    }
                    target: tb_searcn
                }
            }
        }

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

        // TreeDataGrid{
        //     id: dataGrid

        //     Layout.fillWidth: true
        //     Layout.fillHeight: true

        //     columnWidthProvider: function(c) {
        //         return dataGrid.width
        //     }

        //     verticalHeaderVisible: false
        //     horizonalHeaderVisible: false
        //     sourceModel: dataModel
        //     columnSourceModel: ListModel{
        //         ListElement{
        //             title: qsTr("Key")
        //             dataIndex: "id"
        //             frozen: false
        //             rowDelegate: function(){return comp_row_key}
        //         }
        //     }
        //     cellBackground: Item{}
        //     cellForeground: Item{}
        // }

        MyTreeView {
            id: tree
            Layout.fillWidth: true
            Layout.fillHeight: true
            model: modelTree2
            onSelectedItemChanged: console.log(item.text)
        }
        ListModel {
            id: modelTree2
            Component.onCompleted: {
                DB.initDatabase()
                var result = DB.readMenuTree("1")
                modelTree2.append(result)
                // modelTree2.append([
                //     {id: "1", title: "Node 1", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //     {id: "2", title: "Node 2", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: [
                //         {id: "21", title: "Node 21", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items:[
                //           {id: "211", title: "Node 211", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_car.png", items: []},
                //           {id: "212", title: "Node 212", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_car.png", items: []}
                //           ]},
                //         {id: "22", title: "Node 22", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_line.png", items: []}
                //       ]
                //     },
                //     {id: "3", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //     {id: "4", title: "多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字多文字", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "31", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "32", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "33", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "34", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "35", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "36", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "37", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "38", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "39", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "30", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "300", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                //                       {id: "3000", title: "Node 3", ico: "qrc:/qt/qml/Gallery/res/image/components/ico_tree_folder.png", items: []},
                // ]);
            }
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.preferredHeight: 35
            Layout.leftMargin: 0
            Layout.rightMargin: 0
            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('')
                    }
                }
                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("")
                    }
                }
            }
        }
    }

    Component.onCompleted: {
        controller.loadData()
        setMenuData({
                        id: "1",
                        title: "多边形1"
                    })
    }
    Pane{
        id: panel_loading
        anchors.fill: dataGrid
        ProgressRing{
            anchors.centerIn: parent
            indeterminate: true
        }
        background: Rectangle{
            color: Theme.res.solidBackgroundFillColorBase
        }
    }


    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.image ? "qrc:/qt/qml/Gallery/res/image/icons/" + data.image : "", cdata: data, lock: false, show: true }
            initData.push(tmp)
        } else {
            if (data.title) {
                tmp.key = data.title
            }
            if (data.image) {
                tmp.icon = "qrc:/qt/qml/Gallery/res/image/icons/" + data.image
            }

            tmp.cdata = data
        }

        console.log(JSON.stringify(initData))

        dataModel.sourceData = initData
    }

    function delMenuData(data) {
        initData = initData.filter((v) => v.id != data.id)
        dataModel.sourceData = initData
    }
}