/*
 * Creator:     ML
 * CreatDate:   2020-02-20
 * descripts：  黑名单信息爽约次数明细
 * */
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 CommonPagination from 'components/pagination/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';

const BreakTimesModal = Form.create()(
  class BreakTimesModal extends React.Component {
    constructor(props) {
      super(props)
      var userData = JSON.parse(sessionStorage.getItem('userData'))
      this.state = {
        userData: userData,
        total: 0,//表格总数据
        tableData: [],//表格数据
        page: 1,//页数
        pageSize: 10,//显示数
        loading: false,//确定按钮 loading
        visible: false,//查看修改日志弹窗
        rowId: "",//控制行高亮
        checkStaus: false,//是否点击行
        StartDate: undefined,
        EndDate: undefined,
        search:"",
        size:"small"
      }
    }
    componentDidMount() {
      this.props.onRefs(this);
      this.getMainTableColumns()
    }
    handleOk = (e) => {
    }
    showModal = (record) => {
      this.setState({
        record,
        visible: true,
      },()=>{
          this.getTableData()
      });
      
    }
    // 获取主列表columns
getMainTableColumns = () => {
    let data = {
        params: [{
            compontName: "PatientAppointmentRecord",
            reactCode: ['PatientAppointmentRecord'],
            type: 'C',
        }]
    }
    $http.post('urlS', this, {
        code: '01040073',
        data: data,
        success: function (res) {
            if (+res.errorCode === 0) {
                let arr = res.result && res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map(item => {
                    return {
                        align: item.align,
                        widthNum: parseInt(item.width),
                        width: item.width,
                        dataIndex: item.dataIndex,
                        title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{this.state.userData.language == 'EN' ? item.descripts:item.title}</div>,
                        display: item.display,
                        key: item.seqNo,
                    }
                }) : '';
                let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                this.setState({ localeProvider: this.state.userData.language == 'EN' ? res.result.language.EN : res.result.language.CN,columns: filterArr, widthTotal: res.totalWidth })
            }
        }
    })
}
    handleCancel = () => {
      this.setState({ 
        visible: false, 
        search:""
      })
    }
    //查询
    handleQuery = () => {
      this.setState({ page: 1, pageSize: 10 }, () => {
        let { number } = this.state;
        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("search");
      })
    }
    // 显示分页总条数
    showTotal(total) {
      return `共 ${total} 条`;
    }
    // 请求列表数据
    getTableData = (e) => {
      let { page, pageSize,record } = this.state;
      let data = {}
      data = {
        params: [{
            bookListID:record.ID
        }],
        pagination: [{
          pageSize: pageSize,
          currentPage: page,
        }]
      }
      $http.post('urlS', this, {
        code: '03050184',
        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 
            }
            this.setState({
              tableData: res.result.data,
               total: res.TotalCount,
               search:e
            })
          } else {

          }
        }
      })
    }
    //国际化
  setMessage(name, message) {
    return this.props.localeProvider ? this.props.localeProvider[name][message] : ''
  }
    render() {
      const { getFieldDecorator } = this.props.form;
      const { total, columns} = this.state
      return (
        <div
          tabIndex={1}
          onKeyDown={this.handleOnKeydown}
          style={{ outline: 'none' }}
        >
          <Modal
            className='breakTimes'
            width='1000px'
            visible={this.state.visible}
            title={this.props.localeProvider && this.props.localeProvider.BlacklistInformationInterfacBreakdownDetails ? this.setMessage('BlacklistInformationInterfacBreakdownDetails', 'descripts') : "爽约次数明细"}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
            footer={null}
          >
            <div style={{ minHeight: '252px' }}>
              <div
              >
                <Table
                  pagination={false}
                  columns={columns}
                  dataSource={this.state.tableData}
                  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)} />
                 <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName='PatientAppointmentRecord'
                    configType="C"
                    onRef={this.onColumnRef}
                    reloadData={this.getMainTableColumns}
                />
              </div>
            </div>
          </Modal>
        </div>
      )
    }
  })
export default BreakTimesModal    