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

Rectangle{
    id: control
    property var p_icon: "qrc:/qt/qml/Gallery/res/image/img/style1.png"
    property var p_txt: "风格"
    property var p_check: false

    property var p_w: 135
    property var p_h: 114

    property var p_fontSize: 11

    signal clicked()

    Layout.preferredWidth: p_w
    Layout.preferredHeight: p_h

    width: p_w
    height: p_h

    radius: 8

    onP_checkChanged: function() {
        if (control.p_check){
            lbl_tp_txt.color = "#2a2a2a"
            control.gradient.stops[0].color = "#77ED8B"
            control.gradient.stops[1].color = "#22C55E"
        } else {
            lbl_tp_txt.color = "#9E9E9E"
            control.gradient.stops[0].color = Qt.rgba(255/255,255/255,255/255, 0.05)
            control.gradient.stops[1].color = Qt.rgba(255/255,255/255,255/255, 0.05)
        }
    }

    gradient: Gradient {
        orientation: Gradient.Horizontal
        GradientStop { position: 0.0; color: control.p_check ? "#77ED8B" : Qt.rgba(255/255,255/255,255/255, 0.05) }
        GradientStop { position: 1.0; color: control.p_check ? "#22C55E" : Qt.rgba(255/255,255/255,255/255, 0.05) }
    }
    Image{
        source: control.p_icon
        width: control.p_w - 8
        height: control.p_h - 32
        anchors {
            left: parent.left
            top: parent.top
            leftMargin: 4
            topMargin: 4
        }
    }
    Label{
        id: lbl_tp_txt
        text: control.p_txt
        color: control.p_check ? "#2a2a2a" : "#9E9E9E"
        font.pointSize: control.p_fontSize
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 5
        anchors.horizontalCenter: parent.horizontalCenter
    }
    MouseArea{
        anchors.fill: parent
        hoverEnabled: true
        onEntered: {
            if (!control.p_check) {
                lbl_tp_txt.color = "#2a2a2a"
                parent.gradient.stops[0].color = "#77ED8B"
                parent.gradient.stops[1].color = "#22C55E"
            }
        }

        onExited: {
            if (!control.p_check) {
                lbl_tp_txt.color = "#9E9E9E"
                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)
            }
        }

        onClicked: {
            control.clicked()
        }
    }
}