import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QGroundControl 1.0


Item {
    width: 400
    height: parent
    property double _pressedX: 0
    property double _pressedY: 0

    property int gimbalMaxValue: 255

    //外圆环和控制器的半径
    property double outRingRadius: 0
    property double controlBtnRadius: 0

    //外圆环的最大边界值
    property double maxX: 0
    property double maxY: 0

    //----------------------------------四象限常量---------------------------------------
    property int firstQuadrant : 1
    property int secondQuadrant: 2
    property int thirdQuadrant: 3
    property int fourthQuadrant: 4
    //当前所选择需要调整的方向
    property int selectIndex: 0
    //---------------------------------角度调整------------------------------------------
    property int pitchValue: 0
    property string pitchStrValue:  pitchValue + "°"
    property int rollValue: 0
    property string angle: pitchStrValue

    property GduHolderManager _gduHolderManager: QGroundControl.gduDroneManager.gduHolderManager

    Rectangle {
        id:backgroud
        color: "black"
        width: 400
        height: parent.height
        x: parent.width - 400
        Column {
            width: 400
            height: parent.height
            padding: 10
            spacing: 30

            Text {
                text: qsTr("云台俯仰方位角调整")
                color: "white"

            }

            Rectangle {
                width: parent.width
                height: 200
                color:"transparent"

                Image {
                    width: 200
                    height: 200
                    id: cOuterRing
                    anchors.horizontalCenter: parent.horizontalCenter
                    source: "/qmlimages/gimball_direction.png"

                    Image {
                        x: (200 - 50) /2
                        y: (200 - 50) /2
                        width: 50
                        height: 50
                        id: controlBtn
                        source: "/qmlimages/button_default_gimbal.png"
                    }
                }

                MouseArea{
                    anchors.fill: parent
                    acceptedButtons: Qt.LeftButton
                    onPressed: {
                        if(mouse.button === Qt.LeftButton){
                            mouseLeftPressed(mouse.x,mouse.y)
                        }
                    }

                    onPositionChanged: {
                        onMouseMove(mouseX,mouseY)
                    }

                    onReleased: {
                        if(mouse.button === Qt.LeftButton){
                            onMouseUp()
                        }
                    }
                }

            }

            Row {
                id:tabView
                width: parent.width
                height: tAdjustPitch.height

                Text {
                    horizontalAlignment: Text.AlignHCenter
                    width: parent.width/2
                    id: tAdjustPitch
                    text: qsTr("云台俯仰角微调")
                    color: "yellow"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            changeTextStatus(0)
                            angle = pitchStrValue
                        }
                    }
                }

                Text {
                    horizontalAlignment: Text.AlignHCenter
                    width: parent.width/2
                    id: tAdjustRoll
                    text: qsTr("云台横滚角调整")
                    color: "white"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            changeTextStatus(1)
                            angle = rollValue + ""
                        }
                    }
                }
            }
            Row {
                width: parent.width
                height: imgSubtract.height

                Image {
                    fillMode: Image.PreserveAspectFit
                    width: parent.width / 3
                    height: 40
                    id: imgSubtract
                    source: "/qmlimages/main_camera_setting_gimball_minus.png"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            if(selectIndex === 0){
                                setHolderPitch(false)
                            }else {
                                setHolderRoll(false)
                            }
                        }
                    }
                }

                Text {
                    width: parent.width / 3
                    id: tAngle
                    text: angle
                    color: "white"
                    font.pixelSize: 40
                    horizontalAlignment: Text.AlignHCenter
                }

                Image {
                    fillMode: Image.PreserveAspectFit
                    width: parent.width / 3
                    height: 40
                    id: imgAdd
                    source: "/qmlimages/main_camera_setting_gimball_plus.png"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            if(selectIndex === 0){
                                setHolderPitch(true)
                            }else {
                                setHolderRoll(true)
                            }
                        }
                    }
                }

            }

            RowLayout {

                width: parent.width
                height: btnVertical.height


                GduHolderControlButton {
                    anchors.left: parent.left
                    id:btnVertical
                    width: parent.width /2
                    text: qsTr("下视")
                    onClicked: {
                        console.log("下视")
                        //云台下视
                        _gduHolderManager.setHolderPitchAngle(-90,function(resources){
                            //TODO 回调信息
                            console.log("setHolderPitchAngle",resources)
                        })
                    }
                }

                GduHolderControlButton {
                    id:btnBackHolder
                    anchors.right: parent.right
                    width: parent.width /2
                    text: qsTr("回中")
                    onClicked: {
                        console.log("回中")
                        //云台回中
                        _gduHolderManager.holderBack2Center(function(resources){
                            //TODO 回调信息
                            console.log("setHolderPitchAngle",resources)
                        })
                    }
                }
            }



        }


    }

    //处理鼠标右键按下事件
    function mouseLeftPressed(mouseX,mouseY){
        console.log("mouseRightPressed==mouseX,mouseY===="+mouseX+","+mouseY)
        _pressedX = mouseX
        _pressedY = mouseY
        outRingRadius = cOuterRing.width/2
        controlBtnRadius = controlBtn.width/2


    }

    //鼠标按下滑动时
    function onMouseMove(mouseX,mouseY){
        const xDelta = mouseX - _pressedX
        const yDelta = mouseY - _pressedY
        const angle = computingAngle(xDelta, yDelta)
        const maxX = (outRingRadius - controlBtnRadius) * Math.cos(angle / 180 * Math.PI)
        const maxY = (outRingRadius - controlBtnRadius) * Math.sin(angle / 180 * Math.PI)

        if(Math.abs(xDelta) > Math.abs(maxX)){
            xDelta = maxX
        }
        if(Math.abs(yDelta) > Math.abs(maxY)){
            yDelta = maxY
        }

        controlBtn.x = xDelta + (outRingRadius - controlBtnRadius)
        controlBtn.y = yDelta + (outRingRadius - controlBtnRadius)



        //计算 XY轴的运动总量
        const wRange = outRingRadius - controlBtnRadius
        const hRange = outRingRadius - controlBtnRadius

        const gimbalPitch = yDelta / hRange * gimbalMaxValue / 2 +  gimbalMaxValue / 2
        const gimbalDirect = xDelta/ wRange * gimbalMaxValue / 2 +  gimbalMaxValue / 2
        if(gimbalDirect > 128 || gimbalDirect < 128){
            gimbalDirect = 255 - gimbalDirect;
        }

        //控制云台
        _gduHolderManager.beginControlHolder(128, gimbalPitch, gimbalDirect)

    }

    //松开鼠标按钮时
    function onMouseUp(){
        console.log("onReleased======")

        //控制器复位
        controlBtn.x = (200 - 50) /2
        controlBtn.y = (200 - 50) /2
        //停止云台控制
        _gduHolderManager.stopControlHolder();
    }

    //根据 坐标获取 相应的角度
    function computingAngle(x,y){
        const maxX = Math.abs(0 - x)
        const maxY = Math.abs(0 - y)
        const z = Math.sqrt(x * x + y * y)
        var angle = Math.abs(Math.round(Math.asin(y/z)/Math.PI * 180))
        switch(getQuadrant(x,y)){
        case firstQuadrant:
            break;
        case secondQuadrant:
            angle = 90 * 2 - angle
            break;
        case thirdQuadrant:
            angle = 90 * 2 + angle
            break;
        case fourthQuadrant:
            angle = 90 * 4 - angle
            break;
        }

        return angle
    }

    //根据坐标判断所处的象限
    function getQuadrant(x, y){
        if (x >= 0 && y >= 0) {
            return firstQuadrant;
        } else if (x < 0 && y >= 0) {
            return secondQuadrant;
        } else if (x < 0 && y < 0) {
            return thirdQuadrant;
        } else {
            return fourthQuadrant;
        }
    }

    //改变当前需要修改角度的文字颜色
    function changeTextStatus(index){

        if(selectIndex === index) return
        const children = tabView.children
        for(var i = 0; i < children.length; i++){
            const child = children[i]
            if(i === index){
                child.color = "yellow"
            } else {
                child.color = "white"
            }
        }
        selectIndex = index
    }

    //设置云台的俯仰的角度
    function setHolderPitch(isAdd){
        //TODO 此处应该读取实时的云台的角度，暂时获取本地角度

        const pitchMin = -120
        const pitchMax = 30

        if(isAdd){
            pitchValue++
        }else {
            pitchValue--
        }

        if(pitchValue < pitchMin){
            pitchValue = pitchMin
        }else if (pitchValue > pitchMax){
            pitchValue = pitchMax
        }
        angle = pitchStrValue

        //调整云台俯仰角度
        _gduHolderManager.setHolderPitchAngle(pitchValue, function(resources){
            //TODO 回调信息
            console.log("setHolderPitchAngle",resources)
        })
    }

    //设置云台的横滚角度
    function setHolderRoll(isAdd){

        const rollMin = -20
        const rollMax = 20
        if(isAdd){
          rollValue ++
        }else {
          rollValue --
        }
        //控制最大角度
        if(rollValue < rollMin){
            rollValue = rollMin
        }else if(rollValue > rollMax){
            rollValue = rollMax
        }
        angle = rollValue
        //调整云台横滚角
        _gduHolderManager.setHolderRoll(rollValue, function(resources){
            //TODO 回调信息
            console.log("setHolderPitchAngle",resources)
        })

    }


}