import React, { PureComponent } from 'react';
import { connect } from 'umi';
import { Modal, Tooltip, Input, Button } from 'antd';

import './index.less';
import style from "@/global.less";

import StandardTable from '@/components/StandardTable';
import { AX } from '@/utils/pr_new_datadictionary';
import { initTreeSelect } from '@/utils/globalCommon'

@connect(({ baseinfodata, loading }) => ({
  baseinfodata,
  loading: loading.models.baseinfodata,
}))

class A01UserTable extends PureComponent {


  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      selectedRows: [],
      selectedRowKeys: [],
      formValues: '',
    };
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (undefined != nextProps.visible) {
      this.setState({ visible: nextProps.visible });
      if(!nextProps.visible) {
        this.setState({ selectedRows: [], formValues: '', selectedRowKeys: [] });
      }
    }
    // if (undefined != nextProps.value) {
    //   this.setState({ selectedRowKeys: nextProps.value. });
    // }
  }

  columns = [
    {
      title: '姓名',
      dataIndex: 'za0101',
      key: 'za0101',
      width: 80,
      fixed: 'left',
    },
    {
      title: '性别',
      dataIndex: 'aa0107',
      key: 'aa0107',
      render: val => {
        const list = AX || [];
        if (val) {
          return (
            <Tooltip title={initTreeSelect(list, val)}>
              <span className={style.nowrapper} style={{ width: '150px' }}>
                {initTreeSelect(list, val)}</span>
            </Tooltip>
          )
        }
      }
    },
  ]

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'baseinfodata/query_page_for_aa01',
    });
  }

  handleModalVisible() {
    const { getChildrenMsg } = this.props;
    const { selectedRows } = this.state;
    if (getChildrenMsg && selectedRows[0]) {
      getChildrenMsg(false, selectedRows[0]);
    } else {
      getChildrenMsg(false);
    }
  }

  handleSelectRows = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys: selectedRowKeys,
      selectedRows: selectedRows,
    });
  };

  handleStandardTableChange = (pagination, filtersArg, sorter) => {

    const { dispatch } = this.props;
    const { formValues } = this.state;

    const params = {
      currentPage: pagination.current,
      pageSize: pagination.pageSize,
      id: formValues || undefined,
    };

    if (sorter.field) {
      params.sorter = `${sorter.field}_${sorter.order}`;
    }

    dispatch({
      type: 'baseinfodata/query_page_for_aa01',
      payload: params,
    });
  };

  handleChangeSearch(e) {
    this.setState({ formValues: e.target.value })
  }

  handleSearch() {
    const { formValues } = this.state;
    const params = { id: formValues }
    dispatch({
      type: 'baseinfodata/query_page_for_aa01',
      payload: params,
    });
  }
  render() {
    const {
      baseinfodata: { data },
      loading,
    } = this.props;
    const { visible, selectedRows, selectedRowKeys } = this.state;
    return (
      <div className='a01-user-table'>
        <Modal
          title="用户列表"
          width={300}
          height={500}
          bodyStyle={{ padding: '20px', maxHeight: '500px', overflowY: 'auto' }}
          open={visible}
          onOk={() => this.handleModalVisible(false)}
          onCancel={() => this.handleModalVisible(false)}
        >
          <div style={{ marginBottom: '6px', display: 'flex' }}>
            <Input onChange={(e) => this.handleChangeSearch(e)} placeholder="" style={{ width: '100%' }} />
            <Button type="primary" onClick={this.handleSearch}>搜索</Button>
          </div>
          <StandardTable
            rowKey={"id"}
            selectedRows={selectedRows}
            loading={loading}
            data={data}
            columns={this.columns}
            // onSelectRow={this.handleSelectRows}
            onChange={this.handleStandardTableChange}
            rowSelection={{ type: 'radio', selectedRowKeys: selectedRowKeys, onChange: this.handleSelectRows }}
          />
        </Modal>
      </div>
    );
  }
}

export default A01UserTable;
