import QtQuick 2.14
import QtQuick.Controls 2.14
import "qrc:/QmlFiles/qml/components"

Button {
    id: toolBarButtonWithText
    property string iconSource: ""
    property string buttonText: "" // 新增属性，用于设置文字
    property color hoverColor: Colors.sColor_GoldWithBlack
    property int buttonWidth: 40 // 默认宽度
    property int buttonHeight: 40 // 默认高度

    width: buttonWidth
    height: buttonHeight
    implicitWidth: buttonWidth
    implicitHeight: buttonHeight

    background: Rectangle {
        width: parent.width
        height: parent.height   
        color: "transparent"
        border.color: "red"
        border.width: 0
        radius: 0

        MouseArea {
            id: mouseArea
            anchors.fill: parent
            hoverEnabled: true

            onEntered: {
                parent.color = toolBarButtonWithText.hoverColor
            }

            onExited: {
                parent.color = "transparent"
            }
            onClicked: toolBarButtonWithText.clicked()
        }
    }
    
    contentItem: Row { // 使用 Row 布局容器
        id: contentRow
        anchors.fill: parent
        anchors.left: parent.left // 靠左对齐
        anchors.verticalCenter: parent.verticalCenter // 垂直居中
        spacing: 18 // 图片和文字之间的间距

        Image {
            id: image
            source: toolBarButtonWithText.iconSource
            width: toolBarButtonWithText.buttonHeight // 使用 buttonHeight 作为宽度，保持图标为正方形
            height: toolBarButtonWithText.buttonHeight
            fillMode: Image.PreserveAspectFit
        }

        Text {
            id: textLabel
            text: toolBarButtonWithText.buttonText // 使用新增的 buttonText 属性
            font.pixelSize: 32 // 设置字体大小
            font.family: "Microsoft YaHei" // 设置字体为微软雅黑
            font.bold: true // 设置加粗
            verticalAlignment: Text.AlignVCenter
            height: toolBarButtonWithText.buttonHeight // 高度固定为 40 像素
            color: "white" // 设置文字颜色为白色
            font.letterSpacing: 5 // 设置文字间距为 10 像素
        }
    }
}