import QtQuick

Item
{
    id: self
    width: txMsg.width < 300 ? 500 : txMsg.width + 200
    height: 50
    y: -height
    anchors.horizontalCenter: parent.horizontalCenter
    Rectangle
    {
        id: bg
        anchors.fill: parent
        color: "#fef0f0"
        border.width: 1
        border.color: "#fde2e2"
        radius: 5
        Image
        {
            width: 18
            height: 18
            x: 10
            source: "../resource/error.png"
            anchors.verticalCenter: bg.verticalCenter
        }
    }

    SequentialAnimation {
        id: parallelAnimation
        running: false
        ParallelAnimation
        {
            NumberAnimation { target: self; property: "y"; from:  -height; to:  100; duration: 300; easing.type: Easing.InOutQuad}
            NumberAnimation { target: self; property: "opacity"; from: 0; to:  1; duration: 300; easing.type: Easing.InOutQuad}
        }
        NumberAnimation { target: self; property: "scale"; from:1; to: 1; duration: 5000; }
        ParallelAnimation
        {
            NumberAnimation { target: self; property: "y"; from:100; to: -height; duration: 500;easing.type: Easing.OutQuad }
            NumberAnimation { target: self; property: "opacity"; from: 1; to:  0; duration: 200; easing.type: Easing.InOutQuad}
        }
    }
    QxText {
        id: txMsg
        color: "#f56c6c"
        font.pointSize: 12
        font.bold: true
        text: "xxxxxxxxxxxx"
        x: 50
        anchors.verticalCenter: bg.verticalCenter
    }

    function show(value)
    {
        parallelAnimation.stop()
        txMsg.text = value
        parallelAnimation.start()
    }
}