import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Qt5Compat.GraphicalEffects

Item{
    id: control

    property var p_btnChoose: true
    property var p_btnClear: true
    property var p_label: ""
    property var p_title: ""

    signal clickItem()

    Layout.preferredWidth: 100
    Layout.preferredHeight: 136
    Label{
        text: control.p_label
        color: Qt.rgba(255/255,255/255,255/255, 0.6)
    }
    Rectangle{
        width: 96
        height: 96
        anchors.top: parent.top
        anchors.topMargin: 20
        color: Qt.rgba(255/255,255/255,255/255, 0.1)
        radius: 10

        Image{
            source: "qrc:/qt/qml/Gallery/res/image/icons/dw.png"
            anchors.centerIn: parent
            width: 40
            fillMode: Image.PreserveAspectFit
        }

        Rectangle{
            id: mb_icon
            radius: 10
            z: 10
            border.color: Qt.rgba(255/255,255/255,255/255, 0.1)
            border.width: 1
            anchors.fill: parent
            color: Qt.rgba(0/255,0/255,0/255, 0.6)
            visible: false
            Item{
                width: 70
                height: 60
                anchors.centerIn: parent
                ColumnLayout{
                    anchors.fill: parent
                    Button{
                        visible: control.p_btnChoose
                        Layout.preferredWidth: parent.width
                        text: "重新选择"
                        background: Rectangle {
                            color: Qt.rgba(255/255,255/255,255/255, 0.3)
                            radius: 5
                        }
                        onClicked: {
                            control.clickItem()
                        }
                    }
                    Button{
                        visible: control.p_btnClear
                        Layout.preferredWidth: parent.width
                        text: "清除"
                        background: Rectangle {
                            color: Qt.rgba(255/255,255/255,255/255, 0.3)
                            radius: 5
                        }
                    }
                }
            }
        }

        MouseArea{
            anchors.fill: parent
            hoverEnabled: true
            onEntered: {
                mb_icon.visible = true
            }
            onExited: {
                mb_icon.visible = false
            }
        }
    }
    Label{
        width: parent.width - 10
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        text: control.p_title
        elide: Text.ElideRight
    }
}