/**
 * Created by zack on 2018/4/20.
 */
import {
	View,
	Text,
	StyleSheet,
	Image,
	TouchableOpacity,
	FlatList,
	Modal,
	Animated,
	TextInput,
	Platform,
	Keyboard,
	Picker,
	DatePickerAndroid,
	DatePickerIOS,
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../utils/DimensionsTools'
import HttpTools from '../../network/HttpTools'
import {auth, getUserProfile, userProfile, userEmailCode, userSmsCode, userEmail,
	userMobile} from '../../network/API'
import MineHeaderImageItem from './View/MineHeaderImageItem'
import MineTextItem from './View/MineTextItem'
import {GlobalUserStorageTool, UserStorageKey} from '../../utils/GlobalUserStorageTool'
import ChinaRegionWheelPicker from 'rn-wheel-picker-china-region'
import ToastMsg from '../../utils/ToastMsg'

export default class MineViewController extends Component {
	constructor(props) {
		super(props)
		this.state = {
			avatar: props.UserInfo.avatar,
			nickName: props.UserInfo.nickname,
			gender: props.UserInfo.gender,
			birthday: props.UserInfo.birthday,
			introduction: '',
			address: '',
			email: '',
			phone: '',
			oldPhone: '',
			phoneCode: '',
			verificationCode: '',
			password: '',
			newPassword: '',
			
			isNickNameModalVisible: false,
			isIntroductionModalVisible: false,
			isUpdatePhoneModalVisible: false,
			isUpdateEmailModalVisible: false,
			isUpdatePasswordModalVisible: false,
			isDatePickerModalVisible: false,
			isGenderModalVisible: false,
			isPickerVisible: false
		}

		this.nickNameModalMarginTop = new Animated.Value((ScreenDimensions.height - 137))
		this.introductionModalMarginTop = new Animated.Value((ScreenDimensions.height - 175))
		this.updatePhoneModalMarginTop = new Animated.Value((ScreenDimensions.height - 166))
		this.updateEmailModalMarginTop = new Animated.Value((ScreenDimensions.height - 166))
		this.updatePasswordModalMarginTop = new Animated.Value((ScreenDimensions.height - 228))

		this.oldGender = '0'
		this.oldBirthday = ''

	}

	componentDidMount() {
		GlobalUserStorageTool.load(UserStorageKey.UserInfo, (ret) => {
			if (ret) {
				global.token = ret.token
				this.getUserProfile()
			}
		})

		// GlobalUserStorageTool.load(UserStorageKey.AccountAndPassword, (ret) => {
		// 	if (ret) {
		// 		this.setState({password: ret.password})
		// 	}
		// })

		if (Platform.OS === 'ios') {//keyboardDidShow
			this.keyboardWillShowSub = Keyboard.addListener('keyboardWillShow', this.keyboardWillShow.bind(this));
			this.keyboardWillHideSub = Keyboard.addListener('keyboardWillHide', this.keyboardWillHide.bind(this));
		}else {
			this.keyboardWillShowSub = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow.bind(this));
			this.keyboardWillHideSub = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide.bind(this));
		}
	}

	componentWillUnMount() {
		if (this.keyboardWillShowSub && this.keyboardWillHideSub) {
			this.keyboardWillShowSub.remove();
			this.keyboardWillHideSub.remove();
		}
	}

	getUserProfile() {
		const param = {

		}

		HttpTools.get(getUserProfile, param, (response) => {
			if (response) {
				this.setState({
					avatar: response.avatar,
					birthday: response.birthday,
					//email: response.email,
					gender: response.gender,
					introduction: response.introduction && response.introduction.length > 0 ? response.introduction : this.state.introduction,
					nickName: response.nickname,
					oldPhone: response.phone,
					phoneCode: response.phone_code,
					address: response.reside
				})

				this.oldGender = response.gender
			}
		}, (error) => {
			console.log(error)
		})
	}

	getVerificationCode(account) {
		this.setState({verificationCode: ''})
		let param
		let url = ''
		if (account.indexOf('@') !== -1) {
			url = userEmailCode
			param = JSON.stringify({
				email: account,
				purpose: "change_email"
			})
		}else {
			url = userSmsCode
			param = JSON.stringify({
				phone: account,
				phone_code: this.state.phoneCode,
				purpose: "change_phone"
			})
		}

		HttpTools.post(url, param, (response) => {
			ToastMsg.show('验证码已发送到你的' + (url === userSmsCode ? '手机' : '邮箱'))
		}, (error) => {
			ToastMsg.show('获取验证码失败')
		})
	}

	updatePhone(newPhone, verificationCode) {
		const param = JSON.stringify({
			code: verificationCode,
			phone: newPhone,
			phone_code: this.state.phoneCode
		})

		HttpTools.put(userMobile, param, (response) => {
			Keyboard.dismiss()
			ToastMsg.show('更改手机号成功')
		}, (error) => {
			ToastMsg.show('更改手机号失败')
		})
	}

	updateEmail(newEmail, verificationCode) {
		const param = JSON.stringify({
			code: verificationCode,
			email: newEmail
		})

		HttpTools.put(userEmail, param, (response) => {
			Keyboard.dismiss()
			ToastMsg.show('更改邮箱成功')
		}, (error) => {
			ToastMsg.show('更改邮箱失败')
		})
	}

	updateProfile(key, value) {
		let param = null

		if (key === 'nickname') {
			param = JSON.stringify({
				nickname: value
			})
		}else if (key === 'gender') {
			param = JSON.stringify({
				gender: value,
			})
		}else if (key === 'birthday') {
			param = JSON.stringify({
				birthday: value,
			})
		}else if (key === 'introduction') {
			param = JSON.stringify({
				introduction: value,
			})
		}else if (key === 'reside') {
			param = JSON.stringify({
				reside: value,
			})
		}

		HttpTools.put(userProfile, param, (response)=> {
			console.log(response)
		}, (error) => {
			console.log(error)
		})
	}


	showAndroidDatePicker = async () => {
		try {
			const {action, year, month, day} = await DatePickerAndroid.open({
				date: (new Date())
			});
			if (action !== DatePickerAndroid.dismissedAction) {
				let date = new Date(year, month, day);

				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()

				if (month <= 9) {
					month = '0' + month
				}

				if (day <= 9) {
					day = '0' + day
				}

				let birthday = year + '-' + month + '-' + day
				this.setState({birthday: birthday})
				this.updateProfile('birthday', birthday)
			}
		} catch ({code, message}) {
			console.warn('Cannot open date picker', message);
		}
	};

	didSelectedItem(key) {
		if (key === 0) {
			this.props.navigator.push({
				screen: 'UserCenterViewController',
				title: '',
				backButtonTitle: '',
				navigatorStyle: {
					navBarHidden: true
				},
				passProps: {

				}
			})
		} else if (key === 1) {
			this.setState({isNickNameModalVisible: true})
		}else if (key === 2) {
			this.setState({isGenderModalVisible: true})
		} else if (key === 3) {
			if (Platform.OS === 'ios') {
				this.setState({isDatePickerModalVisible: true})
			}else {
				let date = this.showAndroidDatePicker()
			}
		} else if (key === 4) {
			this.setState({isIntroductionModalVisible: true})
		}else if (key === 5) {
			this.setState({isPickerVisible: true})
		}else if (key === 7) {
			this.setState({isUpdatePasswordModalVisible: true})
		} else if (key === 8) {
			this.setState({isUpdatePhoneModalVisible: true})
		}else if (key === 9) {
			this.setState({isUpdateEmailModalVisible: true})
		}
	}

	keyboardWillShow(event) {
		if (this.state.isNickNameModalVisible) {
			Animated.timing(this.nickNameModalMarginTop,{duration: event.duration,toValue: (ScreenDimensions.height - 137 - event.endCoordinates.height)}).start()
		} else if (this.state.isIntroductionModalVisible) {
			Animated.timing(this.introductionModalMarginTop,{duration: event.duration,toValue: (ScreenDimensions.height - 175 - event.endCoordinates.height)}).start()
		} else if (this.state.isUpdatePhoneModalVisible) {
			Animated.timing(this.updatePhoneModalMarginTop,{duration: event.duration,toValue: (ScreenDimensions.height - 166 - event.endCoordinates.height)}).start()
		} else if (this.state.isUpdateEmailModalVisible) {
			Animated.timing(this.updateEmailModalMarginTop,{duration: event.duration,toValue: (ScreenDimensions.height - 166 - event.endCoordinates.height)}).start()
		}else if (this.state.isUpdatePasswordModalVisible) {
			Animated.timing(this.updatePasswordModalMarginTop,{duration: event.duration,toValue: (ScreenDimensions.height - 228 - event.endCoordinates.height)}).start()
	}

	}

	keyboardWillHide(event) {
		if (this.state.isNickNameModalVisible) {
			Animated.timing(this.nickNameModalMarginTop,{duration: Platform.OS === 'ios' ? event.duration : 300,toValue: (ScreenDimensions.height - 137)}).start(() => {
				this.setState({isNickNameModalVisible: false})
			})
		}else if (this.state.isIntroductionModalVisible){
			Animated.timing(this.nickNameModalMarginTop,{duration: Platform.OS === 'ios' ? event.duration : 300,toValue: (ScreenDimensions.height - 175)}).start(() => {
				this.setState({isIntroductionModalVisible: false})
			})
		} else if (this.state.isUpdatePhoneModalVisible) {
			Animated.timing(this.updatePhoneModalMarginTop,{duration: Platform.OS === 'ios' ? event.duration : 300,toValue: (ScreenDimensions.height - 166)}).start(() => {
				this.setState({isUpdatePhoneModalVisible: false})
			})
		} else if (this.state.isUpdateEmailModalVisible) {
			Animated.timing(this.updateEmailModalMarginTop,{duration: Platform.OS === 'ios' ? event.duration : 300,toValue: (ScreenDimensions.height - 166)}).start(() => {
				this.setState({isUpdateEmailModalVisible: false})
			})
		}else if (this.state.isUpdatePasswordModalVisible) {
			Animated.timing(this.updatePasswordModalMarginTop,{duration: Platform.OS === 'ios' ? event.duration : 300,toValue: (ScreenDimensions.height - 228)}).start(() => {
				this.setState({isUpdatePasswordModalVisible: false})
			})
		}
	}

	renderDatePicker() {
		if (Platform.OS === 'ios') {
			return(
				<DatePickerIOS
					date={new Date()}
					onDateChange={(date) => {
						let year = date.getFullYear()
						let month = date.getMonth() + 1
						let day = date.getDate()

						if (month <= 9) {
							month = '0' + month
						}

						if (day <= 9) {
							day = '0' + day
						}

						let birthday = year + '-' + month + '-' + day
						this.setState({birthday: birthday})
					}}
					mode={'date'}
				/>
			)
		}
	}

	renderItem(item) {
		const key = item.key
		let desc = ''
		if (key === 0) {
			desc = this.state.avatar

			return(
				<MineHeaderImageItem
					didSelectedItem = {() => {
						this.didSelectedItem(0)
					}}
					avatar = {this.state.avatar}
				/>
			)
		}else if (key === 1) {
			desc = this.state.nickName
		}else if (key === 2) {
			desc = this.state.gender
		}else if (key === 3) {
			desc = this.state.birthday
		}else if (key === 4) {
			desc = this.state.introduction
		}else if (key === 5) {
			desc = this.state.address
		}else if (key === 6) {
			return(
				<View style={{width: ScreenDimensions.width, height: 8, backgroundColor: '#efeff4'}}/>
			)
		}else{
			desc = '******'
		}

		return(
			<MineTextItem
				title = {item.title}
				desc = {desc}
				didSelectedItem = {() => {
					this.didSelectedItem(key)
				}}
			/>
		)
	}

	render() {
		return (
			<View style={styles.View}>
				<View style={styles.ListView}>
					<FlatList
						data = {[{key: 0, title: ''},{key: 1, title: '昵称'},{key: 2, title: '性别'},{key: 3, title: '生日'},
							{key: 4, title: '个性签名'},{key: 5, title: '我的地址'},{key: 6, title: '修改密码'},{key: 7, title: '修改密码'},{key: 8, title: '修改手机'}, {key: 9, title: '修改邮箱'}]}
						renderItem={({item}) => this.renderItem(item)}
						keyExtractor = {(item,index) =>{
							return 'key' + item.key + index
						}}
						ListFooterComponent = {() => {
							return(
								<View style={{width: ScreenDimensions.width, height: 44, backgroundColor: 'white'}} />
							)
						}}
					/>
				</View>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isNickNameModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						onPress={() => {
							this.setState({isNickNameModalVisible: false})
						}}
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.NickNameModalBgView, {marginTop: this.introductionModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									Keyboard.dismiss()
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改昵称'}</Text>

								<TouchableOpacity onPress={() => {
									this.setState({isNickNameModalVisible: false})
									this.updateProfile('nickname', this.state.nickName)
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<TextInput multiline={false} onChangeText={(text) => {
								this.setState({nickName: text})
							}} keyboardType={'numeric'} defaultValue={this.state.phone} style={styles.TextInput}/>
							<View style={{ width: ScreenDimensions.width - 60, height: 0.5, backgroundColor: '#efeff4', marginLeft: 30}} />

						</Animated.View>

					</View>

				</Modal>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isIntroductionModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.introductionBgModalView, {marginTop: this.introductionModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									Keyboard.dismiss()
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'个人简介'}</Text>

								<TouchableOpacity onPress={() => {
									this.setState({isIntroductionModalVisible: false})
									this.updateProfile('introduction', this.state.introduction)
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<TextInput multiline={true} onChangeText={(text) => {
								this.setState({introduction: text})
							}} defaultValue={this.state.introduction} style={styles.introductionTextInput}/>
							<View style={{ width: ScreenDimensions.width - 60, height: 0.5, backgroundColor: '#efeff4', marginLeft: 30}} />

							<Text style={styles.NumberText}>{'30'}</Text>

						</Animated.View>

					</View>

				</Modal>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isUpdatePhoneModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.UpdatePhoneModalBgView, {marginTop: this.updatePhoneModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									Keyboard.dismiss()
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改手机'}</Text>

								<TouchableOpacity onPress={() => {
									this.updatePhone(this.state.phone, this.state.verificationCode)
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<TextInput placeholder={'请输入您的新手机号'} placeholderTextColor={'#b8bcbf'} multiline={false} onChangeText={(text) => {
								this.setState({phone: text})
							}} style={styles.UpdateTextInput}/>

							<View style={{ width: ScreenDimensions.width - 60, height: 0.5, backgroundColor: '#efeff4', marginLeft: 30}} />

							<View style={styles.VerifyTextInputBgView}>
								<View style={styles.VerifyTextInputContainerView}>
									<TextInput onChangeText={(text) => {
										this.setState({verificationCode: text})
									}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
									<TouchableOpacity onPress={() => {
										if (!this.state.phone && !this.state.phone.length) {
											ToastMsg.show('请输入您的新手机号')
											return
										}

										if (this.state.oldPhone === this.state.phone) {
											ToastMsg.show('不需要更新相同的手机号')
											return
										}

										this.getVerificationCode(this.state.phone)
									}} style={styles.VerifyButtonBgView}>
										<View style={styles.VerifyLineView}/>
										<Text style={styles.VerifyButtonText}>{'获取验证码'}</Text>
									</TouchableOpacity>
								</View>
								<View style={styles.LineView}/>
							</View>

						</Animated.View>

					</View>

				</Modal>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isUpdateEmailModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.UpdatePhoneModalBgView, {marginTop: this.updateEmailModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									Keyboard.dismiss()
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改邮箱'}</Text>

								<TouchableOpacity onPress={() => {
									this.updateEmail(this.state.email, this.state.verificationCode)
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<TextInput placeholder={'请输入您的新邮箱'} placeholderTextColor={'#b8bcbf'} multiline={false} onChangeText={(text) => {
								this.setState({email: text})
							}} style={styles.UpdateTextInput}/>

							<View style={{ width: ScreenDimensions.width - 60, height: 0.5, backgroundColor: '#efeff4', marginLeft: 30}} />

							<View style={styles.VerifyTextInputBgView}>
								<View style={styles.VerifyTextInputContainerView}>
									<TextInput onChangeText={(text) => {
										this.setState({verificationCode: text})
									}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
									<TouchableOpacity onPress={() => {
										if (!this.state.email || !this.state.email.length) { //还要正则判断邮箱格式
											ToastMsg.show('请输入您的邮箱')
											return
										}

										this.getVerificationCode(this.state.email)
									}} style={styles.VerifyButtonBgView}>
										<View style={styles.VerifyLineView}/>
										<Text style={styles.VerifyButtonText}>{'获取验证码'}</Text>
									</TouchableOpacity>
								</View>
								<View style={styles.LineView}/>
							</View>

						</Animated.View>

					</View>

				</Modal>


				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isUpdatePasswordModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.UpdatePasswordModalBgView, {marginTop: this.updatePasswordModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									Keyboard.dismiss()
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改密码'}</Text>

								<TouchableOpacity onPress={() => {
									this.setState({isUpdatePasswordModalVisible: false})
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<TextInput placeholder={'请输入您的密码'} placeholderTextColor={'#b8bcbf'} multiline={false} onChangeText={(text) => {
								this.setState({password: text})
							}} style={styles.UpdatePasswordTextInput}/>

							<View style={styles.VerifyTextInputBgView}>
								<View style={styles.VerifyTextInputContainerView}>
									<TextInput onChangeText={(text) => {
										this.setState({verificationCode: text})
									}} keyboardType={'phone-pad'} placeholder={'请输入验证码'} placeholderTextColor={'#b8bcbf'} style={styles.VerifyTextInput}/>
									<TouchableOpacity onPress={() => {
										this.getVerificationCode()
									}} style={styles.VerifyButtonBgView}>
										<View style={styles.VerifyLineView}/>
										<Text style={styles.VerifyButtonText}>{'获取验证码'}</Text>
									</TouchableOpacity>
								</View>
								<View style={styles.LineView}/>
							</View>


							<View style={{ width: ScreenDimensions.width - 60, height: 0.5, backgroundColor: '#efeff4', marginLeft: 30}} />
							<TextInput placeholder={'请输入您的新密码'} placeholderTextColor={'#b8bcbf'} multiline={false} onChangeText={(text) => {
								this.setState({newPassword: text})
							}} style={styles.UpdatePasswordTextInput}/>

						</Animated.View>

					</View>

				</Modal>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isDatePickerModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.UpdatePasswordModalBgView, {marginTop: this.updatePasswordModalMarginTop}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									this.setState({isDatePickerModalVisible: false, birthday: this.oldBirthday})
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改生日'}</Text>

								<TouchableOpacity onPress={() => {
									this.setState({isDatePickerModalVisible: false})
									this.oldBirthday = this.state.birthday
									this.updateProfile('birthday', this.state.birthday)
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							{this.renderDatePicker()}
						</Animated.View>

					</View>

				</Modal>

				<Modal
					animationType={"fade"}
					transparent={true}
					visible={this.state.isGenderModalVisible}
					onRequestClose={() => {}}
					onShow={() => {

					}}
				>
					<View
						activeOpacity= {1}
						style={{width: ScreenDimensions.width, height: ScreenDimensions.height, backgroundColor: 'rgba(0,0,0,0.15)',}}
					>
						<Animated.View style={[styles.GenderModalBgView, {marginTop: ScreenDimensions.height - 208}]}>
							<View style={styles.ModalHeaderView}>
								<TouchableOpacity onPress={() => {
									this.setState({isGenderModalVisible: false})
									this.setState({gender: this.oldGender})
								}}>
									<Text style={styles.CancelText}>{'取消'}</Text>
								</TouchableOpacity>

								<Text style={styles.TitleText}>{'修改性别'}</Text>

								<TouchableOpacity onPress={() => {
									this.setState({isGenderModalVisible: false})
									this.oldGender = this.state.gender
									this.updateProfile('gender', parseInt(this.state.gender))
								}}>
									<Text style={styles.ConfirmText}>{'确定'}</Text>
								</TouchableOpacity>
								<View style={{position: 'absolute', width: ScreenDimensions.width, height: 0.5, backgroundColor: '#efeff4', left: 0, bottom: 0}} />
							</View>

							<Picker
								selectedValue={this.state.gender}
								style={{ height: 208 - 44, width: ScreenDimensions.width }}
								onValueChange={(itemValue, itemIndex) => this.setState({gender: itemValue})}>
								<Picker.Item label="男" value= '1' />
								<Picker.Item label="女" value= '2' />
								<Picker.Item label="保密" value= '0' />
							</Picker>
						</Animated.View>

					</View>

				</Modal>


				<ChinaRegionWheelPicker
					isVisible={this.state.isPickerVisible}
					navBtnColor={'#e66a6a'}
					selectedProvince={'广东'}
					selectedCity={'深圳'}
					selectedArea={'福田区'}
					transparent
					animationType={'fade'}
					onSubmit={(param) => {
						const region = param.province + '-' + param.city + '-' + param.area
						this.setState({address: region})
						this.updateProfile('reside', region)
					}}
					onCancel={() => {
						this.setState({isPickerVisible: false})
					}} // 点击取消_onPressCancel
					androidPickerHeight={100}   // 安卓手机下可以设置picker区域的高度
				/>


			</View>
		);
	}
}

const styles = StyleSheet.create({
	View: {
		width: ScreenDimensions.width,
		height: ScreenDimensions.height,
		justifyContent: 'center',
		alignItems: 'center',
		backgroundColor: 'white'
	},
	ListView: {
		marginTop: NavigationBarHeight.height,
		width: ScreenDimensions.width,
		height: ScreenDimensions.height - NavigationBarHeight.height,
		backgroundColor: 'white'
	},
	NickNameModalBgView: {
		width: ScreenDimensions.width,
		height: 137,
		backgroundColor: 'white'
	},
	ModalHeaderView: {
		width: ScreenDimensions.width,
		height: 44,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	CancelText: {
		fontSize: 15,
		marginLeft: 15,
		color: '#e66a6a'
	},
	ConfirmText: {
		fontSize: 15,
		marginRight: 15,
		color: '#e66a6a'
	},
	TitleText: {
		fontSize: 16,
		color: '#333333'
	},
	TextInput: {
		width: ScreenDimensions.width - 60,
		height: 44,
		fontSize: 14,
		color: '#b8bcbf',
		textAlign: 'left',
		marginLeft: 30,
		marginTop: 10
	},

	introductionBgModalView: {
		width: ScreenDimensions.width,
		height: 175,
		backgroundColor: 'white',
	},
	introductionTextInput: {
		width: ScreenDimensions.width - 60,
		height: 130,
		fontSize: 14,
		color: '#b8bcbf',
		textAlign: 'left',
		marginLeft: 30,
		paddingTop: 15,
		paddingBottom: 15,
		textAlignVertical: 'top'
	},
	NumberText: {
		fontSize: 14,
		color: '#b8bcbf',
		position: 'absolute',
		bottom: 5,
		right: 5,
	},
	UpdatePhoneModalBgView: {
		width: ScreenDimensions.width,
		height: 175,
		backgroundColor: 'white',
	},
	UpdateTextInput: {
		width: ScreenDimensions.width - 60,
		height: 55,
		fontSize: 14,
		color: '#b8bcbf',
		textAlign: 'left',
		marginLeft: 30,
	},
	UpdatePasswordModalBgView: {
		width: ScreenDimensions.width,
		height: 228,
		backgroundColor: 'white',
	},
	UpdatePasswordTextInput: {
		width: ScreenDimensions.width - 60,
		height: 60,
		fontSize: 14,
		color: '#b8bcbf',
		textAlign: 'left',
		marginLeft: 30,
	},
	VerifyTextInputBgView: {
		width: ScreenDimensions.width - 60,
		height: 50,
		marginLeft: 30,
	},
	VerifyTextInputContainerView: {
		width: ScreenDimensions.width - 60,
		height: 60,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between'
	},
	VerifyTextInput: {
		width: ScreenDimensions.width - 60 - 100,
		textAlign: 'left',
		fontSize: 14,
		color: '#4A4A4A',
		height:60,
	},
	VerifyButtonBgView: {
		width: 100,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	VerifyButtonText: {
		fontSize: 14,
		color: '#5a9cd9',
	},
	VerifyLineView: {
		width: 1,
		height: 21,
		backgroundColor: 'rgba(80, 80, 80, 0.36)'
	},
	GenderModalBgView: {
		width: ScreenDimensions.width,
		height: 208,
		backgroundColor: 'white'
	},
	GenderItemBgView: {
		width: ScreenDimensions.width,
		height: 50,
		backgroundColor: 'white',
		justifyContent: 'center',
		alignItems: 'center'
	},


})