import React from 'react'
import { Form,  Col,Modal,Button,Popconfirm } from 'antd'
import {
  empty,
  extendInclude,
  extendRule,
  getDataFieldValue, getOnlyPropertyData,
  guid,
  initFilter,
  extendOrder,
} from '../../../utils/common';
import styles from "../Common/PageConfig.css";
import TableBaseComponent from "../../../baseComponents/TableBaseComponent";
import PageConfigEditComponent from './PageConfigEditComponent';
import DeleteConfirmPage from '../Common/DeleteConfirmPage';

const ButtonGroup = Button.Group;
class PageConfigShowBaseComponent extends TableBaseComponent{
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      tableConfig:{

      }
    }
  };
  componentDidMount(){
    super.componentDidMount();
  };

  componentWillReceiveProps(NextProps) {
    super.componentWillReceiveProps(NextProps);
  }

  onAfterLoadData(){
    this.onAfterGetTableConfig();
  }

  handleEditOk=()=>{
    this.loadTableData();
  };
  handleShowModal = () => {
    this.loadTableData();
    this.setState({
      visible: true
    });
  };
  handleCloseModal = () => {
    this.setState({
      visible: false
    });
  };
  onAfterGetTableConfig(){
    // const tableConfig=this.getTableConfig();
    // if(!tableConfig)return;
    // const columns= tableConfig?tableConfig.columns:null;
    // if(columns&&columns.length){
    //   columns.push({
    //     label: '操作', field: '', format: ({record}) => {
    //       return this.getRowBtns({record});
    //     },
    //   });
    // }
    // this.setTableConfig({
    //   tableConfig,
    // });
  }

  onTableBtnParam(params){
    const {btnConfig,tableConfig,record,tableCode}=params?params:{};
    const {btnType,clickEventFunName,btn,btnCustomParams}=btnConfig?btnConfig:{};
    if(btnConfig.code==='edit') {
      return {
        content:this.getEditBtn({record,id:record.ID, onSave:this.handleEditOk,editConfig:tableConfig?tableConfig.editConfig:null})
      };
    }
  }


  getHeadBtns=()=>{
    const tableConfig=this.getTableConfig();
    return <>
      {
        this.getEditBtn({onSave:this.handleEditOk,editConfig:tableConfig?tableConfig.editConfig:null})
      }
      {
        this.getHeadOtherBtns()
      }
      </>
  };
  getHeadOtherBtns(){

  }

  getRowBtns=({record})=>{
    const tableConfig=this.getTableConfig();
    return <ButtonGroup>
      {
        this.getEditBtn({record,id:record.ID, onSave:this.handleEditOk,editConfig:tableConfig?tableConfig.editConfig:null})
      }
      <Popconfirm title="是否确定删除?"  onConfirm={() => this.onDeleteRecord(record)}>
        <Button type="danger" icon="delete"  >删除</Button>
      </Popconfirm>
      {
        this.getRowOtherBtns({
          record
        })
      }
      </ButtonGroup>
  };
   onDeleteRecord = (record) => {
     const tableConfig=this.getTableConfig();
    if(tableConfig&&tableConfig.deleteApi) {
      this.props.dispatch({
        type: 'app/getDataByGet',
        payload: {'id': record.ID},
        url: tableConfig.deleteApi,
        onComplete: (ret) => {
          if (ret) {
            this.loadTableData();
          }
        }
      });
    }
  };


  getRowOtherBtns({record}) {

  }


  getEditBtn({record,id,onSave,editConfig}) {
    return <PageConfigEditComponent id={id} onSave={onSave} editConfig={editConfig}>
      {
        record ? <Button type="primary" icon="edit"  size={'small'} title={'编辑'} />: <Button className={styles.addBtn} type={'primary'} icon={'plus'}>添加</Button>}
    </PageConfigEditComponent>
  }

  onAfterRowControlBlur(params){
    const {colConfig,record}=params;
    if(colConfig.controlType===1||colConfig.controlType==6||colConfig.controlType==7){
      this.doSaveRecord(record.ID);
    }
  }
  onAfterRowControlChange(params){
    const {colConfig,record}=params;
    if(colConfig.controlType===2||colConfig.controlType==3||colConfig.controlType==4||colConfig.controlType==5||colConfig.controlType==8){
      this.doSaveRecord(record.ID);
    }
  }

  onAfterRowDropDownSelect(params){
    const {data}=params;
    if(data){
      this.doSaveRecord(data.ID);
    }
  }

  onLoadTableDataParam(params){
    const {loadParam}=params;
    extendOrder(loadParam,'ID',0);
  }


  doSaveRecord=(id)=>{
    const tableData= this.getTableData();
    const tableConfig=this.getTableConfig();
    const data=tableData&&tableData.Data?[...tableData.Data]:[];
    const saveApi=tableConfig&&tableConfig.editConfig?tableConfig.editConfig.saveApi:null;
    if(data&&data.length&&saveApi&&id) {
      data.forEach(t => {
        if (t.ID === id) {
          const tmpJson = getOnlyPropertyData(t);
          this.props.dispatch({
            type: 'app/getDataByPost',
            payload: tmpJson,
            url: saveApi,
            onComplete: (ret) => {
              if (ret) {
                this.loadTableData();
              }
            }
          });
        }
      });
    }
  };



  render() {

    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'} >
          {this.getHeadBtns()}
          {this.getRenderTable()}
        </Modal>
      </div>
    )
  }
}

export default PageConfigShowBaseComponent;
