import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input,Select,Checkbox,Modal,Transfer,Spin ,Table,Tabs,Popconfirm,message} from 'antd';
import {
  extend,
  extendRule,
  initFilter,
  initQueryFilter,
  getOnlyPropertyData,
  extendInclude,
  getDataFieldValue, guid, initFilterGroup, extendGroupRule
} from "../../../utils/common";
import FormPage from '../../FormPage';
import storage from "../../../utils/storage";

const FormItem = Form.Item;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
class EntitySqlPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      btns:[],
      title:'流程审核',
      historyData:[],
      remark:'',
    };
  };

  componentDidMount() {
    this.props.form.resetFields();
    this.loadData();
  }

  componentWillReceiveProps(NextProps) {
    if (NextProps.custom.entitySqlClick ) {
      this.props.form.resetFields();
      this.loadData();
      this.props.dispatch({
        type: 'custom/save',
        payload: {
          entitySqlClick:false
        },
      });
    }
  }

  loadData=()=> {
    this.setState({
      sqls: '',
      data:{
        DataBaseType:3,
        DstOrgId: storage('lacal').getItem('entitySqlDstOrgId').val,
        EntityNames:'',
        SqlType:'2'
      }
    })
  };





  getSqlsByFormId=()=>{
    if(!this.state.data.DataBaseType) {
      message.error('请选择数据库类型');
      return;
    }
    if(!this.state.data.EntityNames) {
      message.error('请选择实体表');
      return;
    }
    storage('lacal').setItem('entitySqlDstOrgId',this.state.data.DstOrgId);
    const {data}=this.props;
    const {ids}=data?data:{};
    var json=initFilter(this.props.login.OrgId);
    json['Keyword']=this.state.data.EntityNames;
    json['Parameter1']=this.state.data.DataBaseType;
    json['Parameter2']=this.state.data.DstOrgId;
    json['Parameter3']=this.state.data.SqlType;
    this.props.dispatch({
      type: 'PFForm/getSqlsByEntityName',
      payload: json,
      onComplete: (ret) => {
        this.setState({
          sqls: ret
        })
      }
    });
  }


  render() {


    const formItemLayout = {
      labelCol: {span: 6},
      wrapperCol: {span: 14},
    };



    return (
      <div>
        <div>
          <h2>{this.state.title}</h2>
        </div>
        <Form>
          <Row style={{ marginTop: '20px' }}>
            <Col span={12}>
              <Form.Item
                label={'目标数据库类型'}
                {...formItemLayout}
              >
                <Select  value={this.state.data.DataBaseType?this.state.data.DataBaseType.toString():'0'} onChange={(e)=>{
                  const data={...this.state.data};
                  data.DataBaseType=e;
                  this.setState({
                    data,
                  })
                }} >
                  <Option value="1">SQL</Option>
                  <Option value="2">MySQL</Option>
                  <Option value="3">Oracle</Option>
                  <Option value="4">Postgresql</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'实体表'}
                {...formItemLayout}
              >
                <Input placeholder={'实体表  多个逗号隔开'} value={this.state.data.EntityNames} onChange={(e)=>{
                  const data={...this.state.data};
                  data.EntityNames=e.target.value;
                  this.setState({
                    data,
                  })
                }}  />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'目标组织ID'}
                {...formItemLayout}
              >
                 <Input  value={this.state.data.DstOrgId} onChange={(e)=>{
                    const data={...this.state.data};
                   data.DstOrgId=e.target.value;
                    this.setState({
                      data,
                    })
                 }} />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label={'语法类型'}
                {...formItemLayout}
              >
                <Select  value={this.state.data.SqlType?this.state.data.SqlType.toString():'0'} onChange={(e)=>{
                  const data={...this.state.data};
                  data.SqlType=e;
                  this.setState({
                    data,
                  })
                }} >
                  <Option value="0">更新和插入</Option>
                  <Option value="1">仅更新</Option>
                  <Option value="2">仅插入</Option>
                </Select>
              </Form.Item>
            </Col>

          </Row>

          <Row style={{ marginTop: '20px' }}>
            <Col style={{ textAlign: 'right' }}>
              <Button type={'primary'} icon={'eye'} onClick={this.getSqlsByFormId} >查询</Button>
            </Col>
          </Row>
          <Row style={{ marginTop: '20px' }}>
            <Col span={24}>
              <Form.Item>
                <TextArea rows={10} style={{ width : "100%"}} value={this.state.sqls} disabled={true} />
              </Form.Item>
            </Col>
          </Row>

        </Form>
      </div>
    );
  }

}

EntitySqlPage.propTypes = {
};

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