import React, { useState } from 'react';
import { View, Text, StyleSheet, Image, TouchableOpacity, ScrollView } from 'react-native';
import { rpx } from '../../utils/rpx';

const BleDistance = () => {
    const [isEnabled, setIsEnabled] = useState(false); // 添加状态控制按钮
    return (
        <View style={styles.container}>
            <ScrollView 
                showsVerticalScrollIndicator={false}
                contentContainerStyle={styles.scrollContent}
            >
                <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/upCrcuiBaoZrd9ZRZayj' }} style={styles.icon} />
                <Text style={styles.tit}>1.请走到空旷区</Text>
                <Text style={styles.txt}>请在空旷区域进行标定，否则标定结果可能受环境（墙体、金属等）干扰影响</Text>
                <Text style={styles.tit}>2.请减少周围的设备干扰</Text>
                <Text style={styles.txt}>其他手机或设备的蓝牙信号及电磁可能会影响标定结果</Text>
                <Text style={styles.tit}>3.请站在您期望的无感解锁位置</Text>
                <Text style={styles.txt}>建议不要离车太远，否则可能导致您预期外的解锁 发生</Text>
                <Text style={styles.tit}>4.点击标定按钮标</Text>
                <Text style={styles.txt}>标定成功后车辆将基于当前位置设置无感解锁距离</Text>
                <Text style={styles.tit}>提示</Text>
                <Text style={styles.txt}>若您想要更改无感解锁距离，可以重新标定，受蓝牙信号强度波动影响，您的实际无感解锁位置可能与您的标定位置略有偏差</Text>
                <TouchableOpacity 
                    style={[styles.btn, { backgroundColor: isEnabled ? '#4297F3' : '#ccc' }]}
                    disabled={!isEnabled}
                >
                    <Text style={styles.btnTxt}>开始标定</Text>
                </TouchableOpacity>
            </ScrollView>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F3FCFF',
    },
    scrollContent: {
        alignItems: 'center',
        paddingBottom: rpx(40), // 添加底部间距
    },
    btn: {
        marginTop: rpx(50),
        width: rpx(614),
        height: rpx(92),
        backgroundColor: '#4297F3',
        borderRadius: rpx(16),
        alignItems: 'center',
        justifyContent: 'center',
    },
    btnTxt: {
        fontSize: rpx(40),
        fontWeight: '500',
        color: '#fff',
    },
    icon: {
        marginLeft: rpx(80),
        marginTop: rpx(100),
        width: rpx(540),
        height: rpx(450),
    },
    txt: {
        width: rpx(608),
        marginTop: rpx(20),
        fontSize: rpx(28),
        color: '#808080',
    },
    tit: {
        fontWeight: '500',
        width: rpx(608),
        marginTop: rpx(20),
        fontSize: rpx(32),
        color: '#3D3D3D',
    },
});

export default BleDistance;