/*!
 *
 * Copyright (c) 2021-2023 Diality Inc. - All Rights Reserved.
 * \copyright
 * THIS CODE MAY NOT BE COPIED OR REPRODUCED IN ANY FORM, IN PART OR IN
 * WHOLE, WITHOUT THE EXPLICIT PERMISSION OF THE COPYRIGHT OWNER.
 *
 * \file    PreTreatmentCreate.qml
 * \author  (last)      Behrouz NematiPour
 * \date    (last)      23-Oct-2022
 * \author  (original)  Behrouz NematiPour
 * \date    (original)  12-Jan-2021
 *
 */

// Qt
import QtQuick 2.12
import QtQuick.Controls 2.12 // ScrollBar

// Project
//  Qml imports
import "qrc:/globals"
import "qrc:/components"
import "qrc:/pages/pretreatment"

/*!
 * \brief   Pre-Treatment create screen
 * \details which contains the components to let user set values of the treatment parameters.
 */
PreTreatmentBase { id: _root
    objectName: "_PreTreatmentCreate" // SquishQt testability

    header.confirmEnabled:
        _bloodFlowRate          .active &&
        _dialysateFlowRate      .active &&
        _duration               .active &&
        _heparinDispensingRate  .active &&
        _heparinBolusVolume     .active &&
        _heparinStopTime        .active &&
        _salineBolus            .active &&
        _heparinType            .active &&
        _acidConcentrate        .active &&
        _bicarbonateConcentrate .active &&
        _dialyzerType           .active &&
        _dialysateTemperature   .active &&
        _arterialPressureLimits .minAdjusted &&
        _arterialPressureLimits .maxAdjusted &&
        _venousPressureLimits   .minAdjusted &&
        _venousPressureLimits   .maxAdjusted &&
        _bloodPressureInterval  .active &&
        _rinsebackFlowRate      .active


    function setInteractive(vInteractive) {
        _flickable.interactive = vInteractive
    }

    ScrollBar {
        flickable   : _flickable
        anchors.fill: _flickable
        anchors.rightMargin : Variables.minVGap
    }

    Flickable { id: _flickable
        objectName: "TreatmentCreateFlickable"
        clip: true
        anchors {
            top             : _root.title.bottom
            topMargin       : Variables.minVGap
            bottom          : _root.bottom
            bottomMargin    : Variables.notificationHeight + Variables.minVGap
            horizontalCenter: parent.horizontalCenter
        }
        width: parent.width
        contentWidth: parent.width
        contentHeight: _column.implicitHeight
        flickDeceleration: Variables.createTreatmentFlickableDeceleration

        Column { id: _column
            spacing: Variables.treatmentSpacing
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.fill: parent

            Text { id: _titleTextPrescription
                anchors.horizontalCenter: parent.horizontalCenter
                text: qsTr("PRESCRIPTION")
                color: Colors.textMain
                font.pixelSize: Fonts.fontPixelButton
                font.bold: true
            }

            SliderCreateTreatment { id: _bloodFlowRate
                objectName  : "_bloodFlowRate"
                label       : qsTr("Blood Flow Rate")
                flickable   : _flickable
                unit        : Variables.unitTextFlowRate
                minimum     : vTreatmentRanges.bloodFlowRateMin
                maximum     : vTreatmentRanges.bloodFlowRateMax
                step        : vTreatmentRanges.bloodFlowRateRes
                value       : vTreatmentRanges.bloodFlowRateDef
                onPressed   : vTreatmentCreate.bloodFlowRate = value
                onReleased  : vTreatmentCreate.bloodFlowRate = value
            }

            SliderCreateTreatment { id: _dialysateFlowRate
                objectName  : "_dialysateFlowRate"
                label       : qsTr("Dialysate Flow Rate")
                flickable   : _flickable
                unit        : Variables.unitTextFlowRate
                minimum     : vTreatmentRanges.dialysateFlowRateMin
                maximum     : vTreatmentRanges.dialysateFlowRateMax
                step        : vTreatmentRanges.dialysateFlowRateRes
                value       : vTreatmentRanges.dialysateFlowRateDef
                onPressed   : vTreatmentCreate.dialysateFlowRate = value
                onReleased  : vTreatmentCreate.dialysateFlowRate = value
            }

            SliderCreateTreatment { id: _duration
                objectName  : "_duration"
                label       : qsTr("Duration")
                flickable   : _flickable
                unit        : Variables.unitTextDuration
                minimum     : vTreatmentRanges.treatmentDurationMin
                maximum     : vTreatmentRanges.treatmentDurationMax
                step        : vTreatmentRanges.treatmentDurationRes
                value       : vTreatmentRanges.treatmentDurationDef
                onPressed   : vTreatmentCreate.treatmentDuration = value
                onReleased  : vTreatmentCreate.treatmentDuration = value
            }

//            ToDo: create a component for this,
//            This is a full implementation of a CheckBox
//            Switch { id: _heparinDelivery
//                text: qsTr("Heparin Delivery")
//                width   : Variables.createTreatmentSliderWidth  + 25

//                anchors.horizontalCenter: parent.horizontalCenter

//                indicator: Rectangle {
//                    implicitWidth   : Variables.sliderCircleDiameter * 1.7
//                    implicitHeight  : Variables.sliderCircleDiameter - ( Variables.progressbarHandlerBorderWidth * 2 )
//                    radius          : implicitHeight
//                    x               : _heparinDelivery.leftPadding
//                    y               : parent.height / 2 - height / 2
//                    color           : _heparinDelivery.checked ? Colors.backgroundButtonSelect  : Colors.createTreatmentInactive
//                    border.color    : _heparinDelivery.checked ? Colors.borderButton            : Colors.createTreatmentInactive
//                    Rectangle { id: _handler
//                        property real diameter  : Variables.sliderCircleDiameter

//                        x: _heparinDelivery.checked ? parent.width - width : 0
//                        anchors.verticalCenter: parent.verticalCenter
//                        width   : diameter
//                        height  : diameter
//                        radius  : diameter
//                        color   : _heparinDelivery.checked ? Colors.highlightProgressBar : Colors.createTreatmentInactive
//                        border  {
//                            width: 4
//                            color: Colors.textMain
//                        }
//                    }
//                }

//                contentItem: Text {
//                    enabled:  _heparinDelivery.checked
//                    text: _heparinDelivery.text
//                    font: _heparinDelivery.font
//                    opacity: enabled ? 1.0 : 0.3
//                    color   : Colors.textButton
//                    verticalAlignment: Text.AlignVCenter
//                    leftPadding: _heparinDelivery.indicator.width + _heparinDelivery.spacing
//                }
//            }

            SliderCreateTreatment { id: _heparinDispensingRate
                objectName  : "_heparinDispensingRate"
                label       : qsTr("Heparin Dispensing Rate")
                zeroLabel   : qsTr("OFF")
                flickable   : _flickable
                unit        : Variables.unitTextDispensingRate
                decimal     : Variables.heparinPrecision
                minimum     : vTreatmentRanges.heparinDispensingRateMin
                maximum     : vTreatmentRanges.heparinDispensingRateMax
                step        : vTreatmentRanges.heparinDispensingRateRes
                value       : vTreatmentRanges.heparinDispensingRateDef
                onPressed   : vTreatmentCreate.heparinDispensingRate = value
                onReleased  : vTreatmentCreate.heparinDispensingRate = value
                adjustable  : _heparinDispensingRateSwitch.checked
                inActiveZero: true

                Switch { id: _heparinDispensingRateSwitch
                    property bool active: false
                    onCheckedChanged: {
                        if ( ! active ) {
                            active = true
                            checked = ! checked
                        }
                        vTreatmentCreate.heparinDispensingRate  = 0
                        _heparinDispensingRate.value            = 0
                        _heparinDispensingRate.active           = ! checked
                    }

                    x       : width * -2
                    y       : parent.height - 13 // (height / 2)
                    width   : indicator.width
                    indicator: Rectangle {
                        implicitWidth   : Variables.sliderCircleDiameter * 1.7
                        implicitHeight  : Variables.sliderCircleDiameter - ( Variables.progressbarHandlerBorderWidth * 2 )
                        radius          : implicitHeight
                        x               : _heparinDispensingRateSwitch.leftPadding
                        y               : parent.height / 2 - height / 2
                        color           : _heparinDispensingRateSwitch.checked ? Colors.backgroundButtonSelect  : Colors.createTreatmentInactive
                        border.color    : _heparinDispensingRateSwitch.checked ? Colors.borderButton            : Colors.createTreatmentInactive
                        Rectangle {
                            property real diameter  : Variables.sliderCircleDiameter

                            x: _heparinDispensingRateSwitch.checked ? parent.width - width : 0
                            anchors.verticalCenter: parent.verticalCenter
                            width   : diameter
                            height  : diameter
                            radius  : diameter
                            color   : _heparinDispensingRateSwitch.active ? Colors.highlightProgressBar : Colors.createTreatmentInactive
                            border  {
                                width: Variables.progressbarHandlerBorderWidth
                                color: Colors.textMain
                            }
                        }
                    }

                    contentItem: Text {
                        width   : _heparinDispensingRateSwitch.width
                        text    : _heparinDispensingRateSwitch.checked ? qsTr("ON") : qsTr("OFF")
                        font    : _heparinDispensingRateSwitch.font
                        color   : _heparinDispensingRateSwitch.active  ? Colors.textMain : Colors.textDisableButton
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        anchors.bottom: _heparinDispensingRateSwitch.top
                        anchors.bottomMargin: 12
                    }
                }
            }

            SliderCreateTreatment { id: _heparinBolusVolume
                objectName  : "_heparinBolusVolume"
                label       : qsTr("Heparin Bolus Volume")
                zeroLabel   : qsTr("OFF")
                flickable   : _flickable
                unit        : Variables.unitTextFluid
                decimal     : Variables.heparinPrecision
                minimum     : vTreatmentRanges.heparinBolusVolumeMin
                maximum     : vTreatmentRanges.heparinBolusVolumeMax
                step        : vTreatmentRanges.heparinBolusVolumeRes
                value       : vTreatmentRanges.heparinBolusVolumeDef
                onPressed   : vTreatmentCreate.heparinBolusVolume = value
                onReleased  : vTreatmentCreate.heparinBolusVolume = value
                adjustable  : _heparinBolusVolumeSwitch.checked
                inActiveZero: true

                Switch { id: _heparinBolusVolumeSwitch
                    property bool active: false
                    onCheckedChanged: {
                        if ( ! active ) {
                            active = true
                            checked = ! checked
                        }
                        vTreatmentCreate.heparinBolusVolume     = 0
                        _heparinBolusVolume.value               = 0
                        _heparinBolusVolume.active              = ! checked

                    }

                    x       : width * -2
                    y       : parent.height - 13 // (height / 2)
                    width   : indicator.width
                    indicator: Rectangle {
                        implicitWidth   : Variables.sliderCircleDiameter * 1.7
                        implicitHeight  : Variables.sliderCircleDiameter - ( Variables.progressbarHandlerBorderWidth * 2 )
                        radius          : implicitHeight
                        x               : _heparinBolusVolumeSwitch.leftPadding
                        y               : parent.height / 2 - height / 2
                        color           : _heparinBolusVolumeSwitch.checked ? Colors.backgroundButtonSelect  : Colors.createTreatmentInactive
                        border.color    : _heparinBolusVolumeSwitch.checked ? Colors.borderButton            : Colors.createTreatmentInactive
                        Rectangle {
                            property real diameter  : Variables.sliderCircleDiameter

                            x: _heparinBolusVolumeSwitch.checked ? parent.width - width : 0
                            anchors.verticalCenter: parent.verticalCenter
                            width   : diameter
                            height  : diameter
                            radius  : diameter
                            color   : _heparinBolusVolumeSwitch.active ? Colors.highlightProgressBar : Colors.createTreatmentInactive
                            border  {
                                width: Variables.progressbarHandlerBorderWidth
                                color: Colors.textMain
                            }
                        }
                    }

                    contentItem: Text {
                        width   : _heparinBolusVolumeSwitch.width
                        text    : _heparinBolusVolumeSwitch.checked ? qsTr("ON") : qsTr("OFF")
                        font    : _heparinBolusVolumeSwitch.font
                        color   : _heparinBolusVolumeSwitch.active  ? Colors.textMain : Colors.textDisableButton
                        verticalAlignment: Text.AlignVCenter
                        horizontalAlignment: Text.AlignHCenter
                        anchors.bottom: _heparinBolusVolumeSwitch.top
                        anchors.bottomMargin: 12
                    }
                }
            }

            SliderCreateTreatment { id: _heparinStopTime
                objectName  : "_heparinStopTime"
                label       : qsTr("Heparin Stop Time")
                flickable   : _flickable
                unit        : Variables.unitTextDuration
                minimum     : vTreatmentRanges.heparinStopTimeMin
                maximum     : vTreatmentRanges.heparinStopTimeMax
                step        : vTreatmentRanges.heparinStopTimeRes
                value       : vTreatmentRanges.heparinStopTimeDef
                onPressed   : vTreatmentCreate.heparinStopTime = value
                onReleased  : vTreatmentCreate.heparinStopTime = value
            }

            SliderCreateTreatment { id: _salineBolus
                objectName  : "_salineBolus"
                label       : "Saline Bolus"
                flickable   : _flickable
                unit        : Variables.unitTextFluid
                minimum     : vTreatmentRanges.salineBolusVolumeMin
                maximum     : vTreatmentRanges.salineBolusVolumeMax
                step        : vTreatmentRanges.salineBolusVolumeRes
                value       : vTreatmentRanges.salineBolusVolumeDef
                onPressed   : vTreatmentCreate.salineBolusVolume = value
                onReleased  : vTreatmentCreate.salineBolusVolume = value
            }

            Text { id: _titleTextOperation
                anchors.horizontalCenter: parent.horizontalCenter
                text        : qsTr("OPERATING  PARAMETERS")
                color       : Colors.textMain
                font.pixelSize: Fonts.fontPixelButton
                font.bold   : true
            }

            GridSelection { id  : _heparinType
                objectName      : "_heparinTypeRect"
                title           : qsTr("Heparin Type")
                labels          : vTreatmentRanges.heparinTypeOptions
                onClicked       :{vTreatmentCreate.heparinType = curIndex               ; vTreatmentCreate.heparinTypeSet               = true; }
            }

            GridSelection { id  : _acidConcentrate
                objectName      : "_acidConcentrateRect"
                title           : qsTr("Acid Concentrate")
                labels          : vTreatmentRanges.acidConcentrateOptions
                onClicked       :{vTreatmentCreate.acidConcentrate = curIndex           ; vTreatmentCreate.acidConcentrateSet           = true; }
            }

            GridSelection { id  : _bicarbonateConcentrate
                objectName      : "_bicarbonateConcentrateRect"
                title           : qsTr("Bicarbonate Concentrate")
                labels          : vTreatmentRanges.bicarbonateConcentrateOptions
                onClicked       :{vTreatmentCreate.bicarbonateConcentrate = curIndex    ; vTreatmentCreate.bicarbonateConcentrateSet    = true; }
            }

            GridSelection { id  : _dialyzerType
                objectName      : "_dialyzerTypeRect"
                title           : qsTr("Dialyzer Type")
                labels          : vTreatmentRanges.dialyzerTypeOptions
                onClicked       :{vTreatmentCreate.dialyzerType = curIndex              ; vTreatmentCreate.dialyzerTypeSet              = true; }
            }

            Item { height: 1; width: 1  /* TODO : there is a design flaw in here, this is a workaround */ }

            SliderCreateTreatment { id: _dialysateTemperature
                objectName  : "_dialysateTemperature"
                label       : qsTr("Dialysate Temperature")
                flickable   : _flickable
                unit        : Variables.unitTextTemperature
                minimum     : vTreatmentRanges.dialysateTempMin
                maximum     : vTreatmentRanges.dialysateTempMax
                step        : vTreatmentRanges.dialysateTempRes
                value       : vTreatmentRanges.dialysateTempDef
                onPressed   : vTreatmentCreate.dialysateTemp = value
                onReleased  : vTreatmentCreate.dialysateTemp = value
            }

            // TODO : This has to be a Component
            Column { id: _arterialColumn
                spacing: 45
                anchors.horizontalCenter: parent.horizontalCenter
                Row { id: _arterialTitleRow
                    function setColor() {
                        let slider = _arterialPressureLimits
                        let color = Colors.textDisableButton
                        if ( slider.minAdjusted && slider.maxAdjusted ) {
                            color = Colors.textMain
                        }
                        return color
                    }
                    width   : parent.width
                    height  : _arterialLabel.height
                    anchors.left: parent.left
                    Text { id: _arterialLabel
                        visible         : true
                        width           : parent.width/2
                        color           : _arterialTitleRow.setColor()
                        text            : qsTr("Arterial Pressure Limits")
                        font.pixelSize  : Fonts.fontPixelFluidText
                    }
                    Text { id: _arterialUnit
                        visible         : true
                        width           : parent.width/2
                        color           : _arterialLabel.color
                        text            : Variables.unitTextBloodPressure
                        font.pixelSize  : Fonts.fontPixelFluidText
                        horizontalAlignment: Text.AlignRight
                    }
                }
                RangeSlider { id: _arterialPressureLimits
                    objectName  : "_arterialPressureLimitsSlider"
                    // dimension
                    height          : Variables.progressbarFluidHeight
                    width           : Variables.createTreatmentSliderWidth
                    diameter        : Variables.sliderCircleDiameter
                    anchors.horizontalCenter: parent.horizontalCenter
                    ticks           : true
                    stepSnap        : true
                    hasAdjust       : true

                    // Texts
                    lowerText.visible           : true
                    lowerText.font.pixelSize    : Fonts.fontPixelFluidText
                    lowerText.font.bold         : false
                    lowerText.anchors.topMargin : -50
                    lowerTextHorizontalCenter   : true

                    upperText.visible           : true
                    upperText.font.pixelSize    : Fonts.fontPixelFluidText
                    upperText.font.bold         : false
                    upperText.anchors.topMargin : -50
                    upperTextHorizontalCenter   : true

                    minText.visible             : true
                    minText.font.bold           : false
                    minVerticalEdgeVisible      : false

                    maxText.visible             : true
                    maxText.font.bold           : false
                    maxVerticalEdgeVisible      : false

                    // Ranges
                    step                : vTreatmentRanges.arterialPressureLimitLowRes // currently min & max are on the same slider/scale so used min as the main res
                    gapValue            : vTreatmentRanges.arterialPressureLimitLowGap // currently min & max are on the same slider/scale so used min as the main res
                    minimum             : vTreatmentRanges.arterialPressureLimitLowMin
                    maximum             : vTreatmentRanges.arterialPressureLimitHighMax
                    minValue            : vTreatmentRanges.arterialPressureLimitLowDef
                    maxValue            : vTreatmentRanges.arterialPressureLimitHighDef
                    minValueLowerBound  : vTreatmentRanges.arterialPressureLimitLowMin
                    minValueUpperBound  : vTreatmentRanges.arterialPressureLimitLowMax
                    maxValueLowerBound  : vTreatmentRanges.arterialPressureLimitHighMin
                    maxValueUpperBound  : vTreatmentRanges.arterialPressureLimitHighMax
                    // scroll handling and value updates
                    onPressed           : { setInteractive(false) }
                    onDragged           : { setInteractive(false) }
                    onReleased          : { setInteractive(true ) }
                    onMinValueChanged   : { if ( minAdjusted ) vTreatmentCreate.arterialPressureLimitLow  = minValue }
                    onMaxValueChanged   : { if ( maxAdjusted ) vTreatmentCreate.arterialPressureLimitHigh = maxValue }
                    onClicked           : { if ( minAdjusted ) vTreatmentCreate.arterialPressureLimitLow  = minValue
                                            if ( maxAdjusted ) vTreatmentCreate.arterialPressureLimitHigh = maxValue }
                }
            }

            // TODO : This has to be a Component
            Column { id: _venousColumn
                spacing: 45
                anchors.horizontalCenter: parent.horizontalCenter
                Row { id: _venousTitleRow
                    function setColor() {
                        let slider = _venousPressureLimits
                        let color = Colors.textDisableButton
                        if ( slider.minAdjusted && slider.maxAdjusted ) {
                            color = Colors.textMain
                        }
                        return color
                    }
                    width   : parent.width
                    height  : _venousLabel.height
                    anchors.left: parent.left
                    Text { id: _venousLabel
                        visible         : true
                        width           : parent.width/2
                        color           : _venousTitleRow.setColor()
                        text            : qsTr("Venous Pressure Limits")
                        font.pixelSize  : Fonts.fontPixelFluidText
                    }
                    Text { id: _venousUnit
                        visible         : true
                        width           : parent.width/2
                        color           : _venousTitleRow.setColor()
                        text            : Variables.unitTextBloodPressure
                        font.pixelSize  : Fonts.fontPixelFluidText
                        horizontalAlignment: Text.AlignRight
                    }
                }
                RangeSlider { id: _venousPressureLimits
                    objectName: "_venousPressureLimitsSlider"
                    // dimension
                    height          : Variables.progressbarFluidHeight
                    width           : Variables.createTreatmentSliderWidth
                    diameter        : Variables.sliderCircleDiameter
                    anchors.horizontalCenter: parent.horizontalCenter
                    ticks           : true
                    stepSnap        : true
                    hasAdjust       : true

                    // Texts
                    lowerText.visible           : true
                    lowerText.font.pixelSize    : Fonts.fontPixelFluidText
                    lowerText.font.bold         : false
                    lowerText.anchors.topMargin : -50
                    lowerTextHorizontalCenter   : true

                    upperText.visible           : true
                    upperText.font.pixelSize    : Fonts.fontPixelFluidText
                    upperText.font.bold         : false
                    upperText.anchors.topMargin : -50
                    upperTextHorizontalCenter   : true

                    minText.visible             : true
                    minText.font.bold           : false
                    minVerticalEdgeVisible      : false

                    maxText.visible             : true
                    maxText.font.bold           : false
                    maxVerticalEdgeVisible      : false

                    // Ranges
                    step                : vTreatmentRanges.venousPressureLimitLowRes // currently min & max are on the same slider/scale so used min as the main res
                    gapValue            : vTreatmentRanges.venousPressureLimitLowGap // currently min & max are on the same slider/scale so used min as the main res
                    minimum             : vTreatmentRanges.venousPressureLimitLowMin
                    maximum             : vTreatmentRanges.venousPressureLimitHighMax
                    minValue            : vTreatmentRanges.venousPressureLimitLowDef
                    maxValue            : vTreatmentRanges.venousPressureLimitHighDef
                    minValueLowerBound  : vTreatmentRanges.venousPressureLimitLowMin
                    minValueUpperBound  : vTreatmentRanges.venousPressureLimitLowMax
                    maxValueLowerBound  : vTreatmentRanges.venousPressureLimitHighMin
                    maxValueUpperBound  : vTreatmentRanges.venousPressureLimitHighMax
                    // scroll handling and value updates
                    onPressed           : { setInteractive(false) }
                    onDragged           : { setInteractive(false) }
                    onReleased          : { setInteractive(true ) }
                    onMinValueChanged   : { if ( minAdjusted ) vTreatmentCreate.venousPressureLimitLow  = minValue }
                    onMaxValueChanged   : { if ( maxAdjusted ) vTreatmentCreate.venousPressureLimitHigh = maxValue }
                    onClicked           : { if ( minAdjusted ) vTreatmentCreate.venousPressureLimitLow  = minValue
                                            if ( maxAdjusted ) vTreatmentCreate.venousPressureLimitHigh = maxValue }
                }
            }

            SliderCreateTreatment { id: _bloodPressureInterval
                objectName  : "_bloodPressureMeasurementInterval"
                label       : qsTr("Blood Pressure Measurement Interval")
                zeroLabel   : qsTr("OFF")
                flickable   : _flickable
                unit        : Variables.unitTextDuration
                minimum     : vTreatmentRanges.bloodPressureMeasureIntervalMin
                maximum     : vTreatmentRanges.bloodPressureMeasureIntervalMax
                step        : vTreatmentRanges.bloodPressureMeasureIntervalRes
                value       : vTreatmentRanges.bloodPressureMeasureIntervalDef
                onPressed   : vTreatmentCreate.bloodPressureMeasureInterval = value
                onReleased  : vTreatmentCreate.bloodPressureMeasureInterval = value
            }

            SliderCreateTreatment { id: _rinsebackFlowRate
                objectName  : "_rinsebackFlowRate"
                label       : qsTr("Rinseback Flow Rate")
                flickable   : _flickable
                unit        : Variables.unitTextFlowRate
                minimum     : vTreatmentRanges.rinsebackFlowRateMin
                maximum     : vTreatmentRanges.rinsebackFlowRateMax
                step        : vTreatmentRanges.rinsebackFlowRateRes
                value       : vTreatmentRanges.rinsebackFlowRateDef
                onPressed   : vTreatmentCreate.rinsebackFlowRate = value
                onReleased  : vTreatmentCreate.rinsebackFlowRate = value
            }
            Item {
                width   : 50
                height  : 50
            }
        }
    }
}