import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import { List, WhiteSpace } from 'antd-mobile';
import { createForm } from 'rc-form';
import { connect } from 'react-redux';
import { createAction } from '../../../utils/index';

@connect(({ HouseDetail, ListHouse }) => ({ HouseDetail, ListHouse }))
class HouseDetail extends Component {
  componentDidMount() {
    const { dispatch, ListHouse } = this.props;
    dispatch(createAction('HouseDetail/getHouseDetail')(ListHouse.houseID));
  }
  modifyInfo = () => {
    const { ListHouse } = this.props;
    this.props.dispatch(createAction('HouseDetail/jumpPage')(ListHouse.houseID));
  };
  render() {
    // console.log(this.props.HouseDetail);
    const { singularData, metas } = this.props.HouseDetail;
    const list = metas.map(({ key, label }) => {
      const data = singularData[key];
      return (
        <List.Item
          key={key}
          extra={data}
          wrap
        >
          {label}
        </List.Item>
      );
    });
    return (
      <View>
        <ScrollView>
          <View style={{ flex: 1, flexDirection: 'column' }}>
            { /* <WhiteSpace />
            <View style={{ width: 80, height: 40 }}>
            <Button type="primary" onClick={this.modifyInfo}>编辑</Button>
            </View>
            <WhiteSpace /> */}
            <View>
              <List className="my-list">
                {list}
              </List>
            </View>
          </View>
        </ScrollView>
        <WhiteSpace />
      </View>
    );
  }
}
export default createForm()(HouseDetail);

