0

从'react'导入反应,{组件};从 'react-native' 导入 { 视图、文本、尺寸、KeyboardAvoidingView、StyleSheet、ScrollView、Picker、TextInput、TouchableOpacity、Image、FlatList、SafeAreaView、Keyboard、I18nManager、InteractionManager };从'../component/header'导入标题;从'react-native-tab-view'导入{ TabView,SceneMap,TabBar};从'../component/Button'导入按钮;从'../component/Card'导入卡;从“../component/CardSection”导入 CardSection;从“../component/ImageCardSection”导入 ImageCardSection;从'axios'导入axios;从'../component/Spinner'导入微调器;从“react-native-dropdown-picker”导入 DropDownPicker;导入'react-native-gesture-handler' 从'导入 CarRescueScreen'。/汽车救援屏幕'; 从'react-native-reanimated'导入动画;

    const initialLayout = { width: Dimensions.get('window').width };
    const numofcolumns = 4;
    
    export default function CarrescueForm() {
    
    
    
    
        React.useEffect(() => {
    
            // Update the document title using the browser API
            setServiceList([])
            setmodelList([])
            setmakeList([])
            getcar()
            getcarmanufacture()
            // getcarrescueservice()
        }, []);
    
    
    
        // React.useEffect(() => {
        //     if (index)
        //         getcarrescueservice(index + 1)
        // }, [index])
        const [selectedValue, setSelectedValue] = React.useState("Select");
        const [index, setIndex] = React.useState(0);
        let [vechno, setVechno] = React.useState("");
        const [other, setOther] = React.useState('');
        const [loading, setLoading] = React.useState(false);
        const [refresh, setrefresh] = React.useState(false);
        const [serviceList, setServiceList] = React.useState([]);
    
        const [selectedmakeValue, setSelectedMakeValue] = React.useState("");
        const [makeList, setmakeList] = React.useState([]);
    
        const [selectedmodelValue, setSelectedModelValue] = React.useState("");
        const [modelList, setmodelList] = React.useState([]);
    
    
    
    
    
        const [routes, setRoutes] = React.useState([
            // { key: 'first', title: 'SUV' },
            // { key: 'second', title: 'Sedan' },
            // { key: 'third', title: 'Hatchback' },
        ]);
    
        const onIndexchange = (idx, rarray) => {
    
            console.log('index>>>', index);
            console.log('rarray>>>', rarray);
            getcarrescueservice(rarray[idx].key);
            setIndex(idx)
            if (index < idx && idx !== 0)
                setServiceList([]);
        }
        const getcar = async () => {
    
    
            try {
    
                setLoading(true);
    
    
                const response = await axios.get('http://www.xxxx');
                console.log(' Returned data:', response);
                setLoading(false);
                console.log("Its your time baby" + response.data.Status);
                if (response.data.Status > 0) {
                    console.log("Its your time baby S")
                    if ((response.data.Data).length > 0) {
                        const routArray = []
                        response.data.Data.map(carData => {
                            routArray.push({ key: carData.id, title: carData.car })
                        })
    
                        setRoutes(routArray);
                        getcarrescueservice(routArray[0].key);
    
                    }
                    console.log(response.data.data);
                }
                else {
                    alert(response.data.Message);
                    console.log(response.data.Message);
                }
    
            } catch (error) {
    
            }
    
        }
    
        const getcarrescueservice = async (carId) => {
    
    
            try {
    
                setLoading(true);
    
    
                const response = await axios.get(`http://www.xxxx`);
                console.log(' Returned data:', response);
                setLoading(false);
                console.log("Its your time baby" + response.data.Status);
                if (response.data.Status > 0) {
                    console.log("Its your time baby S")
    
                    setServiceList(response.data.Data);
                    console.log(response.data.data);
                }
                else {
                    alert(response.data.Message);
                    console.log(response.data.Message);
                }
    
            } catch (error) {
    
            }
    
        }
    
        const getcarmanufacture = async () => {
    
    
            try {
    
                setLoading(true);
    
    
                const response = await axios.get('http://www.xxxx');
                console.log(' Returned data:', response);
                setLoading(false);
                console.log("Its your time baby" + response.data.Status);
                if (response.data.Status > 0) {
                    console.log("Its your time baby S")
                    const addListData = []
    
                    await Promise.all(await response.data.Data.map(makeData => {
                        addListData.push({ label: makeData.manufacture, value: makeData.id })
                    }))
    
                    setmakeList(addListData);
                    console.log("makeList------------------->", makeList);
                }
                else {
                    alert(response.data.Message);
                    console.log(response.data.Message);
                }
    
            } catch (error) {
    
            }
    
        }
        const getcarmodel = async (makeId) => {
    
    
            try {
    
                setLoading(true);
    
                const params = new URLSearchParams();
                params.append('manufactureid', makeId);
                const response = await axios.post('http://www.xxxx', params);
                console.log(' Returned data:', response);
                setLoading(false);
                console.log("Its your time baby" + response.data.Status);
                if (response.data.Status > 0) {
                    console.log("Its your time baby S makelist")
                    const carList = []
                    await Promise.all(await response.data.Data.map(modelData => {
                        carList.push({ label: modelData.model, value: modelData.id })
                    }))
                    setmodelList(carList);
                    console.log(response.data.data);
                }
                else {
                    alert(response.data.Message);
                    console.log(response.data.Message);
                }
    
            } catch (error) {
    
            }
    
        }
    
        const onChangeItem = (item) => {
            console.log('make item is here', item.value);
            setSelectedMakeValue(item.value);
            getcarmodel(item.value)
        }
    
        const renderItem = ({ item }) => {
            console.log('itrm>>>>', item.Imageurl);
            return (
                <View style={{ flex: 1 }}>
                    {item && !item.empty && (<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', alignItems: 'center', marginTop: 5 }}>
                        <View style={{ flex: 1, alignSelf: 'center', marginLeft: 5, borderColor: '#ffa737', borderWidth: 1 }}>
                            <View style={{ flex: 1 }}>
                                <CardSection>
                                    <Image
                                        style={styles.imageStyle}
                                        source={{ uri: `http://www.fastnsure.in/car/${item.Imageurl}` }}
                                    />
                                </CardSection>
                            </View>
                            <View style={{ flex: 2 }}>
                                <CardSection>
                                    <Text style={{ fontWeight: 'bold', color: '#000', fontSize: 12, fontFamily: 'serif', alignSelf: 'center' }}>{item.service_name}</Text>
                                </CardSection>
                            </View>
                        </View>
                    </View >)}
                </View>
    
    
    
    
            )
        }
    
        const formatdata = (data, numofcolumns) => {
            const numoffullrows = Math.floor(data.length / numofcolumns);
            let noofelementslastrow = data.length - (numoffullrows * numofcolumns);
            while (noofelementslastrow !== numofcolumns && noofelementslastrow !== 0) {
                data.push({ serviceid: `blank-${noofelementslastrow}`, empty: true });
                noofelementslastrow = noofelementslastrow + 1;
            }
            return data;
        }
        // const setVechNo = (event) => {
    
        // }
    
        const _onChangeText = name => setVechno(name);
        _input.focus();
        const renderScreen = () => {
    
            return (
                <View>
    
    
                    <ScrollView style={{ flexGrow: 1, backgroundColor: '#fff' }}>
    
                        <TextInput style={styles.textStyle}
                            ref={(c) => _input = c}
                            placeholder="Enter Vechicle No"
                            value={vechno}
                            onChangeText={(vno) => _onChangeText(vno)}
                            blurOnSubmit={false}
                        >
                        </TextInput>
                        {/* <CardSection> */}
                        {makeList && makeList.length > 0 && (
                            <DropDownPicker
                                placeholder='Select Manufacture'
                                defaultValue={selectedmakeValue && selectedmakeValue}
                                // defaultValue={selectedmakeValue}
                                items={makeList}
                                searchable={true}
                                containerStyle={{ height: 50 }}
                                style={{ backgroundColor: '#fff', borderColor: '#000', borderWidth: 1, marginLeft: 5, marginRight: 5, marginTop: 5, fontFamily: 'serif' }}
                                itemStyle={{
                                    justifyContent: 'flex-start',
                                    fontFamily: 'serif'
                                }}
                                dropDownStyle={{ backgroundColor: '#fff' }}
                                onChangeItem={itm => onChangeItem(itm)}
                            />
                        )}
    
                        {/* </CardSection> */}
                        {/* <CardSection> */}
                        {modelList && modelList.length > 0 && (
                            <DropDownPicker
                                placeholder="Select Model"
                                searchable={true}
                                defaultValue={selectedmodelValue && selectedmodelValue}
                                items={modelList}
                                containerStyle={{ height: 50 }}
                                style={{ backgroundColor: '#fff', borderColor: '#000', borderWidth: 1, marginLeft: 5, marginRight: 5, marginTop: 10, fontFamily: 'serif' }}
                                itemStyle={{
                                    justifyContent: 'flex-start',
                                    fontFamily: 'serif',
                                }}
                                dropDownStyle={{ backgroundColor: '#fff' }}
                                onChangeItem={item => setSelectedModelValue(
                                    item.value
                                )}
                            />
                        )}
    
                        {/* </CardSection> */}
    
                        <TextInput style={styles.textStyle}
                            autoCorrect
                            placeholder="Other details"
                            value={other}
                            onChangeText={othr => setOther(othr)}
                            blurOnSubmit={true}
    
                        ></TextInput>
    
    
                        <View style={{ marginLeft: 5, marginRight: 5 }}>
                            <ImageCardSection>
                                <Text style={{ fontWeight: 'bold', color: '#fff', fontSize: 20, fontFamily: 'serif' }}>Vechicle Problem</Text>
                            </ImageCardSection>
    
                            {serviceList && serviceList.length > 0 &&
    
                                <FlatList
                                    // data={serviceList}
                                    data={formatdata(serviceList, numofcolumns)}
                                    renderItem={renderItem}
                                    numColumns={numofcolumns}
                                    extraData={serviceList}
                                    keyExtractor={item => item.serviceid}
                                />
                            }
    
                            <Button>SUBMIT</Button>
                        </View>
    
    
    
                        {loading && <Spinner />}
    
    
                    </ScrollView>
                </View>
            )
        };
        const FirstRoute = () => (
            renderScreen()
        );
    
        const SecondRoute = () => (
            <View></View>
        );
        const ThirdRoute = () => (
            <View></View>
        );
    
        const renderScene = SceneMap({
            1: FirstRoute,
            2: SecondRoute,
            3: ThirdRoute,
        });
        const renderTabBar = props => (
            <TabBar
                {...props}
                renderLabel={({ route, focused, color }) => (
                    <Text style={{ color, margin: 8, fontFamily: 'serif', fontSize: 16 }}>
                        {route.title}
                    </Text>
                )}
                indicatorStyle={{ backgroundColor: '#ffa737' }}
                style={{ backgroundColor: '#000' }}
    
    
            />
        );
    
        return (
            <>
                <Header headerText='Car Rescue Form' />
                <TabView
                    renderTabBar={props => renderTabBar(props)}
                    navigationState={{ index, routes }}
                    renderScene={renderScene}
                    onIndexChange={(idx) => onIndexchange(idx, routes)}
                    initialLayout={initialLayout}
                    onSwipeStart={() => setServiceList([])}
                    keyboardDismissMode={'on-drag'}
    
                />
            </>
    
        );
    }
    
    const styles = StyleSheet.create({
        scene: {
            flex: 1,
        },
        pikerStyle: {
            height: 50,
            borderWidth: 1,
            borderRadius: 5,
            borderColor: '#000',
            marginBottom: 10,
            color: '#000'
        },
        textStyle: {
            height: 50,
            borderWidth: 1,
            borderRadius: 5,
            borderColor: '#000',
            marginBottom: 10,
            color: '#000',
            fontFamily: 'serif',
            marginLeft: 5,
            marginRight: 5,
            marginTop: 10
        },
        imageStyle: {
            alignSelf: 'center',
            height: 30,
            width: 30,
        }
    });
4

0 回答 0