import QtQuick
import QtQuick.Controls

Item{
    property var _index: 0
    property var name: ""
    property var _state: "0"
    property var _active: "1"
    
    width: 54
    height: width
    property real progress: 0.0 // 进度，范围从 0 到 1
    onProgressChanged: {
        canvas.requestPaint()
        wCanvas.requestPaint()
    }

    Canvas {
        id: wCanvas
        visible: _state == "1"
        renderTarget: Canvas.Image
        antialiasing: true
        width: 72
        height: 72
        anchors.centerIn: parent
        onPaint: {
            var ctx = getContext("2d")
            var dpr = Qt.platform.os === "windows" ? Qt.platform.pixelRatio : 1
            ctx.scale(dpr, dpr)
            if(progress == 0)
                ctx.clearRect(0, 0, wCanvas.width, wCanvas.width)
            var centerX = wCanvas.width / 2
            var centerY = wCanvas.height / 2
            var radius = Math.min(centerX, centerY) * 0.8

            // 绘制进度扇形
            ctx.beginPath()
            ctx.moveTo(centerX, centerY)
            ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * progress)
            ctx.lineTo(centerX, centerY)
            ctx.fillStyle = "#00F0FF"
            ctx.fill()
        } 
    }

    Rectangle{
            width: 50
            height: width
            radius: 27
            anchors.centerIn: parent
            Rectangle{
                width: 46
                height: 46
                radius: 23
                anchors.centerIn: parent
                color: "#98C9FB"
            }
            Canvas {
                id: canvas
                visible: _state != "0"
                renderTarget: Canvas.Image
                antialiasing: true
                width: 54
                height: 54
                anchors.centerIn: parent
                onPaint: {
                    var ctx = getContext("2d")
                    var dpr = Qt.platform.os === "windows" ? Qt.platform.pixelRatio : 1
                    ctx.scale(dpr, dpr)
                    if(progress == 0)
                        ctx.clearRect(0, 0, canvas.width, canvas.width)
                    var centerX = canvas.width / 2
                    var centerY = canvas.height / 2
                    var radius = Math.min(centerX, centerY) * 0.8

                    // 绘制进度扇形
                    ctx.beginPath()
                    ctx.moveTo(centerX, centerY)
                    ctx.arc(centerX, centerY, radius, -Math.PI / 2, -Math.PI / 2 + 2 * Math.PI * progress)
                    ctx.lineTo(centerX, centerY)
                    ctx.fillStyle = "#007EFF"
                    ctx.fill()
                }
            }

            Rectangle{
                width: 46
                height: width
                anchors.centerIn: parent
                radius: 23
                color: "#BFBFBF"
                visible: _active == "0"
            }
            Text{
                text: (_index+1) + ""
                color: "white"
                font.pixelSize: 20
                anchors.centerIn: parent
            }       
        }

  
    QxText{
        text: name
        font.pixelSize: 16
        color: skLayout.currentIndex == _index ? "#007EFF" : "#BFBFBF"
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.bottom
    }
   
    MouseArea{
        anchors.fill: parent
        onClicked: {
            skLayout.currentIndex = _index
        }
    }
}