import QtQuick 2.15
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt.labs.qmlmodels
import Qt5Compat.GraphicalEffects

Item{
    id: control
    Layout.preferredWidth: parent.width
    Layout.preferredHeight: 93 + (p_show_detail ? detailHeight : 0)

    property var p_show_detail: false

    property var detailHeight: 27 * 6 + 120

    Rectangle{
        anchors.fill: parent
        anchors.leftMargin: 10
        anchors.rightMargin: 10

        color: Qt.rgba(255/255,255/255,255/255, 0.05)
        radius: 6

        border.color: p_show_detail ? "#77ED8B" : "transparent"
        border.width: 1

        ColumnLayout{
            anchors.fill: parent
            Item{
                Layout.fillWidth: true
                Layout.preferredHeight: 25
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                Layout.topMargin: 5
                Label{
                    text: "方案一"
                    font.pointSize: 12
                }
                Rectangle{
                    width: 97
                    height: 26
                    color: Qt.rgba(255/255,255/255,255/255, 0.05)
                    anchors.right: parent.right
                    radius: 5
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/ico_add_lay.png"
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.left: parent.left
                        anchors.leftMargin: 5
                    }
                    Label{
                        text: "添加到图层"
                        anchors.left: parent.left
                        anchors.leftMargin: 24
                        anchors.top: parent.top
                        anchors.topMargin: 3
                        color: "#77ED8B"
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            parent.color = Qt.rgba(255/255,255/255,255/255, 0.15)
                        }
                        onExited: {
                            parent.color = Qt.rgba(255/255,255/255,255/255, 0.05)
                        }
                        onClicked: {
                            console.log("open")
                        }
                    }
                }
            }
            Rectangle{
                Layout.fillWidth: true
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                color: "#888"
                Layout.preferredHeight: 1
            }

            Item{
                Layout.fillWidth: true
                Layout.preferredHeight: 25
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                RowLayout{
                    anchors.fill: parent
                    Label{
                        text: "约4.27小时"
                        Layout.fillWidth: true
                    }
                    Rectangle{
                        color: "#888"
                        Layout.preferredWidth: 1
                        Layout.preferredHeight: 11
                    }
                    Label{
                        text: "224.1km"
                        Layout.fillWidth: true
                        horizontalAlignment: Label.AlignHCenter
                    }
                    Rectangle{
                        color: "#888"
                        Layout.preferredWidth: 1
                        Layout.preferredHeight: 11
                    }
                    Label{
                        text: "红绿灯27个"
                        Layout.fillWidth: true
                        horizontalAlignment: Label.AlignHCenter
                    }
                    Rectangle{
                        color: "#888"
                        Layout.preferredWidth: 1
                        Layout.preferredHeight: 11
                    }
                    Label{
                        text: "过路费46元"
                        Layout.fillWidth: true
                        horizontalAlignment: Label.AlignHCenter
                    }
                }
            }

            Item{
                Layout.fillWidth: true
                Layout.preferredHeight: 20
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                Layout.topMargin: 0
                Label{
                    text: "途径：G0612西和高速>315国道>G0612西和高速"
                    font.pointSize: 9
                    color: Qt.rgba(255/255,255/255,255/255, 0.6)
                }
                Image {
                    source: "qrc:/qt/qml/Gallery/res/image/components/expand.png"
                    fillMode: Image.PreserveAspectFit
                    anchors.right: parent.right
                    opacity: 0.6
                    anchors.top: parent.top
                    anchors.topMargin: 3
                    rotation: p_show_detail ? 90 : 0
                    Behavior on rotation {NumberAnimation { duration: 120}}
                    ColorOverlay{
                        id: img_exp
                        anchors.fill: parent
                        color: "#77ED8B"
                        source: parent
                        visible: false
                    }
                    MouseArea{
                        anchors.fill: parent
                        hoverEnabled: true
                        onEntered: {
                            img_exp.visible = true
                        }
                        onExited: {
                            img_exp.visible = false
                        }
                        onClicked: {
                            control.p_show_detail = !control.p_show_detail
                        }
                    }
                }
            }

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

            ColumnLayout{
                id: cl_detail
                Layout.fillWidth: true
                Layout.preferredHeight: 27 * 6 + 100
                Layout.leftMargin: 10
                Layout.rightMargin: 10
                spacing: 20
                visible: p_show_detail

                Rectangle{
                    Layout.fillWidth: true
                    Layout.leftMargin: 0
                    Layout.rightMargin: 0
                    color: "#888"
                    Layout.preferredHeight: 1
                }

                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_start.png"
                    }
                    Label{
                        text: "从 巴音郭楞蒙古自治州未知道路出发"
                    }
                }
                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right.png"
                    }
                    Column{
                        Label{
                            text: "从 塔农段"
                        }
                        Label{
                            text: "67.6公里 红绿灯15个 过路费6元"
                            color: Qt.rgba(255/255,255/255,255/255, 0.6)
                            font.pointSize: 8
                        }
                    }
                }
                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right_zhi.png"
                        rotation: -90
                    }
                    Column{
                        Label{
                            text: "从 塔农段"
                        }
                        Label{
                            text: "67.6公里 红绿灯15个 过路费6元"
                            color: Qt.rgba(255/255,255/255,255/255, 0.6)
                            font.pointSize: 8
                        }
                    }
                }
                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_mid.png"
                    }
                    Label{
                        text: "从 巴音郭楞蒙古自治州未知道路出发"
                    }
                }
                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_right_zhi.png"
                    }
                    Column{
                        Label{
                            text: "从 塔农段"
                        }
                        Label{
                            text: "67.6公里 红绿灯15个 过路费6元"
                            color: Qt.rgba(255/255,255/255,255/255, 0.6)
                            font.pointSize: 8
                        }
                    }
                }
                RowLayout{
                    Layout.fillWidth: true
                    Layout.preferredHeight: 27
                    Image{
                        source: "qrc:/qt/qml/Gallery/res/image/components/map/nav_stop.png"
                    }
                    Label{
                        text: "从 巴音郭楞蒙古自治州未知道路出发"
                    }
                }

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

            }

        }

    }
}