import QtQuick 2.15
import QtQuick.Controls 2.15

ApplicationWindow {
    visible: true
    width: 640
    height: 28

    Flickable {
        id: flickable
        width: parent.width
        height: parent.height
        contentWidth: 51200  // 根据需要调整刻度尺长度（1000个刻度，每个刻度间隔51.2）
        clip: true

        Component.onCompleted: updateVisibleRange()
        onContentXChanged: updateVisibleRange()
        onWidthChanged: updateVisibleRange()

        function updateVisibleRange() {
            var itemWidth = 51.2;
            var firstIndex = Math.floor(flickable.contentX / itemWidth);
            var visibleCount = Math.ceil(flickable.width / itemWidth) + 1;

            firstVisibleIndex = firstIndex;
            lastVisibleIndex = firstIndex + visibleCount;

            createVisibleItems();
        }

        property int firstVisibleIndex: 0
        property int lastVisibleIndex: 0

        function createVisibleItems() {
            itemContainer.children.forEach(function(item) {
                item.destroy();
            });

            for (var i = firstVisibleIndex; i <= lastVisibleIndex; i++) {
                var item = itemComponent.createObject(itemContainer, {
                    index: i,
                    width: 1,
                    height: flickable.height,
                    x: i * 51.2
                });
            }
        }

        Item {
            id: itemContainer
            anchors.fill: parent
        }

        Component {
            id: itemComponent
            Item {
                property int index

                Rectangle {
                    property int itemIndex: index
                    anchors.bottom: parent.bottom
                    width: 1
                    height: index % 10 === 0 ? 18 : index % 5 === 0 ? 9 : 4
                    color: "black"



                    Repeater {
                        model: index % 10 === 0 ? 1 : 0
                        Label {
                            anchors.left: parent.right
                            anchors.leftMargin: 2
                            anchors.bottom: parent.bottom
                            anchors.bottomMargin: 4
                            // color: activePalette.windowText
                            text: parent.itemIndex
                        }
                    }
                }
            }
        }
    }
}