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

ColumnLayout {
    anchors.fill: parent
    anchors.rightMargin: 10

    // 输入框
    RowLayout{
        Layout.preferredHeight: 50
        spacing: 15
        TextBox{
            Layout.fillWidth: true
            Layout.leftMargin: 10
            Layout.preferredHeight: 35
            placeholderText: "关键词"
        }
        Button{
            text: "搜索"
            Layout.preferredWidth: 90
            Layout.preferredHeight: 35
        }
        ComboBox{
            model: ListModel {
                id: model
                ListElement { text: "1公里内" }
                ListElement { text: "5公里内" }
                ListElement { text: "10公里内" }
            }
            Layout.rightMargin: 10
        }
    }


    ListModel{
        id: tab_model
        ListElement{
            title: "充电站"
        }
        ListElement{
            title: "加氢站"
        }
        ListElement{
            title: "煤矿"
        }
        ListElement{
            title: "陆港"
        }
        ListElement{
            title: "收费站"
        }
        ListElement{
            title: "服务区"
        }
    }
    // 过滤条件
    RowLayout{
        spacing: 15
        Layout.leftMargin: 10
        Repeater {
            model: tab_model
            Rectangle{
                width: 80
                height: 30
                color: "#0C53C0"
                Label{
                    text: model.title
                    anchors.centerIn: parent
                }
                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true
                    onEntered: parent.color = "#60B0EF"
                    onExited: parent.color = "#0C53C0"
                    onClicked: {
                        console.log("cdz")
                    }
                }
            }
        }

    }
    // 搜索结果
    ColumnLayout{
        Layout.fillHeight: true
        Rectangle{
            Layout.fillHeight: true
            Layout.fillWidth: true
            Layout.leftMargin: 10
            Layout.rightMargin: 10
            Layout.topMargin: 10
            Layout.bottomMargin: 10
            color: "transparent"
            border.color: "#ffffff"
            border.width: 2

            ColumnLayout{
                anchors.fill: parent
                Rectangle{
                    Layout.leftMargin: 2
                    Layout.topMargin: 2

                    Layout.preferredWidth: parent.width - 4
                    height: 60
                    color: "transparent"

                    ColumnLayout{
                        anchors.fill: parent
                        spacing: 5
                        RowLayout{
                            Layout.fillWidth: true
                            Label{
                                Layout.fillWidth: true
                                Layout.leftMargin: 5
                                text: "新电青丰1号站充电桩"
                                font.pointSize: 14
                            }
                            Label{
                                Layout.preferredWidth: 90
                                Layout.rightMargin: 5
                                text: "2.7km"
                                horizontalAlignment: Text.AlignRight
                                font.pointSize: 8
                            }
                        }
                        RowLayout{
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            spacing: 5
                            Label{
                                Layout.leftMargin: 5
                                Layout.fillWidth: true
                                text: "营业中，充电桩：6个，空闲：2个，实时电价：1元/kwh，服务费：1.2元/kwh"
                                font.pointSize: 8
                            }

                            Button{
                                text: "查看"
                                highlighted: true
                            }
                            Button{
                                text: "导航去"
                                highlighted: true
                                Layout.rightMargin: 5
                            }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.color = "#292929"
                        onExited: parent.color = "transparent"
                    }

                    Rectangle{
                        width: parent.width
                        height: 1
                        color: "#fff"
                        anchors.bottom: parent.bottom
                    }
                }

                Rectangle{
                    Layout.leftMargin: 2
                    Layout.topMargin: 2

                    Layout.preferredWidth: parent.width - 4
                    height: 60
                    color: "transparent"

                    ColumnLayout{
                        anchors.fill: parent
                        spacing: 5
                        RowLayout{
                            Layout.fillWidth: true
                            Label{
                                Layout.fillWidth: true
                                Layout.leftMargin: 5
                                text: "青河县鹏新矿业"
                                font.pointSize: 14
                            }
                            Label{
                                Layout.preferredWidth: 90
                                Layout.rightMargin: 5
                                text: "2.7km"
                                horizontalAlignment: Text.AlignRight
                                font.pointSize: 8
                            }
                        }
                        RowLayout{
                            Layout.fillWidth: true
                            Layout.fillHeight: true
                            spacing: 5
                            Label{
                                Layout.leftMargin: 5
                                Layout.fillWidth: true
                                text: "营业中，煤炭价格：300元/吨，装载车辆：35辆，周边道路：畅通"
                                font.pointSize: 8
                            }

                            Button{
                                text: "查看"
                                highlighted: true
                            }
                            Button{
                                text: "导航去"
                                highlighted: true
                                Layout.rightMargin: 5
                            }
                        }
                    }
                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: parent.color = "#292929"
                        onExited: parent.color = "transparent"
                    }
                    Rectangle{
                        width: parent.width
                        height: 1
                        color: "#fff"
                        anchors.bottom: parent.bottom
                    }
                }

                Item{
                    Layout.fillHeight: true
                }
            }
        }
    }
}