import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.2

Item {
    id: root
    width: 1000
    height: 600
    property alias mArea: mouseArea
    property alias mImgFull: imgFull
    signal userExit()    //定义用户退出

    //菜单树窗体
    MenuNavi {
        id:menuNavi
        x: 0
        y: 0
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 0
        anchors.top: parent.top
        anchors.topMargin: 0
        anchors.left: parent.left
        anchors.leftMargin: 0

        mMenuView.onMenuClicked: function(name){
            openTab(name);
        }
    }

    //菜单初始化
    Component.onCompleted: {
        menuNavi.mMenuView.model = menuModel;
        menuNavi.mMenuView.setMenuClicked("home");
    }

    //根据菜单名新建或打开标签页
    function openTab(name){
        var tabView = content_form.mTabView;
        var menu = getMenuItem(name)

        //遍历根据title查找tab
        for(var i=0; i<tabView.count; i++){
            var tab = tabView.getTab(i);
            if(tab.item.name === name){
                tabView.currentIndex = i;
                return;
            }
        }

        var component = Qt.createComponent(menu.toIndex + ".qml");
        if(component.status===Component.Ready){
            var newTab = tabView.addTab(menu.desc, component);
            tabView.currentIndex = tabView.count-1;
            newTab.item.name = name;
            menu_crumb.text = getMenuCrumb(name);
        }
    }

    //获取菜单面包屑
    function getMenuCrumb(name){
        for(var i = 0; i < menuModel.length; i++){
            var item1 = menuModel[i];
            if(name === item1.name){
                return item1.desc;
            }

            for(var j = 0; j < item1.subMenus.length; j++){
                var item2 = item1.subMenus[j];
                if(name === item2.name){
                    return item1.desc + " / " + item2.desc;
                }

                for(var k = 0; k < item2.subMenus.length; k++){
                    var item3 = item2.subMenus[k];
                    if(name === item3.name){
                        return item1.desc + " / " + item2.desc + " / " + item3.desc;
                    }
                }
            }
        }

    }

    //根据菜单名称，获取菜单描述
    function getMenuItem(name){
        for(var i = 0; i < menuModel.length; i++){
            var item1 = menuModel[i];
            if(name === item1.name){
                return item1;
            }

            for(var j = 0; j < item1.subMenus.length; j++){
                var item2 = item1.subMenus[j];
                if(name === item2.name){
                    return item2;
                }

                for(var k = 0; k < item2.subMenus.length; k++){
                    var item3 = item2.subMenus[k];
                    if(name === item3.name){
                        return item3;
                    }
                }
            }
        }
    }

    //主窗体
    Rectangle {
        id: rctMain
        color: "#ffffff"
        anchors.leftMargin: 250
        anchors.fill: parent

        Behavior on anchors.leftMargin { NumberAnimation { duration: 300 } }

        Rectangle {
            id: rectangle1
            height: 60
            anchors.rightMargin: 0
            anchors.right: parent.right
            anchors.left: parent.left
            anchors.top: parent.top

            Text {
                id: menu_crumb
                x: 47
                width: 250
                height: 30
                text: qsTr("首页")
                verticalAlignment: Text.AlignVCenter
                anchors.top: parent.top
                anchors.topMargin: 15
                horizontalAlignment: Text.AlignLeft
                font.pixelSize: 14
                font.family: "Alibaba PuHuiTi R"
            }

        }

        Rectangle {
            id: rctFull
            width: 40
            height: 60
            color: "#ffffff"
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 70

            Image {
                id: imgFull
                width: 30
                height: 30
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.verticalCenter
                source: "image/fullscreen.png"

                states: [
                    State {
                        name: "FULL"
                        PropertyChanges { target: imgFull; source: "image/fullscreen.png" }
                    },
                    State {
                        name: "CANCEL"
                        PropertyChanges { target: imgFull; source: "image/cancelfull.png" }
                    }
                ]
            }

            MouseArea{
                id: mouseArea
                anchors.fill: parent
            }
        }

        Rectangle {
            id: rctUser
            x: 317
            width: 70
            height: 60
            color: "#ffffff"
            anchors.top: parent.top
            anchors.topMargin: 0
            anchors.right: parent.right
            anchors.rightMargin: 0

            Image {
                id: image_user
                x: 20
                y: 10
                width: 30
                height: 30
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.top: parent.top
                anchors.topMargin: 10
                source: "image/user.png"
            }

            Text {
                id: text_user
                y: 45
                text: qsTr("管理员")
                anchors.right: parent.right
                anchors.rightMargin: 0
                anchors.left: parent.left
                anchors.leftMargin: 0
                horizontalAlignment: Text.AlignHCenter
                anchors.top: parent.top
                anchors.topMargin: 45
                font.pixelSize: 12
            }

            MouseArea{
                id: mouse_area_user
                anchors.fill: parent
                onClicked: {
                    user_menu.popup();
                }
            }


            Menu {
                id: user_menu

                MenuItem {
                    text: qsTr("修改资料")
                    onTriggered: {

                    }
                }
                MenuItem {
                    text: qsTr("修改密码")
                    onTriggered: {

                    }
                }
                MenuItem {
                    id: menu_item
                    text: qsTr("退出")
                    onTriggered: {
                        userExit();
                    }
                }
            }
        }

        //标签页主窗体
        ContentForm {
            id: content_form
            anchors.topMargin: 60
            anchors.fill: parent

            //切换标签页面
            mTabView.onCurrentIndexChanged:  {
                var tab = mTabView.getTab(mTabView.currentIndex);
                var name = tab.item.name;
                if(name){
                    menuNavi.mMenuView.setMenuClicked(name);
                    menu_crumb.text = getMenuCrumb(name);
                }
            }
        }
    }

    //菜单收缩展开按钮
    Image {
        id: imgOpenMenu
        width: 30
        height: 30
        anchors.left: parent.left
        anchors.leftMargin: 260
        anchors.top: parent.top
        anchors.topMargin: 15
        source: "image/closemenu.png"

        MouseArea {
            anchors.fill: parent
            onClicked: {
                if(root.state == '') {
                    root.state = "closeMenu"
                } else {
                    root.state = ''
                }
            }
        }
    }



    states: [
        State {
            name: "closeMenu"

            PropertyChanges {
                target: rctMain
                anchors.leftMargin: 0
            }

            PropertyChanges {
                target: imgOpenMenu
                source: "image/openmenu.png"
                anchors.leftMargin: 10
                anchors.topMargin: 15
            }
        }
    ]

    property var menuModel: JSON.parse(qsTr('
                [
                        {
                            "name": "home",
                            "desc": "首页",
                            "icon": "image/home.png",
                            "toIndex": "FirstForm",
                            "subMenus":[]
                        },
                        {
                            "name": "config",
                            "desc": "系统配置",
                            "icon": "image/config.png",
                            "toIndex": "",
                            "subMenus":[
                                {
                                    "name": "config1",
                                    "desc": "系统配置1",
                                    "icon": "",
                                    "toIndex": "FirstForm",
                                    "subMenus":[]
                                },
                                {
                                    "name": "config2",
                                    "desc": "系统配置2",
                                    "icon": "",
                                    "toIndex": "FirstForm",
                                    "subMenus":[]
                                }]
                        },
                        {
                            "name": "app",
                            "desc": "系统应用",
                            "icon": "image/app.png",
                            "toIndex": "",
                            "subMenus":[
                                {
                                    "name": "app1",
                                    "desc":"应用配置1",
                                    "icon":"",
                                    "toIndex": "",
                                    "subMenus":[
                                    {
                                        "name": "subapp1",
                                        "desc":"子配置1",
                                        "icon":"",
                                        "toIndex": "FirstForm",
                                        "subMenus":[]
                                    },
                                    {
                                        "name": "subapp2",
                                        "desc":"子配置2",
                                        "icon":"",
                                        "toIndex": "FirstForm",
                                        "subMenus":[]
                                    }
                                    ]
                                },
                                {
                                    "name": "app2",
                                    "desc":"应用配置2",
                                    "icon":"",
                                    "toIndex": "FirstForm",
                                    "subMenus":[]
                                }]
                        },
                        {
                            "name": "help",
                            "desc": "帮助",
                            "icon": "image/help.png",
                            "toIndex": "FirstForm",

                            "subMenus":[]
                        }
                  ]'))

}