/*
 * Creater:     shizi
 * CreateDate:  2022/05/26
 * Describe：   检验项列表
 * */
import React, { Component } from 'react';
import { Modal, Input, Button, Checkbox } from 'antd';
import { Util } from 'tools';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';

class InspectionItemList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      alias: undefined, // 代码/描述
      columns: [],
      tableData: [],
      totalwidth: 950,
      total: 0,
      page: 1,
      pageSize: 20,
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
      isShow: true
    };
    this.staticColumns = [{
      title: '检验项代码',
      dataIndex: 'lisItemCode',
      width: '100px',
      align: 'center',
    }, {
      title: '检验项名称',
      dataIndex: 'lisItemDesc',
      width: '250px',
      align: 'center',
    }, {
      title: '标本',
      dataIndex: 'specimenDesc',
      width: '100px',
      align: 'center',
    }, {
      title: '容器',
      dataIndex: 'containerDesc',
      width: '100px',
      align: 'center',
    }, {
      title: '是否默认',
      dataIndex: 'isDefault',
      width: '100px',
      align: 'center',
    }, {
      title: '生效日期',
      dataIndex: 'startDate',
      width: '100px',
      align: 'center',
    }, {
      title: '失效日期',
      dataIndex: 'endDate',
      width: '100px',
      align: 'center',
    }, {
      title: '状态',
      dataIndex: 'statusDesc',
      width: '100px',
      align: 'center',
    }]
  }

  componentDidMount() {
    this.props.onRef && this.props.onRef(this);
    this.getTableData();
  }

  // 关闭弹窗
  modifyVisible = (visible) => {
    this.setState({ visible })
  }

  // 关闭弹窗
  handleCancel = () => {
    this.modifyVisible(false);
  }

  // 确认
  handleConfirm = () => {
    let { selectedRows } = this.state;
    this.props.handleAdd && this.props.handleAdd(selectedRows);
    this.modifyVisible(false);
    this.setState({ selectedRowKeys: [], selectedRows: [] });
  }

  // 查询
  handleQuery = () => {
    this.setState({ page: 1 }, () => {
      this.getTableData();
    })
  }

  // 提供修改page和pageSize的回调函数
  compilePage = (page, pageSize) => {
    // 修改page，或者pageSize
    this.setState({ page: page, pageSize: pageSize }, () => {
      // 重新调用查询方法
      this.getTableData();
    })
  }

  // 请求列表数据
  getTableData = async (id) => {
    this.setState({ loading: true });
    try {
      let { alias, pageSize, page, isShow } = this.state;
      let data = {
        params: [{
          alias,
          status: isShow ? 'Y' : 'N'
        }],
        pagination: [{
          pageSize,
          currentPage: page
        }]
      }
      let res = await React.$asyncPost(this, '02020388', data);
      let tableData = res.result && 'rows' in res.result ? Util.addKeyValueToDataSource(res.result.rows) : [];
      this.setState({ tableData, total: res.result.total, loading: false });
    } catch (error) {
      this.setState({ tableData: [], total: 0, loading: false })
    }
  }

  handleRowSelectionChange = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRowKeys,
      selectedRows
    })
  }

  // 仅显示生效
  handleCheckboxChange = e => {
    this.setState({ isShow: e.target.checked })
  }

  render() {
    let { visible, alias, columns, tableData, totalwidth, total, page, loading, selectedRowKeys, selectedRows, isShow } = this.state;

    // 组件所需参数
    const param = {
      // 表头配置
      columns: columns && columns.length > 0 ? columns : this.staticColumns,
      // 表格数据
      data: tableData,
      // 数据总条数
      total,
      // 当前页数
      page,
      pageSize: '20',
      loading,
      // 表格的宽度
      x: totalwidth,
      y: 544,
      height: '600px',
      isRowSelection: true,
    }

    // 选择行操作
    let rowSelection = {
      selectedRowKeys,
      selectedRows,
      onChange: this.handleRowSelectionChange,
    };
    return (
      <Modal
        title="添加检验项目"
        visible={visible}
        onCancel={this.handleCancel}
        destroyOnClose={true}
        width="80vw"
        onOk={this.handleConfirm}
        okText="确认添加"
        okButtonProps={{
          disabled: selectedRowKeys && selectedRowKeys.length > 0 ? false : true
        }}
      >
        <div className='table-body-height'>
          <div style={{ marginBottom: '12px' }}>
            代码/描述：
            <Input
              style={{ width: '300px', marginRight: '12px' }}
              placeholder="输入检验项代码或名称搜索"
              value={alias}
              onChange={Util.commonInputChange.bind(this, 'alias')}
              onPressEnter={this.handleQuery}
            />
            <Checkbox
              onChange={this.handleCheckboxChange}
              checked={isShow}
              style={{ marginRight: '12px' }}
            >仅显示生效</Checkbox>
            <Button onClick={this.handleQuery}>查询</Button>
          </div>
          <PubilcTablePagination
            param={param}
            compilePage={this.compilePage}
            rowSelectionPublic={rowSelection}
          />
        </div>
      </Modal>
    )
  }
};

export default InspectionItemList;