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" as BS

Rectangle {
    id: control
    height: parent.height
    color: Qt.rgba(255/255,255/255,255/255, 0.05)
    radius: 6

    property var p_padding: 10

    ListModel{
        id: tab_model
        ListElement{
            title: "属性"
        }
        ListElement{
            title: "数据"
        }
        ListElement{
            title: "分析"
        }
    }

    MyTabBar {
        id: bar
        width: parent.width
        anchors.left: parent.left
        anchors.top: parent.top
        anchors.right: parent.right
        anchors.leftMargin: p_padding
        anchors.topMargin: p_padding
        anchors.rightMargin: p_padding

        clip: true
        spacing: 20
        Repeater {
            model: tab_model
            MyTabButton {
                id: btn_tab
                text: model.title
                font.pointSize: 10
                implicitHeight: 30
                p_color: "#cccccc"
            }
        }
        background: Rectangle {
            anchors.fill: parent
            color: '#242424'
            radius: 5
            border.color: Qt.rgba(74/255,74/255,74/255, 0.5)
            border.width: 1
        }
    }

    StackLayout {
        currentIndex: bar.currentIndex
        anchors{
            left: bar.left
            right: bar.right
            top: bar.bottom
            bottom: parent.bottom
            topMargin: 3
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'transparent'
            ScrollView{
                width: 260
                height: parent.height
                ColumnLayout{
                    anchors.left: parent.left
                    anchors.right: parent.right
                    anchors.top: parent.top
                    anchors.topMargin: 5

                    BS.CommonTitle{
                        p_title: "封面"
                    }

                    Rectangle{
                        Layout.preferredWidth: 250
                        Layout.preferredHeight: 138
                        radius: 8
                        color: Qt.rgba(216/255,216/255,216/255, 0.05)
                        Rectangle{
                            radius: 8
                            anchors.fill: parent
                            anchors.leftMargin: 5
                            anchors.topMargin: 5
                            anchors.rightMargin: 5
                            anchors.bottomMargin: 5
                            border.color: Qt.rgba(216/255,216/255,216/255, 0.2)
                            border.width: 1
                            color: Qt.rgba(216/255,216/255,216/255, 0.05)
                            MouseArea{

                            }
                        }
                    }

                    BS.CommonTitle{
                        Layout.topMargin: 10
                        p_title: "背景"
                    }

                    Item{
                        Layout.fillWidth: true
                        Layout.preferredHeight: 35

                        RowLayout{
                            anchors.fill: parent
                            RadioButton {
                                text: "颜色"
                                checked: true
                                FluentUI.primaryColor: "#77ED8B"
                            }
                            RadioButton {
                                text: "天空盒"
                                checked: false
                                FluentUI.primaryColor: "#77ED8B"
                            }
                            RadioButton {
                                text: "图片"
                                checked: false
                                FluentUI.primaryColor: "#77ED8B"
                            }
                        }
                    }

                    BS.CommonTitle{
                        Layout.topMargin: 10
                        p_title: "选择地图风格"
                    }

                    GridView{
                        id: gv
                        Layout.preferredWidth: parent.width
                        Layout.preferredHeight: gv.contentHeight
                        cellWidth: 125
                        cellHeight: 102
                        model: ListModel{
                            ListElement{
                                title: "风格1"
                                ico: "qrc:/qt/qml/Gallery/res/image/img/style1.png"
                                checked: true
                            }
                            ListElement{
                                title: "风格1"
                                ico: "qrc:/qt/qml/Gallery/res/image/img/style1.png"
                                checked: false
                            }
                            ListElement{
                                title: "风格2"
                                ico: "qrc:/qt/qml/Gallery/res/image/img/style1.png"
                                checked: false
                            }
                            ListElement{
                                title: "风格3"
                                ico: "qrc:/qt/qml/Gallery/res/image/img/style1.png"
                                checked: false
                            }
                        }

                        delegate: BS.StyleButton{
                            p_icon: model.ico
                            p_txt: model.title
                            p_check: model.checked
                            p_w: 120
                            p_h: 92
                            p_fontSize: 9
                        }

                        clip: true
                        interactive: false
                        boundsBehavior:  Flickable.StopAtBounds
                    }


                    BS.CommonTitle{
                        Layout.topMargin: 10
                        p_title: "地理坐标系"
                    }

                    Item{
                        Layout.fillWidth: true
                        Layout.preferredHeight: 35

                        RowLayout{
                            anchors.fill: parent
                            RadioButton {
                                text: "WGS84坐标"
                                checked: true
                                FluentUI.primaryColor: "#77ED8B"
                            }
                            RadioButton {
                                text: "本地坐标系"
                                checked: false
                                FluentUI.primaryColor: "#77ED8B"
                            }
                        }
                    }

                    Rectangle{
                        Layout.topMargin: 10
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        radius: 8
                        color: "transparent"
                        Rectangle{
                            anchors.top: parent.top
                            width: parent.width
                            height: 1
                            color: Qt.rgba(216/255,216/255,216/255, 0.1)
                        }
                        RowLayout{
                            anchors.fill: parent
                            Label{
                                text: "最小级别"
                            }
                            ComboBox{
                                spacing: 0
                                model: [1,2,3,4,5,6,7,8,9,10]
                                Layout.preferredWidth: 70
                                Layout.preferredHeight: 25
                            }
                            Label{
                                text: "最大级别"
                            }
                            ComboBox{
                                model: [10,11,12,13,14,15,16,17,18,19,20]
                                Layout.preferredWidth: 70
                                Layout.preferredHeight: 25
                            }
                        }
                    }

                    Rectangle{
                        Layout.topMargin: 10
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        radius: 8
                        color: "transparent"
                        Rectangle{
                            anchors.top: parent.top
                            width: parent.width
                            height: 1
                            color: Qt.rgba(216/255,216/255,216/255, 0.1)
                        }
                        Row{
                            anchors.fill: parent
                            Label{
                                text: "显示路网或叠加层"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            Switch {
                                anchors.right: parent.right
                                text: ""
                                checked: true
                                FluentUI.primaryColor: "#77ED8B"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }

                    Rectangle{
                        Layout.topMargin: 10
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        radius: 8
                        color: "transparent"
                        Rectangle{
                            anchors.top: parent.top
                            width: parent.width
                            height: 1
                            color: Qt.rgba(216/255,216/255,216/255, 0.1)
                        }
                        Row{
                            anchors.fill: parent
                            Label{
                                text: "阴影"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            Switch {
                                anchors.right: parent.right
                                text: ""
                                checked: true
                                FluentUI.primaryColor: "#77ED8B"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }

                    Rectangle{
                        Layout.topMargin: 10
                        Layout.fillWidth: true
                        Layout.preferredHeight: 40
                        radius: 8
                        color: "transparent"
                        Rectangle{
                            anchors.top: parent.top
                            width: parent.width
                            height: 1
                            color: Qt.rgba(216/255,216/255,216/255, 0.1)
                        }
                        Row{
                            anchors.fill: parent
                            Label{
                                text: "大字体模式"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                            Switch {
                                anchors.right: parent.right
                                text: ""
                                checked: false
                                FluentUI.primaryColor: "#77ED8B"
                                anchors.verticalCenter: parent.verticalCenter
                            }
                        }
                    }


                }
            }
        }
        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'blue'
        }

        Rectangle{
            Layout.fillWidth: true
            Layout.fillHeight: true
            color: 'cyan'
        }
    }
}