import QtQuick 2.14
import QtQuick.Controls 2.14

Button {
    id: root
    text: "按钮" 
    property string defaultColor: "transparent"
    property string hoverColor: Colors.sColor_Gold
    property string redColor: "red"
    property string greenColor: "green"
    property string colorState: defaultColor 

    background: Rectangle {
        color: root.colorState  
        border.color: "transparent"
        border.width: 0
        radius: 0
    }

    contentItem: Text {
        id: btnTextItem
        text: root.text  
        font.family: "微软雅黑"
        font.pixelSize: 14
        font.bold: true
        color: "white"
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        anchors.fill: parent
    }

    Behavior on colorState {
        ColorAnimation { duration: 100 }
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onEntered: root.colorState = root.hoverColor 
        onExited: root.colorState = root.defaultColor
        onClicked: root.clicked()
    }

    function toDefault() {
        root.colorState = root.defaultColor
    }

    function toRed() {
        root.colorState = root.redColor
    }

    function toGreen() {
        root.colorState = root.greenColor
    }
}