import { connect } from 'dva';
import { Button, Row, Col, Form, Radio, Tabs, Table, Collapse } from 'antd';
import { extendRule, initFilter, extendInclude, guid,getDataFieldValue } from "../../../utils/common";
import EditComponent from '../../../baseComponents/EditComponent'; 
import Editor  from 'react-umeditor';
import styles from '../../../baseComponents/Component.css'; 

const Panel = Collapse.Panel;
const TabPane = Tabs.TabPane;

class ProcessDetailEditByConfigPage extends EditComponent {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
    };
  };  

  componentDidMount(){
    super.componentDidMount();
    if(this.props.getStateData){
      this.props.getStateData(()=>{
        if(this.state.data){
          return JSON.parse(JSON.stringify(this.state.data));
        }
        return {};
      })
    }
    if(this.props.setStateData){
      this.props.setStateData((data)=>{
        this.setState({
          data
        },()=>{
          this.setProcessDetailVisiable();
          if(this.state.data&&!this.state.data.isAdd){
            this.valiField();
          }
        });
      });
    }
  }

  onGetEntityData(allColumns, navFields){
    //super.onGetEntityData();
    if(this.state.data&&!this.state.data.isAdd){
      this.valiField();
    }
    this.setProcessDetailVisiable();
  }

  onRenderHeadControl(params){
    const { colConfig, record }=params?params:{};
    if(colConfig.field==='REMARK'){
      return <Editor ref="editor"  icons={ [" undo redo |  underline | ","forecolor backcolor "]}
                      value={getDataFieldValue(record,colConfig.field)}
                      onChange={(e)=>{
                        if(e===null||e===undefined)return;
                        const value=e.target&&e.target.value?e.target.value:(typeof e ==='object'?null:e);
                        this.saveHeadRecord({
                          [colConfig.field]:value,
                          isAdd:false,
                        });
                      }}/>
    }
    return super.onRenderHeadControl(params);
  }
  onAfterHeadControlChange(params){
    super.onAfterHeadControlChange(params);
    this.setProcessDetailVisiable(); 
  }
  onAfterHeadDropDownSelect(params){
    super.onAfterHeadDropDownSelect(params);
    const { colConfig } = params ? params : {}; 
    if (colConfig && colConfig.field==='Nav_Procedure.NAME') { 
      this.saveHeadRecord({ 
        isAdd:false,
      });
    }
  }

  valiField=()=>{ 
    const { form } = this.props;
    if (form) {
      const headColumnConfig = this.getEditConfig();
      const cols = headColumnConfig ? headColumnConfig.columns : [];
      if(cols&&cols.length){
          cols.forEach(t=>{
            form.validateFields([t.field], { force: true });
          });
      } 
    } 
  }

  setProcessDetailVisiable=()=>{ 
      const data =this.state.data; 
      const type=getDataFieldValue(data,'PROCEDURE_TYPE',0);
      const isPqc= getDataFieldValue(data,'IS_PQC',false);
      const autoInspec=getDataFieldValue(data,'PQC_AUTO_INSPEC',false);
      const isProType=getDataFieldValue(data,'PRO_TYPE',0);
      const vs={};
      vs['PQC_TYPE']=isPqc;
      vs['Nav_PQCWorkStage.NAME']=isPqc;
      vs['PQC_AUTO_INSPEC']=isPqc;
      vs['PQC_INSPEC_TYPE']=(isPqc&&autoInspec);
      vs['PQC_INSPEC_QTY']=(isPqc&&autoInspec);
      vs['PQC_INSPEC_QTY_OVER']=(isPqc&&autoInspec);
      vs['ORDER_FIELD']=type===1;
      vs['PRO_TYPE']=type===0;
      vs['TIME_UNIT']=type===0;
      vs['CONVERT_RATIO']=type===0;
      vs['CONVERT_RATIO_NUMERATOR']=type===0;
      vs['CONVERT_RATIO_DENOMINATOR']=type===0;
      vs['IS_SPIT_PROCEDURE']=type===0;
      vs['IS_COMPOSE_PROCEDURE']=type===0;
      vs['IS_AUTO_BOOKING']=type===0;
      vs['IS_CAN_SN_REWORK']=type===0;
      vs['STANDARD_TIME']=type===0;
      vs['IS_PQC']=type===0;
      vs['BOOK_BAD']=type===0&&isProType!==0;
      this.setHeadFieldVisible(vs); 
  }

  render() {
    const editConfig = this.getEditConfig();
    const btns = editConfig ? editConfig.btns : null;
    const renderSubTable = () => {
      const detailEditCodes = editConfig ? editConfig.detailEditCodes : null;
      if (detailEditCodes && detailEditCodes.length) {
        if (detailEditCodes.length === 1) {
          return detailEditCodes.map(item => {
            return <div style={{ marginBottom: '15px' }}>
              {
                this.getRenderEditTable({ editCode: item })
              }
            </div>
          });
        }
        else {
          const firstConfig = this.getEditConfig({ editCode: editConfig.detailEditCodes[0] });
          return <div style={{ marginBottom: '15px' }}>
            <Tabs defaultActiveKey={firstConfig ? firstConfig.id : null}>
              {
                editConfig.detailEditCodes.map(item => {
                  const config = this.getEditConfig({ editCode: item });
                  return <TabPane tab={config.label} key={config.id}>
                    {
                      this.getRenderEditTable({ editCode: config.editCode })
                    }
                  </TabPane>
                })
              }
            </Tabs>
          </div>
        }
      }
    };
    return (
      <div className={styles.editWrap}> 
        <Form className={styles.formBox}>
          <Row className={styles.controlBlock}>
            {this.onRenderHeadControls(null, true)}
          </Row>
          {this.onRenderPanel()}
          {
            renderSubTable()
          }
        </Form>
      </div>
    );
  }
  
} 
export default Form.create()(ProcessDetailEditByConfigPage);
