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";
import EditBaseComponent from "../../../baseComponents/EditBaseComponent/index.js";

const FormItem = Form.Item;
const Option = Select.Option;
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
class ExecuteSqlPage extends EditBaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      btns:[],
      title:'流程审核',
      historyData:[],
      remark:'',
    };
  };
 
  getSqlsByFormId=()=>{
    if(!this.state.excuteSql) {
      message.error('请输入执行语法');
      return;
    }  
    var json=initFilter(this.props.login.OrgId,this.state.excuteSql); 
    this.props.dispatch({
      type: 'PFForm/excuteSqlAndGetResult',
      payload: json,
      onComplete: (ret) => {
        this.setState({
          excuteResult: ret
        })
      }
    });
  }

  renderExcuteSql=()=>{
    if(this.state.excuteResult&&this.state.excuteResult.Tables&&
      this.state.excuteResult.Tables.length){
        return <Tabs defaultActiveKey="1">
        {
          this.state.excuteResult.Tables.map(t=>{
            const columns=[];
            if(t.Columns&&t.Columns.length){
              t.Columns.forEach(col => { 
                columns.push({
                    title: col.Label,
                    key: col.ID,
                    dataIndex: '', 
                    render: (text, record) => {
                       if(record.Datas){
                         const rowColumn= record.Datas.filter(t1=>t1.ColumnId===col.ID)[0];
                         if(rowColumn){
                           return rowColumn.Value;
                         }
                       }
                       return null;
                    }
                  });
                
              });
            }
            
            return <TabPane tab={t.Label} key={t.Index}>
            <Table
              rowKey="ID"
              pagination={false}
              dataSource={t.Rows}
              columns={columns}
              scroll={{ x: true }}
              bordered   
            />
  
          </TabPane> 
          })
        }
        
      </Tabs>
    }
  }

  render() {

    return (
      <div> 
        <Form>
            <Row style={{ marginTop: '20px' }}>
            <Col span={24}>
              <Form.Item>
                <TextArea rows={10} style={{ width : "100%"}} value={this.state.excuteSql}
                placeholder={'【重要提示】\n每条语法必须使用;号作为结束符\n 每条语法独立执行'}
                onChange={e=>{
                   let tmpValue = (e && e.target && e.target.value ? e.target.value : (typeof e === 'object' ? null : e));
                    this.setState({
                      excuteSql:tmpValue
                    });
                }} />
              </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' }}>
             {
               this.renderExcuteSql()
             }
          </Row>

        </Form>
      </div>
    );
  } 
} 
export default connect(({ login, loading,custom }) => ({ login, loading,custom }))(Form.create()(ExecuteSqlPage));