import React from 'react';
import { connect } from 'dva';
import { Button, Row, Col, Form, Input,Select,Checkbox,Modal,Transfer,Spin ,Table,Tabs,message} from 'antd';
import {
  extend,
  extendRule,
  initFilter,
  initQueryFilter,
  getOnlyPropertyData,
  extendInclude,
  guid
} from "../../../utils/common";
import QRCode from 'qrcode';
import styles from './orderFlowCardPage.css'

import ReactToPrint from "react-to-print";

const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;
const TabPane = Tabs.TabPane;


class ProcessPrintPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      columns:[],
    };
    this.canvas={};
  };

  getColumns=(pdtCode,emType)=>{
    return [
      {title: <div className={styles.theadTitle}>
          <div style={{ position: "relative" }}>
            <span style={{ position: "absolute", top: "50%", marginTop: "-15px", left: "10px", padding: "2px 4px", color: '#fff', background: "#222" }}> {emType}</span>
            <div>厦门铭鹤({pdtCode})</div>
          </div>
        </div>,dataIndex: 'Num',colSpan: 9,render: (text, record, index)=>{
          if(record.IsSpan&&text){
            return {
              children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan:1
              },
            }
          }
          return <div><span dangerouslySetInnerHTML={{__html: text}}/></div>;
        }},
      {title: '',dataIndex: 'ProcedureName',colSpan:0,render: (text, record, index)=>{
          if(record.IsSpan){
            return {
              children: <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan:(record.Type==3||record.Type==4||record.Type==2?8:1)
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'ProcedureDesc',colSpan:0,render: (text, record, index) => {
          if(record.IsSpan){
            return {
              children: <div style={{width:'240px'}}><span  dangerouslySetInnerHTML={{__html: text}}/></div>,
              props: {
                colSpan: (record.Type==3||record.Type==4||record.Type==2?0:1)
              },
            }
          }
          if(text) {
           // const dataAt = text.replace(/(\r\n)|(\n)/g, '<br>');
           // const dataAt2 = dataAt.replace(/\s/g, '&nbsp;');
            return <div style={{width:'240px'}}><span dangerouslySetInnerHTML={{__html: text}}/></div>;
          }
          return <div style={{width:'240px'}}/>
        }},
      {title: '',dataIndex: 'PrintTime',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            return {
              children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan: (record.Type==3||record.Type==4||record.Type==2?0:(record.Type==99?2:1))
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'PrintDate',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            return {
              children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan: (record.Type==3||record.Type==4||record.Type==2?0:1)
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'PrintQty',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            return {
              children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan:(record.Type==3||record.Type==4||record.Type==2?0:(record.Type==99?3:2))
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'Sign1',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            return {
              children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
              props: {
                colSpan: record.Type==5?1:0
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'Sign2',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            if(index==0) {
              return {
                children: <div id={(this.props.id+ (this.props.qccodeKey?this.props.qccodeKey:'qccode')+pdtCode)}></div>,
                props: {
                  colSpan: 2,
                  rowSpan:4
                },
              }
            }
            else {
              return {
                children:  <span dangerouslySetInnerHTML={{__html: text}}/>,
                props: {
                  colSpan: record.Type==5?1:0,
                  rowSpan:(record.Type==3||record.Type==4||record.Type==2?0:1)
                },
              }
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
      {title: '',dataIndex: 'PrintRemark',colSpan:0,render: (text, record, index)=> {
          if (record.IsSpan) {
            return {
              props: {
                colSpan: 0
              },
            }
          }
          return <span dangerouslySetInnerHTML={{__html: text}}/>;
        }},
    ];
  }

  updateData=(data)=>{
    const that=this;
    if(that.canvas) {
      Object.keys(that.canvas).forEach((n) => {
        if(n) {
          const container = document.getElementById(n);
          if (container&&that.canvas[n]) {
            try {
              container.removeChild(that.canvas[n]);
            }
            catch(e) { }
          }
        }
      });
      that.canvas = {};
    }

    this.setState({
      data:data,
    },()=>{
      if(data&&data.length){
        data.forEach((n,i)=>{
          QRCode.toCanvas(n.PdtCode, { errorCorrectionLevel: 'H' }, function (err, canvas) {
            if (err) throw err;
            const key=(that.props.id+ (that.props.qccodeKey?that.props.qccodeKey:'qccode')+n.PdtCode);
            var container = document.getElementById(key);
            if(container) {
              try {
                container.appendChild(canvas);
              }
              catch (e) { }
              that.canvas[key]=canvas;
            }
          });

        });
      }
    });
  }

  getPrintTable=()=>{
    let index=0;
    if(this.state.data&&this.state.data.length){
      return this.state.data.map(t=>{
        const columns = this.getColumns(t.PdtCode,t.EmType,t.TotalFeedQty,t.Index,t.FeedQty);
        const data=t.Nav_Details;
        const tmps=[];
        if(data&& data.length&&index!=this.state.data.length-1) {
          let dataRows=0;
          data.forEach((n,i)=>{
            if(n.ProcedureDesc) {
              dataRows += n.ProcedureDesc.split('</div>').length;
            }
            else{
              dataRows++;
            }
          });
          let maxRow=44;
          if(dataRows<=22){
            maxRow=45;
          }
          if(dataRows>=32||index>15){
            maxRow=43;
          }
          for (let i = dataRows; i <= maxRow; i++) {
            tmps.push(0);
          }
        }
        index++;
        return <div className={styles.wrapTablePrint}>
          <Table
            ref={e => this.tableNode = e}
            rowKey="ID"
            bordered
            pagination={false}
            dataSource={data}
            columns={columns}
          />
          {
            // tmps&&tmps.length?tmps.map(t=>{
            //   return <br/>;
            // }):null
          }
        </div>

      });
    }
  }

  render() {
    return(
    <div className={styles.printMod}>
      {
        this.getPrintTable()
      }
    </div>
    )
  }
}

export default ProcessPrintPage;
