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"
import "nav"
ColumnLayout {
    id: control

    property var p_show_nav: false
    property var p_nav_type: 'car'

    Rectangle{
        id: search_bar
        // Layout.fillWidth: true
        Layout.preferredWidth: 350
        Layout.preferredHeight: 55
        color: Qt.rgba(0/255,0/255,0/255, 0.5)
        radius: 10

        Rectangle{
            width: parent.width - 20 - 42
            anchors.left: parent.left
            anchors.leftMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            height: 32
            color: '#000'
            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
                    activeColor: "#22C55E"
                    radius: 0
                    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{
            id: btn_search
            width: 32
            height: 32
            radius: 8
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            gradient: Gradient {
                orientation: Gradient.Horizontal
                GradientStop { position: 0.0; color: control.p_show_nav ? "#77ED8B" : Qt.rgba(255/255,255/255,255/255, 0.05) }
                GradientStop { position: 1.0; color: control.p_show_nav ? "#22C55E" : Qt.rgba(255/255,255/255,255/255, 0.05) }
            }
            Image{
                source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_route.png"
                anchors.centerIn: parent
                ColorOverlay{
                    id: co_img
                    anchors.fill: parent
                    color: "#2a2a2a"
                    source: parent
                    visible: false
                }
            }
            MouseArea{
                anchors.fill: parent
                hoverEnabled: true
                onEntered: {
                    if (!control.p_show_nav) {
                        parent.gradient.stops[0].color = "#77ED8B"
                        parent.gradient.stops[1].color = "#22C55E"
                        co_img.visible = true
                    }
                }
                onExited: {
                    if (!control.p_show_nav) {
                        parent.gradient.stops[0].color = Qt.rgba(255/255,255/255,255/255, 0.05)
                        parent.gradient.stops[1].color = Qt.rgba(255/255,255/255,255/255, 0.05)
                        co_img.visible = false
                    }
                }
                onClicked: {
                    console.log("open")
                    control.p_show_nav = !control.p_show_nav
                }
            }
        }
    }

    ListModel{
        id: key_point_model
        ListElement{
            p_txt: "起"
            p_tip_txt: "请输入起点"
            p_del: false
        }
        ListElement{
            p_txt: "终"
            p_tip_txt: "请输入终点"
            p_del: false
        }
    }

    Item{
        // Layout.fillWidth: true
        id: it_height
        Layout.preferredWidth: 350
        Layout.fillHeight: true
        Layout.topMargin: 0
        clip: true
        visible: control.p_show_nav

        Rectangle{
            id: result_panel
            color: "transparent"//Qt.rgba(0/255,0/255,0/255, 0.5)//Qt.rgba(255/255,255/255,255/255, 0.05)
            radius: 10
            width: parent.width
            height: {
                console.log(it_input.height + "--" + parent.height)
                return it_input.implicitHeight + tp_container.implicitHeight + cl_ranges.height + 80 + 30 + 25// + cl_detail.height
            }

            Rectangle{
                id: blur_bg
                anchors.fill: parent
                color: Qt.rgba(0/255,0/255,0/255, 0.5)
                radius: 10
            }

            // layer.effect: ShaderEffect {
            //     id: effectSource
            //     anchors.fill: parent

            //     FastBlur{
            //         id: blur
            //         anchors.fill: blur_bg
            //         source: blur_bg
            //         radius: 32
            //     }
            // }

            // FastBlur{
            //     anchors.fill: parent
            //     source: blur_bg
            //     radius: 64
            // }

            ColumnLayout{
                id: cl_container
                width: parent.width
                spacing: 10
                Item{
                    Layout.preferredHeight: 40
                    Layout.preferredWidth: result_panel.width
                    RowLayout{
                        id: tp_container
                        width: 140
                        anchors.centerIn: parent
                        spacing: 10
                        MyImgButton{
                            p_img: "nav_car.png"
                            p_checked: control.p_nav_type === 'car' ? true : false
                            onClickItem: control.p_nav_type = 'car'
                        }
                        MyImgButton{
                            p_img: "nav_truck.png"
                            p_checked: control.p_nav_type === 'truck' ? true : false
                            onClickItem: control.p_nav_type = 'truck'
                        }
                        MyImgButton{
                            p_img: "nav_walk.png"
                            p_checked: control.p_nav_type === 'walk' ? true : false
                            onClickItem: control.p_nav_type = 'walk'
                        }
                        MyImgButton{
                            p_img: "nav_bike.png"
                            p_checked: control.p_nav_type === 'bike' ? true : false
                            onClickItem: control.p_nav_type = 'bike'
                        }
                    }
                }

                Item{
                    Layout.preferredHeight: key_point_model.count * 30 + (key_point_model.count - 1) * 10
                    Layout.preferredWidth: result_panel.width
                    RowLayout{
                        id: it_input
                        anchors.fill: parent

                        Item{
                            Layout.leftMargin: 8
                            width: 22
                            Layout.preferredHeight: parent.height
                            Image{
                                anchors.centerIn: parent
                                source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_exchange.png"
                                ColorOverlay{
                                    id: img_ex
                                    anchors.fill: parent
                                    color: "#77ED8B"
                                    source: parent
                                    visible: false
                                }
                                MouseArea{
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    onEntered: {
                                        img_ex.visible = true
                                    }
                                    onExited: {
                                        img_ex.visible = false
                                    }
                                    onClicked: {
                                        console.log("open")
                                    }
                                }
                            }
                        }

                        ColumnLayout{
                            Layout.preferredWidth: result_panel.width - 60
                            spacing: 10

                            Repeater {
                                model: key_point_model
                                SearchInput {
                                    p_txt: model.p_txt
                                    p_tip_txt: model.p_tip_txt
                                    p_del: model.p_del
                                    onClickClose: {
                                        key_point_model.remove(index, 1)
                                    }
                                }
                            }
                        }


                        Item{
                            width: 22
                            height: parent.height
                            Layout.rightMargin: 8
                            Image{
                                anchors.centerIn: parent
                                source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_plus.png"
                                ColorOverlay{
                                    id: img_plus
                                    anchors.fill: parent
                                    color: "#77ED8B"
                                    source: parent
                                    visible: false
                                }
                                MouseArea{
                                    anchors.fill: parent
                                    hoverEnabled: true
                                    onEntered: {
                                        img_plus.visible = true
                                    }
                                    onExited: {
                                        img_plus.visible = false
                                    }
                                    onClicked: {
                                        key_point_model.insert(key_point_model.count - 1, {
                                                                   p_txt: "途",
                                                                   p_tip_txt: "请输入途径点",
                                                                   p_del: true
                                                               })
                                    }
                                }
                            }
                        }

                    }
                }

                Item{
                    Layout.preferredHeight: 30
                    Layout.preferredWidth: result_panel.width
                    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"
                        }
                    }
                }

                Item{
                    Layout.preferredHeight: 30
                    Layout.preferredWidth: result_panel.width - 20
                    Layout.leftMargin: 10
                    Layout.rightMargin: 10
                    Layout.bottomMargin: 10
                    RowLayout{
                        anchors.fill: parent
                        spacing: 20
                        Button {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            text: "清除路线"
                        }
                        Button {
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            text: "搜索路线"
                            highlighted: true
                            background: Rectangle {
                                anchors.fill: parent
                                radius: 6
                                gradient: Gradient {
                                   orientation: Gradient.Horizontal
                                   GradientStop { position: 0.0; color: "#77ED8B" }
                                   GradientStop { position: 1.0; color: "#22C55E" }
                                }
                            }
                        }
                    }
                }


                ScrollView{
                    Layout.preferredWidth: 350
                    Layout.preferredHeight: {
                        var hei = it_height.height - (it_input.implicitHeight + 156)
                        return hei
                    }

                    Layout.bottomMargin: 0

                    // contentHeight: result_panel.height

                    ColumnLayout{
                        id: cl_ranges
                        anchors.left: parent.left
                        anchors.right: parent.right
                        width: result_panel.width - 20
                        // anchors.leftMargin: 10
                        // anchors.rightMargin: 10
                        // Layout.preferredWidth: result_panel.width - 20
                        RouteResult{
                            p_show_detail: true
                        }
                        RouteResult{

                        }
                        RouteResult{

                        }
                        RouteResult{

                        }
                    }
                }


            }
        }

    }
    Item{
        visible: !control.p_show_nav
        Layout.fillWidth: true
        Layout.fillHeight: true
    }
}