/*
 * @Author: your name
 * @Date: 2021-05-14 09:15:39
 * @LastEditTime: 2021-05-17 11:39:36
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /react-antd-admin-template/src/views/checkItemManage/checkItemResultSelector/table.js
 */



/*
 * @Author: your name
 * @Date: 2021-04-27 11:19:40
 * @LastEditTime: 2021-04-30 15:45:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /react-antd-admin-template/src/views/groupManage/groupIdentity/table.js
 */

import React from 'react';
import { Table,Popconfirm, Form,Divider} from 'antd';

// const data = [];
// for (let i = 0; i < 100; i++) {
//   data.push({
//     key: i.toString(),
//     name: `Edrward ${i}`,
//     age: 32,
//     address: `London Park no. ${i}`,
//   });
// }


class EditableTable extends React.Component {
  
//   static defaultProps = {
//         editCallback: ()=>{},
//         deleteCallback:()=>{},
//         callbackFromChild:()=>{},
//         config:{
//             action:{
//                 deleteBtn:true,
//                 editBtn:true,  
//                 editPermissionBtn:false
//             }
//         } 
//   }

  constructor(props) {
    super(props);
    this.state = { data:[], editingKey: '',loading:false};

    this.columns = [

      ...props.columns,
      {
        title: '操作',
        fixed: 'right',
        dataIndex: 'operation',
        render: (text, record) => {
          const { editingKey} = this.state;
        //   console.log({editingKey,record});
          return (
            <span>
                 <a disabled={editingKey !== ''} onClick={() => this.editItem(record)}>
                        编辑
                 </a>
                 <Divider type="vertical" />
                 <Popconfirm title=" 是否确定删除?" onConfirm={()=>this.delItem(record)}>
                    <a disabled={editingKey !== ''} >
                            删除
                    </a>
                 </Popconfirm>
                 {/* <Divider type="vertical" />
                 <a disabled={editingKey !== ''} onClick={() => this.bindGroup(record)}>
                        绑定单位
                 </a> */}
             </span>
 
          );
        },
      },
    ];
  }



  componentDidMount(){
    this.setState({
        data:this.props.data
    });
    
  }

  componentDidUpdate(prevProps, prevState){
    // console.log({prevProps, prevState});
    if(prevProps.ifUpdateList){
        console.log('update');
        this.setState({
            data:this.props.data
        });
    }
  }

  isEditing = record => {
    //   console.log(record.id,this.state.editingKey);
      return record.id === this.state.editingKey;
  }
  
  editItem=(record)=>{
      this.props.callbackFromChild(record);
  }

  delItem=record=>{
      this.props.deleteCallback(record);
  }

  changePage(current){
    this.setState({ loading: true });
    this.props.paginationCallback({'currPage':current})
  }


  render() {
    
    const columns = this.columns.map(col => {
      if (!col.editable) {
        return col;
      }
      return {
        ...col,
        onCell: record => ({
          record,
        }),
      };
    });

    const {
        currPage,
        totalPage,
        totalCount,
    } = this.props.pages;

    const paginationProps = {
        showSizeChanger: false,
        showQuickJumper: false,
        showTotal: () => `共${totalCount}条`,
        pageSize: 10,
        current: currPage,
        total: totalCount,
        onChange: (current) => this.changePage(current),
    }

    return (
        <Table
          bordered
          loading={this.state.loading}
          pagination={paginationProps}
          dataSource={this.state.data}
          columns={columns}
          rowClassName="editable-row"
          scroll={{ x: 1500 }}
        />
    );
  }
}

const EditableFormTable = Form.create()(EditableTable);


export default EditableFormTable;