//病人信息列表 查看修改日志
import React from 'react';
import { Form, Row, Col, Input, message, Select, Button, Modal, DatePicker, Table, Pagination } from 'antd';
import { $http } from '../../../containers/config/https';
import '../css/error.less';
import moment from 'moment';
import { Util, dayFormat } from 'tools/index';
import RangeDatePicker from 'components/rangePicker/index';
import CommonPagination from 'components/pagination/index';

const FormItem = Form.Item;

const { RangePicker } = DatePicker;

const dateFormat = 'YYYY-MM-DD'

const ModificationLogModal = Form.create()(
  class ModificationLogModal extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        number: '',//登记号/手机号码/证件号码/病人姓名
        total: 0,//表格总数据
        tableData: [],//表格数据
        parms: {},//单行信息
        page: 1,//页数
        pageSize: 10,//显示数
        loading: false,//确定按钮 loading
        visible: false,//查看修改日志弹窗
        rowId: "",//控制行高亮
        checkStaus: false,//是否点击行
        // findInfo:'请输入查询条件',//查询提示信息    
        StartDate: undefined,
        EndDate: undefined,
        patInfo: {},
        search:"",
        size:"small"
      }
    }
    componentDidMount() {
      this.props.OnChildrefs(this);
    }
    handleOk = (e) => {
    }
    showModal = (record) => {
      this.setState({
        visible: true,
        patInfo: record,
        StartDate:undefined,
        EndDate:undefined
      });
      this.getTableData(record)
    }
    handleCancel = () => {
      // this.setState({ visible: false, checkStaus: false, tableData: [], loading: false, rowId: '', total: 0, page: 1, pageSize: 10 ,findInfo:'请输入查询条件'});
      this.setState({ 
        visible: false, 
        StartDate: undefined,
        EndDate: undefined,
        patInfo:{},
        search:""
      })
    }

    //查询
    handleQuery = () => {
      this.setState({ page: 1, pageSize: 10 }, () => {
        let { number } = this.state;
        // this.getTableData();
        this.onShowSizeChange("1",this.state.pageSize)
      })
    }
    // 修改page和pageSize 跳转至---
    onChange = (e, pageSize) => {
      this.setState({ page: e, pageSize: this.state.pageSize }, () => {
        // 重新调用查询方法
        let { number, name } = this.state;
        this.getTableData();
      })
    }
    //下拉选择页数
    onShowSizeChange = (page, pageSize) => {
      this.setState({ page: 1, pageSize: pageSize }, () => {
        // 重新调用查询方法
        let { number, name } = this.state;
        this.getTableData(this.state.patInfo,"search");
      })
    }
    // 显示分页总条数
    showTotal(total) {
      return `共 ${total} 条`;
    }
    //点击Row
    onClickRow = (record) => {
      return {
        onClick: () => {
          this.setState({
            parms: record,
            checkStaus: true
          })
          if (this.state.rowId === "") {
            this.setState({
              rowId: record.id,
            });
          } else {
            if (this.state.rowId !== record.id) {
              this.setState({
                rowId: record.id,
              });
            } else {
              this.setState({
                rowId: "",
              });
            }
          }

        },
        onDoubleClick: () => {
          this.setState({
            rowId: record.id,
          })
        }
      };
    }
    //设置点击row颜色
    setRowClassName = (record) => {
      return record.id === this.state.rowId ? 'clickRowStyle' : '';
    }
    resetEditFieldData = () => {
      this.setState({
        rowId: "",
      });
    }
    // 请求列表数据
    getTableData = (record,e) => {
      var date = new Date();
      let { page, pageSize, patInfo } = this.state;
      let data = {}
      data = {
        params: [{
          dateFrom: this.state.StartDate || "",
          dateTo: this.state.EndDate || "",
          patID: patInfo.patID || record.patID,
          updateUserID: ""
        }],
        pagination: [{
          pageSize: pageSize,
          currentPage: page,
        }]
      }
      $http.post('urlS', this, {
        code: '03050089',
        data: data,
        success: function (res) {
          if (+res.errorCode === 0 && res.result) {
            for (var i = 0; i < res.result.length; i++) {
              res.result[i]["key"] = i + "find"
            }
            this.setState({
              tableData: res.result,
               total: res.count,
               search:e
              // rowId:res.result&&res.result.length!=0?res.result[0].patNo:"",
            })
          } else {

          }
        }
      })
    }
    //选中行--确认
    handleRow = () => {
      this.handleCancel()
    }
    //开始日期
    startChange(date) {
      this.setState({
        StartDate: date,
      })
    }
    //结束日期
    endChange(date) {
      this.setState({
        EndDate: date,
      })
    }

    render() {
      const { getFieldDecorator } = this.props.form;
      const { total, checkStaus, } = this.state
      var date = new Date();
      let searchColConfig = {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
        lg: { span: 5 }
      }
      const columns = [{
        key: '1',
        title: '操作日期',
        dataIndex: 'updateDate',
        width: '15%',
        align: "center",
      }, {
        key: '1',
        title: '操作时间',
        dataIndex: 'updateTime',
        width: '15%',
        align: "center",
      }, {
        key: '2',
        title: '修改模块',
        dataIndex: 'fileDesc',
        width: '15%',
        align: 'center'
      }, {
        key: '3',
        title: '修改前内容',
        dataIndex: 'beforeVal',
        width: '8%',
        align: "center",
      }, {
        key: '4',
        title: '修改后内容',
        dataIndex: 'value',
        width: '15%',
        align: "center",
      }, {
        key: '5',
        title: '操作员',
        dataIndex: 'userName',
        width: '15%',
        align: "center",
      },]
      return (
        <div
          tabIndex={1}
          onKeyDown={this.handleOnKeydown}
          style={{ outline: 'none' }}
        >
          <Modal
            className='findPatients'
            width='1000px'
            visible={this.state.visible}
            title="修改日志"
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={null}
          >
            <div style={{ minHeight: '252px' }}>
              <Row>
                <Col span={12} style={{ display: "flex", height: "40px", alignItems: "center" }}>
                  <RangeDatePicker label='修改日期：' format='YYYY-MM-DD' width={300}
                    startDate={this.state.StartDate} endDate={this.state.EndDate}
                    startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                </Col>
                <Col span={2} style={{ marginLeft: '-60px' }}>
                  <FormItem >
                    {getFieldDecorator('checkInp', {
                      initialValue: undefined,
                      rules: [{ required: false, message: '' }],
                    })(
                      <Button style={{ background: 'rgba(66,185,131,1)', color: '#fff', }} onClick={this.handleQuery}>查找</Button>
                    )}
                  </FormItem>
                </Col>
              </Row>
              <div

              >
                <Table
                  pagination={false}
                  columns={columns}
                  dataSource={this.state.tableData}
                  rowClassName={this.setRowClassName}
                  onRow={this.onClickRow}
                  rowKey={record => record.key}
                  // locale={{emptyText:this.state.findInfo}}
                  style={{
                    marginTop: '12px', height: '496px',
                    overflow: 'auto'
                  }}
                />
                <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                    onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.tableData}
                    onChange={this.onChange.bind(this)} />
                {/* {
                  this.state.tableData && this.state.tableData.length > 0 ? <Pagination
                    showTotal={() => this.showTotal(this.state.total)}
                    size="small"
                    showQuickJumper
                    showSizeChanger
                    defaultCurrent={1}
                    current={this.state.page ? this.state.page : 1}
                    total={this.state.total ? this.state.total : 0}
                    onChange={this.onChange}
                    onShowSizeChange={this.onShowSizeChange}
                    style={{ textAlign: "right", marginTop: '13px' }}
                  /> : ""
                } */}
              </div>
            </div>
          </Modal>
        </div>
      )
    }
  })
export default ModificationLogModal    