import React, { PureComponent } from 'react';
import { TouchableOpacity, Text, View, StyleSheet, Dimensions } from 'react-native';
import { Card, WingBlank, WhiteSpace } from 'antd-mobile';

const totalWidth = Dimensions.get('window').width;
class FlatListItem extends PureComponent {
  onPress = () => {
    this.props.onPressItem(this.props.item.id);
  };

  render() {
    return (
      <TouchableOpacity
        {...this.props}
        style={{ height: 120 }}
        onPress={this.onPress}
      >
        <WingBlank size="lg">
          <WhiteSpace size="lg" />
          <Card>
            <Card.Header
              title={this.props.title}
              extra={<Text style={Styles.cardText}>&gt;&gt;详情</Text>}
            />
            <Card.Body>
              {
                this.props.meta.map((m) => {
                  if (this.props.item[m.key] !== this.props.title) {
                    return (
                      <Text key={m.label} style={Styles.cardBodyText}>{m.label}:<Text key={m.key} style={Styles.cardBodyText2}>{this.props.item[m.key]}</Text></Text>
                    );
                  } else {
                    return (
                      <View key={m.key} />
                    );
                  }
                })
              }
            </Card.Body>
          </Card>
          <WhiteSpace size="lg" />
        </WingBlank>
      </TouchableOpacity>
    );
  }
}
const Styles = StyleSheet.create({
  row: {
    height: 60,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
    flexDirection: 'row',
    alignItems: 'center',
  },
  part: {
    marginLeft: 5,
    flex: 1,
  },
  unColor: {
    color: '#575656',
    marginTop: 8,
    fontSize: 12,
  },
  link: {
    color: '#1BB7FF',
    marginTop: 2,
  },
  ScrollView: {
    flex: 1,
  },
  container: {
    flex: 1,
    marginLeft: 10,
    marginRight: 10,
    flexDirection: 'column',
    backgroundColor: 'white',
  },
  nm: {
    color: '#333',
    fontSize: 12,
  },
  nm1: {
    color: '#333',
    fontSize: 12,
    marginLeft: 30,
  },
  nameView: {
    paddingTop: 2,
    flexDirection: 'row',
    alignItems: 'flex-start',
    marginLeft: 1,
  },
  item: {
    flex: 1,
    height: 60,
    width: totalWidth,
    padding: 1,
    borderBottomWidth: 2,
    borderBottomColor: '#ddd',
    flexDirection: 'column',
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
  },
  width50: {
    marginLeft: 1,
    marginRight: 40,
    alignItems: 'flex-start',
    justifyContent: 'flex-start',
    backgroundColor: 'white',
  },
  rightIcon: {
    position: 'absolute',
    right: -2,
    top: -30,
    height: 15,
    width: 15,
  },
  cardText: {
    color: '#2196F3',
    textAlign: 'right',
  },
  cardBodyText: {
    marginBottom: 10,
    marginLeft: 13,
  },

});
export default FlatListItem;
