<template>
    <div class="time-scale-up-wrapper">

    </div>

    <div class="time-scale-wrapper" :style="`left: ${currentX}px; width: ${300}px;`">
        <div class="current-display-cursor-up">
            <div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
            <div class="time-scale-down"></div>
        </div>
        <div class="time-scale-line"></div>
        <div class="current-display-cursor-down">
            <div class="time-scale-value">{{ currentX }} {{ timeScaleManage.unit }}</div>
            <div class="time-scale-up"></div>
        </div>
    </div>

    <div class="time-scale-down-wrapper">

    </div>
</template>

<script>
import { onMounted, reactive } from 'vue';
import { globalLookup, emitter } from '@/hook/global';
import { handleTimeScale } from '@/hook/utils';
import { wheelScale } from '@/hook/wheel';

export default {
    name: 'time-scale',

    setup() {
        // see --sidebar-width
        const left = 280 + 20;

        // see --right-nav-width
        const right = document.body.clientWidth - 60;

        const timeScaleManage = reactive({
            scale: 1,
            unit: 'ns'
        });

        // 此时有关波形的元信息已经加载完毕
        emitter.on('meta-ready', () => {
            // const { scale, unit } = handleTimeScale(globalLookup.timescale);
            // timeScaleManage.scale = scale;
            // timeScaleManage.unit = unit;

            // console.log(timeScaleManage.unit);

            // const viewInfo = globalLookup.view;
        });

        // document.addEventListener('wheel', event => {
        //     if ((event.wheelDelta && event.ctrlKey) || event.detail) {
        //         event.preventDefault();
        //     }
            
        //     if (event.ctrlKey) {
        //         // console.log(event.wheelDelta);
        //         wheelScale(event);
        //     } else if (event.shiftKey) {
        //         // console.log(event.wheelDelta);
        //         console.log('deltaX', event.deltaX);
        //         console.log('deltaY', event.deltaY);
        //     }
        // }, { capture: false, passive: false });


        const currentX = 300;

        return {
            currentX,
            timeScaleManage
        }
    }
}
</script>

<style>
.time-scale-up-wrapper {
    position: absolute;
    top: 0;
    left: calc(var(--sidebar-width) + 20px);
    width: calc(100vw - var(--sidebar-width) - var(--right-nav-width) - 20px);
    height: var(--time-scale-height);
    background-color: var(--sidebar);
    z-index: 50;
    cursor: crosshair;
}

.time-scale-down-wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100vw - var(--right-nav-width));
    height: var(--time-scale-height);
    background-color: var(--sidebar);
    z-index: 50;
    cursor: crosshair;
}

.time-scale-down {
    position: absolute;
    bottom: 0;
    width: 1px;
    height: 10px;
    border: 1px solid var(--scrollbar-hover);
    background-color: var(--scrollbar-hover);
}

.time-scale-up {
    position: absolute;
    top: 0;
    width: 1px;
    height: 10px;
    border: 1px solid var(--scrollbar-hover);
    background-color: var(--scrollbar-hover);
}

.time-scale-wrapper {
    position: absolute;
    height: 100vh;
    padding: 0;
    top: 0;
    cursor: crosshair;
    z-index: 55;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 沿着横轴（水平方向）对齐 */
    justify-content: center;
    /* 沿着纵轴（垂直方向）对齐 */
}

.time-scale-value {}

.time-scale-line {
    width: 1px;
    background-color: var(--scrollbar-hover);
    height: calc(100vh - 2 * var(--time-scale-height));
}
</style>