从'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,
}
});