import React, { Component } from "react"
import { StyleSheet, View, Text, Image } from "react-native"
import { unitWidth, unitHeight } from "../utils/AdapterUtil";
import RNPickerSelect from 'react-native-picker-select';
import AntDesign from "react-native-vector-icons/AntDesign"

export default class MyInfo extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.titleTip}>
                    <AntDesign
                        name={"pay-circle1"}
                        size={20}
                        style={{ color: "#FA788A", marginRight: unitWidth * 12 }}
                    />
                    <Text style={{ color: "#FA788A", fontSize: unitWidth * 28 }}>完成10项资料后，你才会被系统推荐给他人</Text>
                </View>
                <View style={styles.formArea}>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>头像</Text>
                                <View style={styles.itemRight}>
                                    <Image
                                        source={require("../../static/userPhone.png")}
                                        style={styles.userIcon}
                                    />
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>姓名</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>张晓明</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>性别</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>女</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>出生日期</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>1990-01-01</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>居住地</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>山东省烟台市莱山区</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>身高</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>170cm</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>体重</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>55kg</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>行业</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>互联网行业</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>年收入</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>15-20w</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>
                    <View style={styles.formItem}>
                        <RNPickerSelect
                            placeholder={""}
                            onValueChange={(value) => console.log(value)}
                            items={[
                                { label: 'Football', value: 'football' },
                                { label: 'Baseball', value: 'baseball' },
                                { label: 'Hockey', value: 'hockey' },
                            ]}
                        >
                            <View style={styles.itemArea}>
                                <Text style={{ fontSize: unitWidth * 28, color: "#333333" }}>兴趣爱好</Text>
                                <View style={styles.itemRight}>
                                    <Text style={{ color: "#333333", marginLeft: unitWidth * 28 }}>it</Text>
                                    <AntDesign
                                        name={"right"}
                                        size={20}
                                        style={{ color: "#999999", marginLeft: unitWidth * 22 }}
                                    />
                                </View>

                            </View>
                        </RNPickerSelect>
                    </View>

                </View>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: "center"
    },
    titleTip: {
        width: "100%",
        height: unitHeight * 84,
        backgroundColor: "#FCF2F6",
        flexDirection:"row",
        alignItems:"center",
        paddingLeft:unitWidth * 24,
    },
    formArea: {
        width: "100%"
    },
    formItem: {
        width: "100%",
        height: unitHeight * 97,
        backgroundColor: "#fff",
        marginBottom: unitHeight * 6,
    },
    itemArea: {
        width: "100%",
        height: "100%",
        flexDirection: "row",
        justifyContent: "space-between",
        alignItems: "center",
        paddingLeft: unitWidth * 23,
        paddingRight: unitWidth * 24,
        borderBottomColor: "#F9F9F9",
        borderBottomWidth: 1
    },
    itemRight: {
        flexDirection: "row",
        alignItems: "center"
    },
    userIcon: {
        width: unitWidth * 66,
        height: unitHeight * 66
    }
})