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

//计划排产
class CapacityLoad 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, 100, "CODE", 0);
    if (rules) {
      addRuleAndGroups(json,rules);
    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url:'BR/PdtPlanBoard/DayCapacityLoad',
      payload: json,
      onComplete: (ret) => {

        if (ret) {
          let tableCol = [];
          let tabledata = [];
          //1.构造table 的column，width，height
          ret.Field.forEach((n, i) => {
            let colfiled=ret.Keys[i];
            let col = {
              title: n,
              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;
                return i == 0 ? text : <Progress percent={text*100}/>;
              }
            }
            tableCol.push(col);

          });
          //console.log(tableCol);
          //2.构造data
          ret.Workstage.forEach((x, z) => {
            let data = {};
            ret.Keys.forEach((y,j) => {
              if (j == 0) {
                data[y] = x;
              } else {
                //console.log(y);
                // console.log(ret.Data[z]);
                data[y] = ret.Data[j-1][z];
                //console.log(data);
              }
            });
            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>
            </Col>
            </div>
          </Row>

        </div>
      </div>)
  }
}

CapacityLoad.propTypes = {
};

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