import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtQuick.Window 2.15
import FluentUI 1.0
import "../component"

FluContentPage{

    title:"Watermark"

    FluArea{
        anchors.fill: parent
        anchors.topMargin: 20

        ColumnLayout{
            anchors{
                left: parent.left
                leftMargin: 14
            }

            RowLayout{
                spacing: 10
                Layout.topMargin: 14
                FluText{
                    text:"text:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluTextBox{
                    id:text_box
                    text:"会磨刀的小猪"
                    Layout.preferredWidth: 240
                }
            }

            RowLayout{
                spacing: 10
                FluText{
                    text:"textSize:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_text_size
                    value: 20
                    from: 13
                    to:50
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"gapX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_gap_x
                    value: 100
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"gapY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_gap_y
                    value: 100
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"offsetX:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_offset_x
                    value: 50
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"offsetY:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_offset_y
                    value: 50
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"rotate:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluSlider{
                    id:slider_rotate
                    value: 22
                    from: 0
                    to:360
                }
            }
            RowLayout{
                spacing: 10
                FluText{
                    text:"textColor:"
                    Layout.alignment: Qt.AlignVCenter
                }
                FluColorPicker{
                    id:color_picker
                    Component.onCompleted: {
                        setColor(Qt.rgba(0,0,0,0.1))
                    }
                }
            }
        }

        FluWatermark{
            id:water_mark
            anchors.fill: parent
            text:text_box.text
            textColor: color_picker.colorValue
            textSize: slider_text_size.value
            rotate: slider_rotate.value
            gap:Qt.point(slider_gap_x.value,slider_gap_y.value)
            offset: Qt.point(slider_offset_x.value,slider_offset_y.value)
        }
    }

}