import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    id: materialchecksign
    x: 290
    y: 130
    width: 1600
    height: 920

    property string imagePath : "image/png";
    property string imageData : "";


    signal signal_postCheckSign(int planId, string path);

    PromptInfo
    {
        id: materialchecksign_prompt_info;
    }


    onVisibleChanged: {
        if (materialchecksign.visible === true)
        {
            proThread.moveCursorTo(0, 0);

            // 如果图片Base64为空字符
            if (imageData === "") {
                materialchecksign_btn_reset.visible = false;
                materialchecksign_btn_confirm.visible = true;
                materialchecksign_btn_purge.visible = true;
                materialchecksign_mouseArea.enabled = true;
                materialchecksign_image_sign.source = imageData;
            }
            else
            {
                materialchecksign_btn_reset.visible = true;
                materialchecksign_btn_confirm.visible = false;
                materialchecksign_btn_purge.visible = false;
                materialchecksign_mouseArea.enabled = false;
                materialchecksign_image_sign.source = imageData;
            }
        }
        else
        {
            materialchecksign_canvas.clear();
        }
    }


    // 确认操作弹出框
    Dialog {
        id: materialchecksign_dialog_confirm
        title: "操作确认"
        x: parent.width / 2 - width / 2
        y: parent.height / 2 - height / 2
        width: 600
        height: 400
        clip: true
        modal: true

        // 自定义背景（带圆角）
        background: Rectangle {
            color: "white"
            clip: true
        }
        // 自定义标题栏
        header: Rectangle {
            x: 0
            y: 0
            width: parent.width
            height: 50 // 设置标题栏高度
            color: "#ff3968e9" // 设置标题栏背景色
            // 标题文本
            Text {
                x: 20
                y: 0
                width: 80
                height: 50 // 设置标题栏高度
                text: materialchecksign_dialog_confirm.title
                font.pixelSize: 20
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                color: "white"
            }
        }

        contentItem: Rectangle {
            x: 0
            y: 0
            width: parent.width
            height: 200
            color: "white"
            Text {
                width: parent.width
                height: 200
                text: "确定要保存签名吗？"
                font.pixelSize: 30
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
            }
        }

        // 自定义 DialogButtonBox
        DialogButtonBox {
            id: materialcheckplan_buttonBox
            x: 0
            y: 250
            width: parent.width
            height: 100

            // 自定义按钮
            Button {
                implicitWidth: 120
                implicitHeight: 50
                text: "确认"
                background: Rectangle {
                    color: "green"
                    radius: 5
                }
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 30
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                onClicked: {
                    var dataUrl = materialchecksign_canvas.toDataURL(imagePath);
                    signal_postCheckSign(materialCheckPlan.planId, dataUrl);  // 检查签名
                    materialchecksign_dialog_confirm.close()
                }
            }

            Button {
                implicitWidth: 120
                implicitHeight: 50
                text: "取消"
                background: Rectangle {
                    color: "red"
                    radius: 5
                }
                contentItem: Text {
                    text: parent.text
                    font.pixelSize: 30
                    color: "white"
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
                onClicked: {
                    materialchecksign_dialog_confirm.reject()
                }
            }
        }
    }


    // 保存
    Button {
        id: materialchecksign_btn_confirm
        x: 928
        y: 835
        width: 192
        height: 75
        background: Rectangle {
            color: "#ff9900"
            radius: 10 // 可选，设置圆角
        }
        text: qsTr("保存")
        font.pixelSize: 30
        palette.buttonText: "white"  // 设置字体颜色为绿色
        Connections {
            target: materialchecksign_btn_confirm
            onClicked: {
                if (materialchecksign_canvas.pathPoints.length === 0)
                {
                }
                else
                {
                    materialchecksign_dialog_confirm.open();
                }
            }
        }
    }


    // 重新签名
    Button {
        id: materialchecksign_btn_reset
        x: 1168
        y: 835
        width: 192
        height: 75
        background: Rectangle {
            color: "#ff0000"
            radius: 10
        }
        text: qsTr("重新签名")
        font.pixelSize: 30
        palette.buttonText: "white"  // 设置字体颜色为绿色
        Connections {
            target: materialchecksign_btn_reset
            onClicked: {
                materialchecksign_btn_reset.visible = false;
                materialchecksign_btn_confirm.visible = true;
                materialchecksign_btn_purge.visible = true;
                materialchecksign_mouseArea.enabled = true;
                materialchecksign_image_sign.source = "";
            }
        }
    }

    // 清除
    Button {
        id: materialchecksign_btn_purge
        x: 1168
        y: 835
        width: 192
        height: 75
        background: Rectangle {
            color: "#ff0000"
            radius: 10
        }
        text: qsTr("清除")
        font.pixelSize: 30
        palette.buttonText: "white"  // 设置字体颜色为绿色
        Connections {
            target: materialchecksign_btn_purge
            onClicked: {
                materialchecksign_canvas.clear();
            }
        }
    }

    // 返回按钮
    Button {
        id: materialchecksign_btn_return
        x: 1408
        y: 835
        width: 192
        height: 75
        background: Rectangle {
            color: "#055eb3"
            radius: 10
        }
        text: qsTr("返回")
        font.pixelSize: 30
        palette.buttonText: "white"  // 设置字体颜色为绿色
        Connections {
            target: materialchecksign_btn_return
            onClicked: {
                materialCheckSign.visible = false;
                materialCheckPlan.visible = true;
            }
        }
    }


    // 主体区域
    Rectangle {
        id: materialchecksign_rect_main
        width: 1600
        height: 800
        color: "#1affffff"
        radius: 20
        clip: true



        Canvas {
            anchors.fill: parent

            onPaint: {
                var ctx = getContext("2d")
                ctx.strokeStyle = "#ffffff"
                ctx.lineWidth = 3
                ctx.beginPath()
                ctx.moveTo(160, 20)
                ctx.lineTo(20, 20)
                ctx.lineTo(20, 160)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(160, 780)
                ctx.lineTo(20, 780)
                ctx.lineTo(20, 640)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(1580, 160)
                ctx.lineTo(1580, 20)
                ctx.lineTo(1440, 20)
                ctx.stroke()

                ctx.beginPath()
                ctx.moveTo(1580, 640)
                ctx.lineTo(1580, 780)
                ctx.lineTo(1440, 780)
                ctx.stroke()
            }
        }


        Canvas {
            id: materialchecksign_canvas
            anchors.fill: parent
            antialiasing: true

            // 存储绘制路径的点
            property var pathPoints: []  // QList<QList<QPointF>>

            // 开始绘制
            onPaint: {
                var ctx = getContext("2d")
                ctx.clearRect(0, 0, width, height)  // 清空画布
                ctx.lineWidth = 10
                ctx.strokeStyle = "#ffffff"

                for (var j = 0; j < pathPoints.length; ++j)
                {
                    if (pathPoints[j].length > 0) {
                        ctx.beginPath()
                        ctx.moveTo(pathPoints[j][0].x, pathPoints[j][0].y)

                        for (var i = 0; i < pathPoints[j].length; i++) {
                            ctx.lineTo(pathPoints[j][i].x, pathPoints[j][i].y)
                        }

                        ctx.stroke()
                    }
                }
            }

            // 清空签名
            function clear() {
                pathPoints = []
                requestPaint()
            }
        }

        // MouseArea 用于监听鼠标事件
        MouseArea {
            id: materialchecksign_mouseArea
            anchors.fill: parent
            onPressed: {
                var index = materialchecksign_canvas.pathPoints.length;
                materialchecksign_canvas.pathPoints[index] = [];
                materialchecksign_canvas.pathPoints[index].push(Qt.point(mouse.x, mouse.y));
                materialchecksign_canvas.requestPaint();
            }
            onPositionChanged: {
                if (pressed) {
                    var index = materialchecksign_canvas.pathPoints.length - 1;
                    materialchecksign_canvas.pathPoints[index].push(Qt.point(mouse.x, mouse.y));
                    materialchecksign_canvas.requestPaint();
                }
            }
        }


        Image {
            id: materialchecksign_image_sign;
            anchors.fill: parent
        }
    }

    function slot_postCheckSign(data)
    {
        var jsonObjRoot = JSON.parse(data);
        if (jsonObjRoot.code === 200)
        {
            // materialchecksign_prompt_info.promptInfoTimeout = 3;
            // materialchecksign_prompt_info.promptInfoText = jsonObjRoot.msg;
            // materialchecksign_prompt_info.promptInfoIcon = "qrc:/png/error.png"
            // materialchecksign_prompt_info.promptInfoColor = "#6600ff00"


            materialCheckSign.visible = false;
            materialCheckPlan.visible = true;
        }
        else
        {
            materialchecksign_prompt_info.promptInfoTimeout = 3;
            materialchecksign_prompt_info.promptInfoText = jsonObjRoot.msg;
            materialchecksign_prompt_info.promptInfoIcon = "qrc:/png/error.png"
            materialchecksign_prompt_info.promptInfoColor = "#66ea3a0e"
        }
    }
}