// 患者呼叫记录
import React, { Component } from 'react';
import { Row, Col, Input, Select, Button } from 'antd';
import PubilcTablePagination from '../common/PubilcTablePagination.jsx';
import store from 'store';

class PatientCallRecords extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tableData: [], 
      total: 0, 
      page: 1, 
      pageSize: 20,
      loading: false, 
      headerHeight: 0
    };

    this.columns = [{
			title: '序号',
			dataIndex: 'key',
			key: '1',
			width: '50px',
			align: 'center'
		}, {
			title: '模板名称',
			dataIndex: 'descripts',
			key: '2',
			width: '300px',
			align: 'center'
		}, {
			title: '模板版本号',
			dataIndex: 'releaseVersion',
			key: '3',
			width: '100px',
			align: 'center'
		}]
  }

  // 查询
  handleQuery = () => {
    this.setState({page: 1}, () => {
			this.getTableData();
		})
  }
  
  // 请求列表数据
	getTableData = () => {
		this.setState({loading: true});
		let { page, pageSize } = this.state;
		let data = {
			params: [{
        
      }],
			pagination:[{
				pageSize: pageSize,
				currentPage: page,
				sortColumn: "Describe",
				sortOrder: "asc"
			}]
		}
		$http.post('urlS', this, {
			code: "2101",
			data: data,
			success: function (res) { 
				if (+res.errorCode === 0 && res.result) {
          console.log(res)
					this.setState({tableData: res.result.Data, total: res.result.TotalCount, loading: false}, () => {
						// 数据加载成功关闭loading
						this.child.handleLoading()
					})
				} else {
					this.setState({tableData: [], total: 0, loading: false}, () => {
						// 数据加载成功关闭loading
						this.child.handleLoading();
					})
				}
			},
			error: function () {
				this.setState({tableData: [], total: 0, loading: false}, () => {
					// 数据加载成功关闭loading
					this.child.handleLoading();
				})
			}
		})
	}

  // 调用子组件的连接事件
  onRef = (ref) => {
    this.child = ref
  }

  render() {
    let { tableData, total, page, loading, headerHeight } = this.state;
    // 组件所需参数
    const param = {
      // 表头配置
      columns: this.columns,
      // 表格数据
      data: tableData,
      // 数据总条数
      total,
      // 当前页数
      page,
      pageSize: "20",
      // 表格的宽度
      x: 900,
      y: store.getState().tableHeight.y + 114 - headerHeight,
      height: store.getState().tableHeight.y + 158 - headerHeight + 'px',
      loading
    }

    let option = [];
    return (
      <div className="patient-call-records">
        <div className="role-header">
          <Row style={{ minHeight: '64px', padding: '0 24px' }}>
            <Col span={20}>
              角色名称：<Input title="输入内容后可回车检索" placeholder="请输入( Enter )" style={{ width: '150px', margin: '23px 15px 0 0' }} onPressEnter={this.handleQuery} />
              岗位：<Select showSearch optionFilterProp="seatchprop" allowClear style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="请选择岗位">
                {option}
              </Select>
              <Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0', background: 'rgba(255,255,255,1)' }}>查询</Button>
            </Col>
            <Col span={4} style={{ textAlign: 'right' }}>
              {/* <Button icon="plus" onClick={this.handleAdd} style={{ background: 'rgba(247,128,93,1)', color: '#fff', margin: '23px 15px 0 0' }}>新增角色</Button> */}
            </Col>
          </Row>
        </div>
        <div style={{ widht: '100%', height: '10px', background: '#f0f2f5' }}></div>
        <div style={{ padding: "24px 24px 12px 24px" }} className="table-body-height">
          {/* handelThis将夫组件的属性与方法给子组件访问 */}
          <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
        </div>
      </div>
    );
  }
}

export default PatientCallRecords;