import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input,Select,Checkbox ,Modal} from 'antd';
import {extend, extendRule, initFilter} from "../../../utils/common";
import BtnShowPage from '../Common/BtnShowPage';

const FormItem = Form.Item;
const Option = Select.Option;
class CustomEditPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      paginationTotalCount: 0,
      rowData:{},
      visible:false
    };
  };
  componentDidMount() {

  };

  getCustomData(){
    const formId = this.props.formId;
    const orgId = this.props.orgId;
    const data={
      PAGE_FORM_ID:formId,
      ORG_ID:orgId,
    };
    this.setState({
      data: data
    });
    const json = initFilter(orgId);
    extendRule(json, 'PAGE_FORM_ID', 1, formId);
    this.props.dispatch({
      type: 'app/getDataByPost',
      payload: json,
      url:'PF/PageCustom/Get',
      onComplete: (ret) => {
        if(ret){
          this.setState({
            data: ret
          });
        }
      }
    });
  }


  handleShowModal=()=>{
    this.props.form.resetFields();
    this.getCustomData();
    this.setState({
      visible: true
    });
  };
  handleCloseModal=()=>{
    this.setState({
      visible: false
    });
  };
  render() {
    const form = this.props.form;
    const location = this.props.location;
    const dispatch = this.props.dispatch;
    const match = this.props.match;
    const formId = this.props.formId;
    const orgId = this.props.orgId;
    const onSave = this.props.onSave;

    const {getFieldValue, getFieldDecorator, validateFields, validateFieldsAndScroll} = form;
    const handleOk = () => {
      validateFieldsAndScroll((errors, values) => {
        if (errors) return;
        extend(this.state.data,values);
        dispatch({
          type: 'app/getDataByPost',
          payload: this.state.data,
          url: 'PF/PageCustom/Update',
          onComplete: (ret) => {
            if (ret) {
              if (typeof onSave === 'function') {
                onSave()
              }
              this.handleCloseModal();
            }
          }
        })
      })
    };
    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };

    return (
      <div className='btn_margin'  style={{ display: "inline-block" }}>
        <span onClick={this.handleShowModal}>{this.props.children}</span>
        <Modal visible={this.state.visible} maskClosable={false} onCancel={this.handleCloseModal} footer={false} width={"98%"}>
          <Form>
            <Row>
              <Col span={12}>
                <FormItem label={'组件名称/URL'} {...formItemLayout}>
                  {getFieldDecorator('COMPONENT_NAME', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.COMPONENT_NAME,
                    rules: [
                      {required: true, whitespace: true, message: '请输入组件名称/URL'},
                    ],
                  })(<Input placeholder="请输入组件名称/URL"/>)}
                </FormItem>
              </Col>
              <Col span={12}>
                <FormItem label={'自定义参数'} {...formItemLayout}>
                  {getFieldDecorator('CUSTOM_PARAMS', {
                    validateTrigger: 'onBlur',
                    initialValue: this.state.data.CUSTOM_PARAMS,
                    rules: [],
                  })(<Input placeholder="自定义参数  格式：参数名称=参数值  多个参数时以||分割"/>)}
                </FormItem>
              </Col>
            </Row>

            <Row>
              <Col >
                <div style={{textAlign:'right'}}>
                    <Button type="primary" onClick={handleOk}>保存</Button>
                </div>
                {
                  (()=>{
                    if(this.props.formId) {
                      return <BtnShowPage orgId={this.props.orgId} tableId={this.props.formId} btnPageType={2}>
                        <Button icon={'star'} css={'default'}>按钮</Button>
                      </BtnShowPage>;
                    }
                  })()
                }
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }

}


export default connect()(Form.create()(CustomEditPage));
