// src/views/ProfileScreen.tsx
import React from 'react';
import { View, Text, StyleSheet,Image,Button } from 'react-native';
import { RouteProp, useRoute } from '@react-navigation/native';
import { rpx } from '../../utils/rpx';
// 添加类型定义
type RootStackParamList = {
    ConfirmBind: {
        sn: string;
    };
};

type ConfirmBindRouteProp = RouteProp<RootStackParamList, 'ConfirmBind'>;

const ConfirmBind = () => {
  const route = useRoute<ConfirmBindRouteProp>();
  const { sn } = route.params;
  
  console.log('接收到的SN参数:', sn);

  return (
    <View style={styles.container}>
        <Image source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uVnIDwcwQP7oo12PeYVJ' }} style={styles.Image} />
        <View style={styles.carInfo}>
            <View style={styles.carInfoItem}>
                <Text>车型</Text>
                <Text>这才是ZVFUJNv吃哪家快递给</Text>
            </View>
            <View style={styles.carInfoItem}>
                <Text>车辆编号</Text>
                <Text>23865221368</Text>
            </View>
            <View style={styles.carInfoItem}>
                <Text>固件信息</Text>
                <Text>20.0.6 BCM</Text>
            </View>
            
        </View>
        <View style={styles.buttons}>
          <Text style={styles.buttonText}>确定</Text>
        </View>
    </View>
  );
};

const styles = StyleSheet.create({

  container: {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    flex: 1, 
    backgroundColor: '#F3FCFF',
  },
  buttons:{
    marginTop: rpx(400),
    width: rpx(614),
    height: rpx(92),
    backgroundColor: '#4297F3',
    borderRadius: rpx(20),
    justifyContent: 'center',
    alignItems: 'center',
  },
  buttonText:{
    color: '#FFFFFF',
    fontSize: rpx(40),
    fontWeight: 'bold',
  },
  carInfoItem:{
    marginTop: rpx(28),
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
  },
  carInfo: {
    padding: rpx(16),
    paddingLeft: rpx(42),
    paddingRight: rpx(42),
    width: rpx(688),
    height: rpx(256),
    backgroundColor: '#FFFFFF',
    borderRadius: rpx(30),
    // iOS 阴影
    shadowColor: 'rgba(0, 0, 0, 0.1)',
    shadowOffset: {
        width: 0,
        height: rpx(2),
    },
    shadowOpacity: 1,
    shadowRadius: rpx(18),
    // Android 阴影
    elevation: 4,
},
  Image: {
    marginTop: rpx(178),
    width: rpx(440),
    height: rpx(340)
  },
});

export default ConfirmBind;