import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls.Styles 1.4


import QtQuick.Controls 1.4
import QtQuick.Controls 2.3
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0
import QtQuick.Shapes 1.4



Window {
    id:mainWindow
    width: 800
    height: 600
    visible: true
    title: qsTr("Hello World")

    Rectangle{
        id:rectid
        width:781
        height: 506
        gradient: Gradient {
            GradientStop{
                position: 0.0;color: "#f5f5f5"
            }
            GradientStop{
                position: 0.5;color: "#c8c8c8"
            }
            GradientStop{
                position: 1.0;color: "#9b9b9b"
            }


        }
        border.color: "black"
        border.width: 1
        anchors.verticalCenterOffset: -51
        anchors.horizontalCenterOffset: 7
        radius: 20
        anchors.centerIn: parent
        Text {
            id: alarm1
            text: qsTr("Disinfection history")
            x: 70
            y: 10
            width: 60; height:150;
            color: "#3A3B3C"
            //anchors.left: parent
            anchors {
                left:parent.right
            }

            font.pixelSize: 35
            anchors.leftMargin: -722
            // font.bold: true
        }
        Rectangle{
            id:alarm2
            width: 100; height:45;
            x: 669
            y: 2
            antialiasing: true
            smooth: true
            gradient: Gradient
            {
                GradientStop
                {
                    id: ueButtonGradientStopPosition0

                    position: 0
                    color: "#d1d1d1"
                }   // GradientStop

                GradientStop
                {
                    id: ueButtonGradientStopPosition1

                    position: 0.5
                    color: "#b8b8b8"
                }   // GradientStop
                GradientStop
                {
                    id: ueButtonGradientStopPosition2

                    position: 1.0
                    color: "#a8a8a8"
                }   // GradientStop
            }   // Gradient

            border.color: "#7b7b7b"
            border.width: 2
            radius: 15
            Text {
                id: tx
                x: 34
                y: -2
                width: 99
                height: 47
                text: qsTr("X")
                color: "#4d4d4d"
                font.bold: false
                font.pointSize: 32
                // palette.tx: "#4d4d4d"

            }

            MouseArea{
                anchors.fill: parent
                anchors.rightMargin: 3
                anchors.bottomMargin: -2
                anchors.leftMargin: 5
                anchors.topMargin: 2
                onClicked:{

                    close()
                }


            }
        }
    //}


    Rectangle {
        id: rectangle1
        z:1
        width: 705
        height: 390
        anchors.centerIn: parent
        radius:20


        TableView {
            id: tableView
            y: 47
            clip: true
            visible: true
            anchors.horizontalCenterOffset: -13

            width: 0.95 * parent.width; height: 0.8 * parent.height
            anchors.horizontalCenter: parent.horizontalCenter
            verticalScrollBarPolicy: 2
            horizontalScrollBarPolicy: 0
            anchors.rightMargin: 8
            antialiasing: false
            headerVisible: true
            frameVisible: false



            rowDelegate: Rectangle {
                color: (styleData.row & 1) ? "#FFFFFF" : "#FFFFFF"
                height: 40
            }


            TableViewColumn {
                id: titleColumn
                title: "Date/Time"
                role: "title"
                movable: true
                resizable: true
                width: 300
                delegate: Rectangle {
//                    border.color: "black"
//                    border.width: 2
                    z:1
                    x: 80
                    y:10
                    color: "transparent"
                    Text {
                        text: styleData.value
                        font.bold: true
                        font.pointSize: 12
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        anchors.fill: parent
                    }
                }
            }


            TableViewColumn {
                id: valueColumn
                title: "program"
                role: "value"
                movable: false
                resizable: false
                width: 150
                delegate: Rectangle {
//                    border.color: "Black"
//                    border.width: 2
                    z:1
                    color: "transparent"
                    Text {
                        font.bold: true
                        font.pointSize: 12
                        elide: styleData.elideMode
                        text: styleData.value
                        anchors.centerIn: parent
                    }
                }
            }


            TableViewColumn {
                id: valueColumn1
                title: "status"
                role: "value1"
                movable: false
                resizable: false
                width: 150
                delegate: Rectangle {
//                    border.color: "Black"
//                    border.width:2
                    z:1
                    color: "transparent"
                    Text {
                        font.bold: true
                        font.pointSize: 12
                        elide: styleData.elideMode
                        text: styleData.value
                        anchors.centerIn: parent
                    }
                }
            }


            headerDelegate: Rectangle {
                height: 30
                //border.color: "black"
                Text {
                    text: styleData.value
                    font.bold: true
                    font.pointSize: 12
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                    anchors.fill: parent

                }
            }

            itemDelegate: Rectangle {

                Rectangle {
                    anchors {
                        right: parent.right
                        top: parent.top
                        bottom: parent.bottom
                    }
                    width: 1
                    color: "black"
                }
            }



            model: sourceModel

            style: TableViewStyle {

                frame: Rectangle{
                    border.color: "transparent"
                    border.width: 1
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 1
                    //color: "transparent"
                    color: "#0D82C8"
                    //color: "black"
                    radius: 15

                }


                handle: Rectangle {

                    id: handleRect
                    color: "transparent"
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 3
                    anchors.top: parent.top
                    anchors.topMargin: 2
                    implicitWidth: 33 // This will be overridden by the width of the scrollbar
                    implicitHeight: 50 // This will be overridden based on the size of the scrollbar

                    Rectangle {
                        anchors.horizontalCenter: handleRect.horizontalCenter
                        anchors.bottom: handleRect.bottom
                        anchors.bottomMargin: 0
                        anchors.top: handleRect.top
                        anchors.topMargin: 0
                        anchors.rightMargin: 5
                        implicitWidth: 31 // This will be overridden by the width of the scrollbar
                        implicitHeight: 35
                        color: "#0D82C8"
                        border.width: 1
                        radius:15
                    }
                }

                scrollBarBackground: Rectangle {
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 0
                    anchors.top: parent.top
                    anchors.topMargin: 0
                    implicitWidth: 33
                    implicitHeight: 45
                    color: "#B9B9B9"
                    //border.color: "black"
                    border.width: 0
                    radius:30
                    //rotation:180
                    gradient: Gradient {
                        orientation: Gradient.Horizontal
                        GradientStop {
                            position: 0.02283
                            color: "#6c6969"
                        }

                        GradientStop {
                            position: 1
                            color: "#ffffff"
                        }
                    }


                }
                //}
                decrementControl: Rectangle {
                    //border.color: "transparent"
                    //border.color: "black"
                    border.width: 0
                    radius:10
                    implicitWidth: 30
                    anchors.left: parent.left
                    anchors.leftMargin: 2
                    implicitHeight: 25
                    color: "#0D82C8"
                    Image {
                        anchors.centerIn: parent
                        width:15
                        height:15
                        rotation: 0
                        source: "images/caret-arrow-up.png"
                    }
                }

                incrementControl: Rectangle {
                    implicitWidth: 30
                    anchors.left: parent.left
                    anchors.leftMargin: 2
                    implicitHeight: 25
                    color: "#0D82C8"
                    radius: 10
                    Image {
                        anchors.centerIn: parent
                        width:15
                        height:15
                        rotation: 180
                        source: "images/caret-arrow-up.png"
                    }
                    //border.color: "black"
                    border.width: 0
                }
            }

        }

        ListModel {
            id: sourceModel

            ListElement {
                title: "10/19/2014 12.45pm"
                value:"Heat"
                value1: "user aborted"
            }
            ListElement {
                title: "10/18/2014 12.45pm"
                value: "citric"
                value1: "completed"
            }
            ListElement {
                title: "10/17/2014 12.45pm"
                value: "perace"
                value1: "completed"

            }
            ListElement {
                title: "10/16/2014 12.45pm"
                value: "heat"
                value1: "completed"
            }
            ListElement {
                title: "10/15/2014 12.45pm"
                value: "short heat citric"
                value1: "completed"
            }
            ListElement {
                title: "10/14/2014 12.45pm"
                value: "Hypochl 10%"
                value1: "completed"
            }
            ListElement {
                title: "10/13/2014 12.45pm"
                value: "citric 20%"
                value1: "incomplete"
            }
            ListElement {
                title: "10/12/2014 12.45pm"
                value: "Heat"
                value1: "completed"
            }
            ListElement {
                title: "10/12/2014 12.45pm"
                value: "Heat"
                value1: "completed"
            }
            ListElement {
                title: "10/12/2014 12.45pm"
                value: "Heat"
                value1: "completed"
            }
            ListElement {
                title: "10/12/2014 12.45pm"
                value: "Heat"
                value1: "completed"
            }


        }
    }
}
}