import React, { PureComponent } from 'react';
import { View, StyleSheet, Dimensions, ScrollView, Text, Picker } from 'react-native';
import { connect } from 'react-redux';
import { List, InputItem } from 'antd-mobile';

const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;
// create a component
@connect(({ userInfo }) => ({ userInfo }))
class UserInfoHomeScreen extends PureComponent {
  render() {
    return (
      <View style={{ flex: 1, backgroundColor: '#06C1AE' }}>
        <View style={{ position: 'absolute', width, height, backgroundColor: '#06C1AE' }} />
        <ScrollView>
          <View style={styles.header}>
            <View style={styles.userContainer}>
              <Text style={styles.avatar} />
              <View>
                <View style={{ flexDirection: 'row' }}>
                  <Text style={{ color: 'white' }}>素敌</Text>
                  <Text style={{ marginLeft: 4 }} />
                </View>
                <Text style={{ color: 'white', marginTop: 4 }}>个人信息</Text>
              </View>
            </View>
            <List style={{ backgroundColor: 'white' }} className="picker-list">
              <Picker
                extra="请选择(可选)"
                data={district}
                title="Areas"
                {...getFieldProps('district', {
                  initialValue: ['340000', '341500', '341502'],
                })}
                onOk={e => console.log('ok', e)}
                onDismiss={e => console.log('dismiss', e)}
              >
                <List.Item arrow="horizontal">Multiple & cascader</List.Item>
              </Picker>
            </List>
          </View>
        </ScrollView>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  header: {
    backgroundColor: '#06C1AE',
    paddingBottom: 20,
  },
  icon: {
    width: 27,
    height: 27,
  },
  userContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    margin: 10,
  },
  avatar: {
    width: 50,
    height: 50,
    marginRight: 10,
    borderRadius: 25,
    borderWidth: 2,
    borderColor: '#51D3C6',
  },
});
export default UserInfoHomeScreen;
