import QtQuick 2.6
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3

Button {
    property alias icon: icon.source
    property color iconColor: "#54626f"
    property color iconHighlightColor: "#dcdcdc"
    property color iconHoveredBgColor: "#1d2025"
    property color iconPressedBgColor: "#1d2025"
    property color iconBgColor: "transparent"
    property alias strText: title.text
    property bool bHighlighted: false
    id: control
    background: Rectangle
                {
                    color: control.hovered ? (control.pressed ? iconHoveredBgColor : iconPressedBgColor) :  (bHighlighted ? iconHoveredBgColor : iconBgColor);

                    border.width: control.hovered || bHighlighted ? 4 : 0;
                    border.color: "#029fea"

                    // 使用矩形覆盖上层Rectangle的边框
                    Rectangle {
                        color: parent.color
                        border.width: 0
                        anchors.fill: parent
                        // 使用Margin来确定是否显示边框
                        anchors.leftMargin: 4
                        anchors.topMargin: 0
                        anchors.rightMargin: 0
                        anchors.bottomMargin: 0
                    }
                }

    contentItem: Item {
        IconFont {
            id: icon
            width: 16
            height: 16
            anchors.centerIn: parent
            anchors.verticalCenterOffset: -10
            color: control.hovered || bHighlighted ? iconHighlightColor : iconColor
        }
        Text {
            id: title
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 5
            color: control.hovered || bHighlighted ? iconHighlightColor : iconColor
            font.pixelSize: 12
        }
    }
}