import React from 'react';
import { connect } from 'dva';
import {  Row, Col, Form} from 'antd';
import { Search } from '@woowalker/feui'
import {addRuleAndGroups, extendRule, initQueryFilter} from "../../../utils/common";
import createG2 from 'g2-react';
import * as G2 from 'g2';

G2.track(false);

const Pie = createG2(chart => {
  chart.coord().transpose().scale(1, -1);
  chart.interval().position('task*range').color('工序').label('工序', {
    offset: -15,
    textStyle: {
      textAlign: 'center',
      fontSize: 10,
      shadowBlur: 2,
      shadowColor: 'rgba(0, 0, 0, .45)'
    }
  }).style({
    lineWidth: 1,
    stroke: '#fff',
  });
  chart.axis('task', {
    grid: {
      align: 'center'
    },
    tickLine: null,
    label: {
      Offset: 10,
      textStyle: {
        textAlign: 'center' // 设置坐标轴 label 的文本对齐方向
      }
    },
    title:true
  });
  chart.axis('range', {
    // line: {
    //   stroke: '#fff000'
    // },
    title: true,
    //grid:true
  });
//图例
  chart.legend({
    mode: true,
    position: 'bottom', // 图例的显示位置，有 'top','left','right','bottom'四种位置，默认是'right'。
    title: "计划甘特图",
    dy: 1,
  });

  chart.tooltip(true, {
    showTitle: true,
    shared:true,
  });
  chart.render();
});

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


  componentDidMount() {

    this.loadData();
  }

  handleSearch=(value,code)=>{

      this.loadData(value);

  }

  loadData = (rules) => {
    const orgId = this.props.login.OrgId;
    let json = initQueryFilter(orgId, 1, 100, "DUE_TIME", 0);
    extendRule(json, "ORDER_STATUS", 2, 3);
    if (rules) {
      addRuleAndGroups(json,rules);

    }

    this.props.dispatch({
      type: 'app/getDataByPost',
      url:'BR/PdtPlanBoard/OrderPaged',
      payload: json,
      onComplete: (ret) => {
        ret.forEach(function(obj) {
          obj.range = [obj.startTime, obj.endTime];
          obj["工序"] = obj.process;
        });
        //console.log(ret);
        this.setState({
          data: ret
        })
      }
    });

  }

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

  render() {

    return (
      <div>
        <div style={{marginTop: '25px'}}>

          <div>
            {this.getSearchComponent('search')}
          </div>
          {/*<div style={{marginTop: '25px'}}></div>*/}
          <Row>

            <Col span={24}>
              <Pie
                data={this.state.data}
                 //width={window.innerWidth}
                height={window.innerHeight}
                forceFit={true}
                plotCfg={{
                  margin: [80, 80, 50, 80],
                }}
                // plotCfg={this.state.plotCfg}
                ref="myChart"
              />
            </Col>
          </Row>

        </div>
      </div>)
  }
}

PlanGantt.propTypes = {
};

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