import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
import { useState } from 'react';
import './Slider.scss'
import { rpxToPx } from '@/utils/tools';

function MyComponent() {
    const [brightness, setBrightness] = useState(0);
    const [isSliding, setIsSliding] = useState(false);
    const [startY, setStartY] = useState(0);

    const handleTouchStart = (event) => {
        setIsSliding(true);
        setStartY(event.touches[0].clientY);
    };

    const handleTouchMove = (event) => {
        if (isSliding) {
            const { touches } = event;
            const touchY = touches[0].clientY;
            const deltaY = startY - touchY;
            // console.log(deltaY,startY,touchY)
            // const containerHeight = rpxToPx(182); // 容器高度，根据实际情况调整
            let brightnessValue = brightness + deltaY;// / containerHeight * 100;

            // 边界限制
            brightnessValue = Math.max(0, Math.min(brightnessValue, 100));
            brightnessValue = Math.round(brightnessValue)
            setStartY(touchY)
            setBrightness(brightnessValue);
        }
    };

    const handleTouchEnd = () => {
        setIsSliding(false);
    };

    return (
        <View
            catchMove
            className='slider-container'
            onTouchStart={handleTouchStart}
            onTouchMove={handleTouchMove}
            onTouchEnd={handleTouchEnd}
        >
            <View className='slider-top' style={{ height: `${100-brightness}%` }} />
            {/* <View className='slider-bar' style={{ height: `${brightness}%` }} /> */}
            <Text className='slider-handle'>{brightness}</Text>
        </View>
    );
}

export default MyComponent;