import React from 'react';
import { connect } from 'dva';
import {  Row, Col, Table, Form } from 'antd';
import { Search } from '@woowalker/feui'
import {
  initQueryFilter,
  empty,
  addRuleAndGroups
} from "../../../utils/common";
import styles from '../../Table/listPage.css';

//计划排产
class WorkWip extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [],
      tableColumns: [],
    };
  };


  componentDidMount() {
    this.loadData();
  }

  handleSearch=(value,code)=>{
      this.loadData(value);
  }

  loadData = (rules) => {
    const orgId = this.props.login.OrgId;
    let json = initQueryFilter(orgId, 1, 200, "", 0);
    if (rules) {
      addRuleAndGroups(json,rules);
    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url:'WO/PDTOrder/WorkWip',
      payload: json,
      onComplete: (ret) => {
        if (ret) {
          //console.log(ret[0]);
          let tableCol = [];
          let tabledata = [];
          //1.构造table 的column，width，height
          if(ret.length>0 &&  !empty(ret[0].titleName)){
            ret[0].titleName.forEach((n, i) => {
              let colfiled=n.TITLE_KEY;
              let col = {
                  title: n.TITLE_NAME,
                  key: colfiled,
                  dataIndex: colfiled,
                  sorter: (a, b) => i===0?a[colfiled]>b[colfiled]:Number(a[colfiled])-Number(b[colfiled]),
                  render: (text, record, index) => {
                    return text;
                  }
                }
              tableCol.push(col);
            });
          }
          //console.log(tableCol);
          //2.构造data
          ret.forEach((x, z) => {
            let data = {};
            ret[0].titleName.forEach((y,j) => {
                data[y.TITLE_KEY] = ret[z][y.TITLE_KEY];
            });
            tabledata.push(data);
          });
          this.setState({
            //tableData: tabledata,
            tableColumns: tableCol,
          },()=>{
            this.setState({
              tableData: tabledata
            });
          })
        }
      }
    });
  }

  getSearchComponent = (code) => {
    return <Search formId={this.props.formId} onSearch={(value) => this.handleSearch(value, code)} code={code}/>
  };

  render() {
    const paginationConfig = {
      pageSizeOptions: ['5', '10', '20', '50', '100'],
      //current: this.state.loadParamJson.PageIndex,
      pageSize: 10,
      total: this.state.tableData.length,
      showSizeChanger: true,
      size: 'small',
      position:'both',
      showTotal: () => `共 ${this.state.tableData.length} 条`
    };
    return (
      <div>
        <div style={{marginTop: '25px'}}>
          <div>
            {this.getSearchComponent('search')}
          </div>
          {/*<div style={{marginTop: '25px'}}></div>*/}
          <Row>
            <div style={{marginTop: '25px'}}>
            <Col span={24}>
              <div className={styles.tableContent}>
                <Table
                  rowKey="ID"
                  pagination={paginationConfig}
                  dataSource={this.state.tableData?this.state.tableData:[]}
                  columns={this.state.tableColumns}
                  // loading={isLoading}
                  //onChange={this.changeTable}
                  //rowClassName={(record, index) => styles[className(record)] }
                  // rowSelection={this.state.pageTable.SHOW_CHECK ? rowSelection : null}
                  //expandedRowRender={(this.state.hasChildren ? this.subTable : null)}

                  // scroll={{ x: '98%' }}
                  //scroll={{ x: this.state.width,y:this.state.heigth }}
                />
              </div>
              <div>
                当前选中{this.state.tableData.length}条记录，
              </div>
            </Col>
            </div>
          </Row>

        </div>
      </div>)
  }
}

WorkWip.propTypes = {
};

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