import React, { useRef } from 'react';
import { View, Text, StyleSheet, Animated, Image,TouchableOpacity} from 'react-native';

import { rpx } from '../../utils/rpx'; // Adjust the path as necessary
import { useNavigation } from '@react-navigation/native';
const NoDevice: React.FC = () => {
    const navigation = useNavigation();

    const handlePress = () => {
     
        navigation.navigate('BindIndex' as never);
        // console.log(navigation);
    };
    return (
        <View style={styles.container}>
            <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.Image} />
            <View style={styles.txtbox}>
                <View style={styles.yuan}></View>
                <Text style={styles.txt}>当前车辆状态：锁车</Text>
            </View>
            <TouchableOpacity onPress={handlePress}>
            <View  style={styles.addcar}>
                <Image style={styles.add} source={{uri:'https://lxnapi.ccttiot.com/bike/img/static/uiRPAn55nTvL0UUVslIS'}}></Image>
                <Text style={styles.addTxt}>添加车辆</Text>
                
            </View>
            </TouchableOpacity>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        display: 'flex',
        alignItems: 'center',

        flex: 1,
        backgroundColor: '#F3FCFF',
    },
    addTxt: {
        marginLeft:rpx(20),
        fontWeight: '500',
        color: '#ffffff',
        fontSize: rpx(40),
        marginRight: rpx(10), // 添加右边距，与图标保持间距
    },
    addcar: {
        marginTop: rpx(122),
        flexDirection: 'row', // 添加这行，使内容水平排列
        alignItems: 'center',
        justifyContent: 'center',
        width: rpx(641),
        height: rpx(92),
        backgroundColor: '#4297F3',
        borderRadius: rpx(20),
    },
    add: {
        width: rpx(34),
        height: rpx(34),
    },
    txtbox: {
        width: rpx(440),
        justifyContent: 'center',
        flexDirection: 'row', // 保持在一行中
        alignItems: 'center', // 垂直居中对齐
    },
    txt: {
        marginLeft: rpx(14), // 为了给圆形和文本之间留出一些间距
        fontSize: rpx(28),
        fontWeight: '400',
        color: '#3D3D3D',
    },
    yuan: {
        width: rpx(22),
        height: rpx(22),
        borderRadius: rpx(11),
        backgroundColor: 'rgba(255, 130, 130, 1)',
    },
    Image: {
        // marginLeft:rpx(156),
        marginTop: rpx(178),
        width: rpx(440),
        height: rpx(340)
    }

});

export default NoDevice;