/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { Component } from 'react';
import {
	Platform,
	StyleSheet,
	Text,
	View,
	Image,
	TouchableOpacity,
	StatusBar,
	ImageBackground,
	Button,
	DeviceEventEmitter
} from 'react-native';
import BasePage from './BasePage';
import commonutil from './utils/commonutil';
import http_user from './services/user';

type Props = {};
export default class SchoolAge extends BasePage {
	state = {};
	render() {
		return (
			<ImageBackground
				// source={{
				// 	uri:
				// 		'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556277324856&di=dc1548a0c5ba10481af922e174912937&imgtype=0&src=http%3A%2F%2Fwww.51pptmoban.com%2Fd%2Ffile%2F2012%2F05%2F12%2F82c4568a90055adcf8fbb896f0841c69.jpg'
				// }}
				style={{
					flex: 1,
					width: '100%',
					height: '100%',
					backgroundColor: 'white'
				}}
			>
				<StatusBar backgroundColor={'transparent'} translucent={true} barStyle={'dark-content'} />
				<View style={{ flex: 0.5 }} />
				<Text style={styles.title_text}>请选择孩子所在的学龄段</Text>
				<View style={{ flex: 0.1 }} />
				<View
					style={{
						flex: 5,
						flexDirection: 'column',
						justifyContent: 'center',
						alignItems: 'center'
					}}
				>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.pres.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/preschool.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.primary.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/primary.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
					<TouchableOpacity activeOpacity={1} onPress={this.middle.bind(this)} style={styles.touchable_item}>
						<Image source={require('./images/schoolAge/middle.png')} style={styles.image_item} />
					</TouchableOpacity>
					<View style={styles.view_flex} />
				</View>
			</ImageBackground>
		);
	}

	componentWillMount() {}
	pres() {
		//PRESCHOOL("学前")
		this.updateUserInfo('PRESCHOOL');
	}

	primary() {
		// PRIMARY_SCHOOL("小学")
		this.updateUserInfo('PRIMARY_SCHOOL');
	}

	middle() {
		this.updateUserInfo('MIDDLE_SCHOOL');
	}
	async updateUserInfo(group) {
		if (global.userInfo.isVisitor) {
			console.log('游客登录');
			//是访客登录
			global.userInfo.ageGroup = group;
			this.clearPageToNext('MainPage');
			commonutil.saveUserInfo();
			return true;
		} else {
			console.log('正常登录');
			let opts = {
				method: 'PUT', //请求方法
				body: { ageGroup: group } //请求体
			};
			await http_user.update_UserInfo(opts).then((res) => {
				global.userInfo.ageGroup = group;
				commonutil.saveUserInfo();
				this.clearPageToNext('MainPage');
			});
		}
	}
}

const styles = StyleSheet.create({
	title_text: {
		justifyContent: 'center',
		alignItems: 'center',
		color: 'black',
		fontSize: 20,
		fontWeight: '300',
		textAlign: 'center'
	},
	view_flex: { flex: 0.1 },
	touchable_item: {
		flex: 1,
		width: '90%',
		justifyContent: 'center',
		alignItems: 'center'
	},
	image_item: {
		width: '100%',
		height: '95%',
		resizeMode: 'contain'
	}
});