import React, { Component } from 'react';
import { View, ScrollView } from 'react-native';
import { List, InputItem, Button, Toast } 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));
  }
  onSubmit = () => {
    this.props.form.validateFields({ force: true }, (error, value) => {
      if (!error) {
        // 校验成功执行这里的代码
        this.props.dispatch(createAction('HouseDetail/updateHouseDetail')({ id: this.props.ListHouse.houseID, singularData: value }));
      } else {
        // 执行出现错误，弹出错处理
        Toast.show('Validation failed');
      }
    });
  };
  onReset = () => {
    this.props.form.resetFields();
  };
  validateFWBianMa = (rule, value, callback) => {
    if (value) {
      callback();
    } else {
      callback(new Error('At least four charactors for account'));
    }
  };
  modifyInfo = () => {
    this.props.dispatch(createAction({ type: 'setEnable', payload: { enableEdit: true } }));
  };

  render() {
    const { getFieldProps } = this.props.form;
    const { fwLouCeng } = this.props.HouseDetail.singularData;
    if (this.props.HouseDetail.enableEdit === true) {
      return (
        <View>
          <List>
            <InputItem
              {...getFieldProps('fwBiaMa', {
                initialValue: this.props.HouseDetail.singularData.fwBiaMa,
                rules: [
                  { required: true, message: '房屋编码不允许为空' },
                  { validator: this.validateFWBianMa },
                ],
              })}
              clear
              placeholder="请输入房屋编码"
              ref={(el) => { this.customFocusInst = el; }}
            >
              房屋编码
            </InputItem>
            <InputItem
              {...getFieldProps('fwDiZhi')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              房屋地址
            </InputItem>
            <InputItem
              {...getFieldProps('fwLouDongHao')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              楼栋号
            </InputItem>
            <InputItem
              {...getFieldProps('fwLouCeng')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              楼层
            </InputItem>
            <InputItem
              {...getFieldProps('fwFangHao')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              房号
            </InputItem>
            <InputItem
              {...getFieldProps('WangGeBianHao')}
              clear
              placeholder="请输入房屋编码"
              ref={(el) => { this.customFocusInst = el; }}
            >
              网格
            </InputItem>
            <InputItem
              {...getFieldProps('fwSuoShuJieDao')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              街道
            </InputItem>
            <InputItem
              {...getFieldProps('fwShenBaoMianJi')}
              clear
              placeholder="请输入"
              ref={(el) => { this.customFocusInst = el; }}
            >
              申报面积
            </InputItem>
            <List.Item>
              <View style={{ flexDirection: 'row' }}>
                <Button type="primary" size="large" onClick={this.onSubmit}>Submit</Button>
                <Button size="large" onClick={this.onReset}>Reset</Button>
              </View>
            </List.Item>
          </List>
        </View>
      );
    } else {
      return (
        <View>
          <Button type="primary" size="small" onClick={this.modifyInfo} >编辑</Button>
          <ScrollView showsVerticalScrollIndicator={true}>
            <List renderHeader={() => 'Basic Style'} className="my-list">
              <List.Item
                key={(this.props.HouseDetail.singularData.fwBiaMa)}
                extra={(this.props.HouseDetail.singularData.fwBiaMa)}
              >
                房屋编码
              </List.Item>
              <List.Item
                key={(this.props.HouseDetail.singularData.fwDiZhi)}
                extra={(this.props.HouseDetail.singularData.fwDiZhi)}
              >
                房屋地址
              </List.Item>
              <List.Item
                key={(this.props.HouseDetail.singularData.fwLouDongHao)}
                extra={(this.props.HouseDetail.singularData.fwLouDongHao)}
              >
                楼栋号
              </List.Item>
              <List.Item key={(fwLouCeng)} extra={(fwLouCeng)}>楼层</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwFangHao)} extra={(this.props.HouseDetail.singularData.fwFangHao)}>房号</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.WangGeBianHao)} extra={(this.props.HouseDetail.singularData.WangGeBianHao)}>网格</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwSuoShuJieDao)} extra={(this.props.HouseDetail.singularData.fwSuoShuJieDao)}>街道</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwSuoShuSheQu)} extra={(this.props.HouseDetail.singularData.fwSuoShuSheQu)}>社区</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
              <List.Item key={(this.props.HouseDetail.singularData.fwShenBaoMianJi)} extra={(this.props.HouseDetail.singularData.fwShenBaoMianJi)}>申报面积</List.Item>
            </List>
          </ScrollView>
        </View>
      );
    }
  }
}
export default createForm()(HouseDetail);

