/**
 * Created by zhouhuan on 2017/10/30.
 */
import React from 'react';
import { createForm } from 'rc-form';
import { View, StyleSheet, FlatList, Text, ScrollView } from 'react-native';
import { Card, WingBlank, WhiteSpace, Button, List, InputItem } from 'antd-mobile';
import { connect } from 'react-redux';
import { createAction } from '../../../utils';

@connect(({ obligeeInfo, ListHouse, loading }) => ({ obligeeInfo, ListHouse, loading: !!loading.effects['obligeeInfo/getObligeeInfo'] }))
class ObligeeInfo extends React.Component {
  componentDidMount() {
    const { houseID } = this.props.ListHouse;
    this.props.dispatch(createAction('obligeeInfo/getObligeeInfo')({ id: houseID }));
  }
  onPress = () => {
    const ID = this.props.obligeeInfo.sourceData.id;
    this.props.dispatch(createAction('obligeeInfo/getObligeeDetail')(ID));
  };
  onEdit =() => {
    this.props.dispatch(createAction('obligeeInfo/setStatus')(true));
  };
  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error, value) => {
      if (!error) {
        this.props.dispatch(createAction('obligeeInfo/updateDSRDetail')({ id: this.props.obligeeInfo.sourceData.id, singularData: value }));
      } else {
        console.log('Validation failed');
      }
    });
  };
  onEditBack = () => {
    const { houseID } = this.props.ListHouse;
    this.props.dispatch(createAction('obligeeInfo/onEBack')(houseID));
  };
  onEndReached = () => {
    // 以下是制造新数据
    if (!this.props.loading) {
      const { houseID } = this.props.ListHouse;
      this.props.dispatch(createAction('obligeeInfo/getObligeeInfo')({ id: houseID }));
    }
  };
  keyExtractor = item => `${item.id}`;
  // 下拉刷新
  renderRefresh = () => {
    if (!this.props.loading) {
      const { houseID } = this.props.ListHouse;
      this.props.dispatch(createAction('obligeeInfo/getObligeeInfo')({ id: houseID, type: 'clear' }));
    }
  };
  renderItem =({ item }) => {
    // console.log(item);
    return (
      <WingBlank size="lg">
        <WhiteSpace size="lg" />
        <Card>
          <Card.Header
            title={item.dangShiRenXingMing}
            extra={<Text style={Styles.cardText} onPress={this.onPress}>&gt;&gt;详情</Text>}
          />
          <Card.Body>
            <Text style={Styles.cardBodyText}>当事人编号:<Text style={Styles.cardBodyText2}>{item.dangShiRenBianHao}</Text></Text>
            <Text style={Styles.cardBodyText}>证件号码:<Text style={Styles.cardBodyText2}>{item.dangShiRenIdentityCard}</Text></Text>
          </Card.Body>
        </Card>
        <WhiteSpace size="lg" />
      </WingBlank>
    );
  };
  render() {
    const { sourceData, isDetail, detailData, editable, disabled } = this.props.obligeeInfo;
    // console.log(this.props.obligeeInfo);
    const data = [sourceData];
    // console.log(data);
    const { getFieldProps } = this.props.form;
    const test = (
      <FlatList
        data={data}
        renderItem={this.renderItem}
        keyExtractor={this.keyExtractor}
        onEndReachedThreshold={0.3}
        onEndReached={this.onEndReached}
        refreshing={this.props.loading}
        onRefresh={this.renderRefresh}
      />);
    if (isDetail === false) {
      return (
        test
      );
    } else {
      return (
        <ScrollView>
          <List>
            <InputItem
              {...getFieldProps('dangShiRenXingMing', {
                initialValue: detailData.dangShiRenXingMing,
                rules: [
                  { required: true, message: '不允许为空' },
                  { validator: this.validateFWBianMa },
                ],
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              姓名
            </InputItem>
            <InputItem
              {...getFieldProps('dangShiRenXingBie', {
                initialValue: detailData.dangShiRenXingBie,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              性别
            </InputItem>
            <InputItem
              {...getFieldProps('dangShiRenTelephone', {
                initialValue: detailData.dangShiRenTelephone,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              电话号码
            </InputItem>
            <InputItem
              {...getFieldProps('dangShiRenIdentityCard', {
                initialValue: detailData.dangShiRenIdentityCard,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              身份证号码
            </InputItem>
            <InputItem
              {...getFieldProps('dangShiRenIdentityCardbak', {
                initialValue: detailData.dangShiRenIdentityCardbak,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              身份证类型
            </InputItem>
            <InputItem
              {...getFieldProps('dangShiRenAddress', {
                initialValue: detailData.dangShiRenAddress,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              地址
            </InputItem>
            <InputItem
              {...getFieldProps('DSRMaritalStatus', {
                initialValue: detailData.DSRMaritalStatus,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              婚姻状态
            </InputItem>
            <InputItem
              {...getFieldProps('DSRCensusType', {
                initialValue: detailData.DSRCensusType,
              })}
              clear
              placeholder="请输入"
              editable={editable}
              ref={(el) => { this.customFocusInst = el; }}
            >
              是否原村民
            </InputItem>
            <List.Item>
              <View style={{ flexDirection: 'row' }}>
                <Button style={{ marginRight: 8 }} type="primary" onClick={this.onEdit}>编辑</Button>
                <Button style={{ marginRight: 8 }} onClick={this.onSubmit} disabled={disabled}>保存</Button>
                <Button onClick={this.onEditBack}>返回</Button>
              </View>
            </List.Item>
          </List>
        </ScrollView>
      );
    }
  }
}
const Styles = StyleSheet.create({
  cardText: {
    color: '#2196F3',
    textAlign: 'right',
  },
  cardBodyText: {
    marginBottom: 10,
    marginLeft: 13,
  },
});
export default createForm()(ObligeeInfo);
