import React from 'react'
import { Form,  Col,Modal,Button,Row } from 'antd'
import {
  empty,
  extendInclude,
  extendRule,
  getDataFieldValue,
  guid,
  initFilter,
  extendOrder,
} from '../../../utils/common'
import {getOnlyPropertyData} from "../../../utils/common";
import EditBaseComponent from "../../../baseComponents/EditBaseComponent";

class PageConfigEditBaseComponent extends EditBaseComponent{
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      tableConfig:{
        columns:[]
      }
    }
  };
  componentDidMount(){
    super.componentDidMount();
  };

  componentWillReceiveProps(NextProps) {
    super.componentWillReceiveProps(NextProps);
  }
  handleShowModal=()=>{
    //this.onLoadData();
    const columns = this.props.editConfig?this.props.editConfig.columns:[];
    const saveApi=this.props.editConfig?this.props.editConfig.saveApi:'';
    this.setEditConfig({
      editConfig: {
        columns,
        saveApi
      },
      onComplete: () => {
        this.doLoadData()
      }
    });
    this.setState({
      visible: true,
      btnLoading:false,
    });
  };
  handleCloseModal=()=>{
    this.setState({
      visible: false
    });
  };

  /*
    editConfig:{
    columns,
    getApi,includes,data,
    onVisible onChange onFilter,
    saveApi,
    }
    id
    onSave
   */
  onLoadData() {
    // const columns = this.props.editConfig?this.props.editConfig.columns:[];
    // this.setEditConfig({
    //   editConfig: {
    //     columns
    //   },
    //   onComplete: () => {
    //     this.doLoadData()
    //   }
    // });
  }

  doLoadData=()=>{
    const {getApi,includes,data,sorts}=this.props.editConfig?this.props.editConfig:{};
    if(this.props.id&&getApi) {
      const json = initFilter(this.props.login.OrgId);
      extendRule(json, 'ID', 1, this.props.id);
      if (includes && includes.length) {
        includes.forEach(t => {
          extendInclude(json, t);
        });
      }
      if(sorts&&sorts.length){
        sorts.forEach(t=>{
          extendOrder(json,t.sort,t.order);
        });
      }
      this.props.dispatch({
        type: 'app/getDataByPost',
        payload: json,
        url: getApi,
        onComplete: (ret) => {
          this.setState({
            data: ret,
          }, () => {
            this.setColumnVisible();
          });
        }
      });

    }
    else {
      if (data) {
        this.setState({
          data: data
        }, () => {
          this.setColumnVisible();
        });
      }
      else {
        this.setState({
          data: {
            ORG_ID: this.props.login.OrgId,
          }
        }, () => {
          this.setColumnVisible();
        });
      }
    }
  };


  setColumnVisible=()=> {
    const {onVisible}=this.props.editConfig?this.props.editConfig:{};
    if(typeof onVisible==="function"){
      const visible=onVisible(this.state.data);
      this.setHeadFieldVisible(visible);
    }
  };

  onAfterHeadControlChange(params){
    const {field,value,thisRef}=params;
    const {onChange}=thisRef.props.editConfig?thisRef.props.editConfig:{};
    if(typeof onChange==="function"){
      onChange({field,value,onSave:(data)=>{thisRef.saveHeadRecord(data);},onSetVisible:thisRef.setColumnVisible});
    }

  }

  onHeadDropDownFilter(params) {
    const {thisRef}=params;
    const {onFilter}=thisRef.props.editConfig?thisRef.props.editConfig:{};
    if(typeof onFilter==="function"){
      onFilter({...params});
    }
  }
  onCheckBeforeSave(){
    const {onCheckBeforeSave} = this.props;
    if (typeof onCheckBeforeSave === 'function') {
      return onCheckBeforeSave(this.state.data)
    }
  }
  onAfterSave(params){
    const {onSave} = this.props;
    if (typeof onSave === 'function') {
      onSave()
    }
    this.handleCloseModal();
  }

  render() {
    const {promptInfo}=this.props.editConfig?this.props.editConfig:{};
    const headColumnConfig=this.getEditConfig();
    const columns= headColumnConfig?headColumnConfig.columns:[];
    return (
      <div className='btn_margin' style={{ display: "inline-block" }}>
        <span onClick={this.handleShowModal}>{this.props.children}</span>
        <Modal visible={this.state.visible}  centered={true} maskClosable={false} onCancel={this.handleCloseModal} footer={false} width={"98%"} className={'customConfigModal'} >
          <Form>
            <Row>
              {
                this.createControls(columns,this.state.data)
              }

              <Col span={24}>
                {
                  promptInfo
                }
              </Col>
            </Row>

            <Row>
              <Col style={{ textAlign: 'right'}}>
                <Button type="primary" onClick={()=>{this.save()}} icon={'save'} loading={this.state.btnLoading}>保存</Button>
              </Col>
            </Row>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default PageConfigEditBaseComponent;
