/**
 * Created by zhouhuan on 2017/11/2.
 */
import React from 'react';
import { View, ScrollView } from 'react-native';
import { List, InputItem, WhiteSpace, WingBlank } from 'antd-mobile';
import { connect } from 'react-redux';
import Icon from 'react-native-vector-icons/FontAwesome';
import { createAction } from '../../../utils';

@connect(({ peopleInfo }) => ({ peopleInfo }))
class PeopleDetailInfo extends React.Component {
  componentDidMount() {
    const { id } = this.props.navigation.state.params;
    this.props.dispatch(createAction('peopleInfo/getPeopleDetail')(id));
  }
  onEdit =() => {
    const { id } = this.props.navigation.state.params;
    this.props.dispatch(createAction('peopleInfo/GoToPeopleDetailEditScreen')(id));
  };
  render() {
    const { detailData, metas } = this.props.peopleInfo;
    return (
      <ScrollView>
        <WhiteSpace />
        <WhiteSpace />
        <WingBlank>
          <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
            <Icon.Button
              name="edit"
              backgroundColor="#08BBF9"
              onPress={this.onEdit}
            >
              编辑
            </Icon.Button>
          </View>
          <WhiteSpace />
          <List>
            {
              metas.map((m) => {
                return (
                  <List.Item
                    key={m.key}
                    extra={detailData[m.key]}
                  >
                    {m.label}
                  </List.Item>
                );
              })
            }
          </List>
        </WingBlank>
      </ScrollView>
    );
  }
}
export default PeopleDetailInfo;
