import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form,} from 'antd';
import { extendRule, } from "../../../utils/common";
import DropDownPagination from '../../common/DropDownPaginationEx';
import QueryShowPage from '../../PageConfig/Common/QueryShowPage';
import TableShowPage from '../../PageConfig/Table/TableShowPage';
import EditShowPage from '../../PageConfig/Edit/EditShowPage';
import ChartShowPage from '../../PageConfig/Chart/ChartShowPage';


class CustomPageConfigPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  };

  componentDidMount() {


  }


  render() {
     const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };
    const onSelectForm = ({data}) => {
      if (data && data.length > 0) {
        this.setState({
          data: {
            ...this.state.data,
            FormId: data[0],
          }
        });
      }
      ;
    };
    const onFilter=({params})=>{
      extendRule(params,'FORM_TYPE',1,99);
    }

    return (
      <div>
          <Form>

            <Row>
              <Col span={12}>
                <Form.Item
                  label={'表单'}
                  {...formItemLayout}
                >
                  <DropDownPagination inputDataApi={'PF/FORM/OrderPaged'} fieldName={'FormNAME'}
                                      data={this.state.data} onSelect={onSelectForm} onFilter={onFilter}/>
                </Form.Item>
              </Col>

            </Row>

            <Row>
              <Col>
                {
                  (()=>{
                    if(this.state.data&&this.state.data.FormId) {
                      return <div>
                        <EditShowPage formId={this.state.data.FormId} orgId={this.props.login.OrgId}>
                          <Button>页面配置</Button>
                        </EditShowPage>

                        <QueryShowPage formId={this.state.data.FormId} orgId={this.props.login.OrgId}>
                          <Button>查询配置</Button>
                        </QueryShowPage>
                        <TableShowPage formId={this.state.data.FormId} orgId={this.props.login.OrgId}>
                          <Button>列表配置</Button>
                        </TableShowPage>
                        <ChartShowPage formId={this.state.data.FormId} orgId={this.props.login.OrgId}>
                          <Button >图表配置</Button>
                        </ChartShowPage>
                      </div>;
                    }
                  })()
                }
              </Col>
            </Row>

          </Form>
      </div>
    );
  }

}

CustomPageConfigPage.propTypes = {
};

export default connect(({ login, loading }) => ({ login, loading }))(Form.create()(CustomPageConfigPage));
