import QtQuick
import QtQuick.Controls

Item {
    id:root
    width: 200
    height: 450

    property int vtNum: 340
    property int peepNum: 10
    property int oxygenNum: 21

    property int targetValue:0


    anchors{
        right: parent.right
        top: parent.top
    }

    // model control等点击按钮
    Component{
        id:theButton
        Button{
            id:theBtn
            width: parent.width
            height: 50
            flat: true

            property string theIcon: ""

            property int targetValue

            font.pixelSize: 18

            background: Rectangle{
                radius: 5
                color: theBtn.targetValue === root.targetValue ? "#ebfafa":"#5acdbe"
            }

            contentItem: Item {
                Text {
                    anchors.left: parent.left
                    anchors.leftMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    text: theBtn.text
                    font:theBtn.font
                    color: theBtn.targetValue === root.targetValue ?"#5acdbe":"white"
                }

                Text {
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    anchors.verticalCenter: parent.verticalCenter
                    text: theBtn.targetValue === root.targetValue ? "\u2715":theBtn.theIcon
                    font:theBtn.font
                    color: theBtn.targetValue === root.targetValue ?"#5acdbe":"white"
                }
            }

            onClicked: {
                if(targetValue === root.targetValue){
                    root.targetValue = 0
                }else{
                    root.targetValue = targetValue
                }
            }
        }
    }




    //增加和减少栏
    Component{
        id:addRemoveModel
        Row{
            id:addOrRe
            anchors.fill: parent
            property string text1: ""
            property string text2: ""
            property int number: 0


            Button{
                id:addRe
                width: 50
                height: width
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 40
                flat:true

                contentItem: Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: "\u2500"
                    font: parent.font
                    color: "white"
                }
                background: Rectangle{
                    radius: width/2
                    color: "#5acdbe"
                }
                onClicked: {
                    parent.number--
                }
            }


            Item {
                width: parent.width - 100
                height: parent.height
                Text {
                    anchors.top: parent.top
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: addOrRe.text1
                    font.pixelSize: 10
                    color: "#3c3c96"
                }
                Text {
                    anchors.centerIn: parent
                    text: addOrRe.number
                    font.pixelSize: 35
                    color: "#5acdbe"
                }
                Text {
                    anchors.bottom: parent.bottom
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: addOrRe.text2
                    font.pixelSize: 10
                    color: "#5acdbe"
                }
            }
            Button{
                id:addRe2
                width: 50
                height: width
                anchors.verticalCenter: parent.verticalCenter
                font.pixelSize: 40
                flat:true

                contentItem: Text {
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: "\u2500"
                    font: parent.font
                    color: "white"
                    Text{
                        anchors.centerIn: parent
                        text: "\u2502"
                        color: "white"
                        font.pixelSize: 30
                    }
                }
                background: Rectangle{
                    radius: width/2
                    color: "#5acdbe"
                }
                onClicked: {
                    parent.number++
                }
            }
        }
    }



    Column{
        id:rightCol
        anchors.fill: parent
        anchors.topMargin: 10
        anchors.rightMargin: 10
        spacing: 15

        Loader{
            id:loader1
            width: parent.width
            sourceComponent: theButton
        }

        Item {
            id:ttest
            width: parent.width
            height: root.targetValue === 1? 300:0
            clip: true

            Column{
                anchors.fill: parent
                spacing: 10

                Item{
                    width: parent.width
                    height: childrenRect.height
                    Text {
                        id:cmv
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "(S)CMV+"
                        font.pixelSize: 40
                        font.bold: true
                        color: "#3c3c96"
                    }
                    Text {
                        anchors.top: cmv.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        text: "Adult/Ped."
                        color: "#3c3c96"
                        font.pixelSize: 15
                    }
                }
                Loader{
                    id:addReLoader1
                    width: parent.width
                    height: 70
                    sourceComponent: addRemoveModel
                }
                Loader{
                    id:addReLoader2
                    width: parent.width
                    height: addReLoader1.height
                    sourceComponent: addRemoveModel
                }
                Loader{
                    id:addReLoader3
                    width: parent.width
                    height: addReLoader1.height
                    sourceComponent: addRemoveModel
                }
            }
            Behavior on height {NumberAnimation { duration: 300}}
        }


        Loader{
            id:loader2
            width: parent.width
            sourceComponent: theButton
        }

        Item{
            width: parent.width
            height: root.targetValue === 2 ? 300:0
            clip: true

            Image {
                anchors.fill: parent
                source: "qrc:/image/zyro-image.png"
                fillMode: Image.PreserveAspectFit
            }
            Behavior on height {NumberAnimation{duration: 300}}
        }

        Loader{
            id:loader3
            width: parent.width
            sourceComponent: theButton
        }

        Item{
            width: parent.width
            height: root.targetValue === 3 ? 200:0
            clip: true
            Text {
                id:leftText
                text: "奖励一下自己"
                font.pixelSize: 15
            }
            Text {
                anchors.left: leftText.right
                anchors.verticalCenter: leftText.verticalCenter
                text: "\u263A"
                font.pixelSize: 35
            }
            Image {
                anchors.fill: parent
                source: "qrc:/image/mn1.jpg"
                fillMode: Image.PreserveAspectFit
            }
            Behavior on height {NumberAnimation{duration: 300}}
        }
    }

    Component.onCompleted: {
        loader1.item.text = "Models"
        loader1.item.theIcon = "\u2630"
        loader1.item.targetValue = 1

        loader2.item.text = "Controls"
        loader2.item.theIcon = "\u2699"
        loader2.item.targetValue = 2

        loader3.item.text = "Alarms"
        loader3.item.theIcon = "\u2615"
        loader3.item.targetValue = 3

        addReLoader1.item.text1 = "Vt"
        addReLoader1.item.text2 = "ml"
        addReLoader1.item.number = vtNum

        addReLoader2.item.text1 = "PEEP/CPAP"
        addReLoader2.item.text2 = "cmH2O"
        addReLoader2.item.number = peepNum

        addReLoader3.item.text1 = "Oxygen"
        addReLoader3.item.text2 = "%"
        addReLoader3.item.number = oxygenNum
    }
}