// 审核退费申请
import React from 'react';
import { Select, Row, Col, Button, Spin, Popconfirm, message } from 'antd';
import { $http } from 'containers/config/https';
import { dayFormat } from 'tools/index';
import 'assets/css/system.css';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';
import store from 'store';
import RangeDatePicker from 'components/rangePicker/index';
import moment from 'moment';

const { Option } = Select;

export default class ReviewRefundApplication extends React.Component {

  constructor({ history }) {
    super();
    this.history = history;
    var date = new Date();
    let userData = JSON.parse(sessionStorage.getItem('userData'));
    this.state = {
      userData,
      // 记录状态
      status: undefined,
      // 表格数据
      tableData: [],
      // 表格数据总条数
      total: 0,
      showLoading: true,
      page: 1,
      pageSize: 20,
      statusSelectData: [], // 状态下拉框数据
      headerHeight: 0,
      loading: false,
      dateFrom: moment(date).format(dayFormat),
      dateTo: moment(date).format(dayFormat),
      selectedRowKeys: []
      // dateTo: moment(new Date(date.getTime() + 144 * 60 * 60 * 1000)).format(dayFormat),
    };
    this.columns = [
      {
        key: 1,
        title: '患者姓名',
        dataIndex: 'patName',
        align: "center",
        width: '12%'
      },
      {
        key: 2,
        title: '科室名称',
        dataIndex: 'admLocDesc',
        align: "center",
        width: '12%'
      },
      {
        key: 3,
        title: '医生名称',
        dataIndex: 'admDocDesc',
        align: "center",
        width: '12%',
      },
      {
        key: 5,
        title: '就诊日期',
        dataIndex: 'admDate',
        align: "center",
        width: '11%',
      },
      {
        key: 6,
        title: 'his交易流水号',
        dataIndex: 'hisTradeNum',
        align: "center",
        width: '11%'
      },
      {
        key: 7,
        title: '申请状态',
        dataIndex: 'status',
        align: "center",
        width: '11%'
      },
      {
        key: 8,
        title: '申请日期',
        dataIndex: 'createDate',
        align: "center",
        width: '11%'
      },
      {
        key: 9,
        title: '申请时间',
        dataIndex: 'createTime',
        align: "center"
      }
    ]

  }

  componentDidMount() {
    // 初始化列表数据
    this.getSelectData();
    // 组件加载完毕关闭loading
    this.setState({ showLoading: false });
    var box = document.querySelector(".rra-header");
    if (box) { //此处在加一层判断，更加严密，如果box存在的情况下获取
      this.setState({ headerHeight: box.offsetHeight })
    }
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取下拉框数据
  getSelectData = () => {
    let data = {
      params: [{}]
    }
    $http.post('urlS', this, {
      code: "01040242",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          let statusSelectData = res.result && res.result.Data && res.result.Data.length > 0 ? res.result.Data : [];
          this.setState({ statusSelectData, status: statusSelectData && statusSelectData.length > 0 ? statusSelectData[0].id : undefined }, () => {
            this.handleQuery();
          })
        } else {
          this.setState({ statusSelectData: [] })
        }
      }
    })
  }

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

  startChange = (e) => {
    this.setState({
      dateFrom: e ? moment(e).format(dayFormat) : ''
    })
  }

  endChange = (e) => {
    this.setState({
      dateTo: e ? moment(e).format(dayFormat) : ''
    })
  }

  // 查询条件 --- 记录状态
  onChangeStatus = (e) => {
    this.setState({ status: e });
  }

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

  // 请求列表数据
  getTableData = () => {
    this.setState({ loading: true });
    let { page, pageSize, dateFrom, dateTo, status, userData } = this.state;
    let data = {}
    data = {
      params: [{
        locID: userData && userData.locID ? userData.locID : "",
        docID: userData && userData.userID ? userData.userID : "",
        startDate: dateFrom,
        stopDate: dateTo,
        status
      }],
      // pagination: [{
      //   pageSize: pageSize,
      //   currentPage: page
      // }]
    }
    $http.post('urlS', this, {
      code: "05210086",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          for (var i = 0; i < res.result.length; i++) {
            res.result[i].key = res.result[i].appID;
          }
          this.setState({ tableData: res.result, selectedRowKeys: [], loading: false }, () => {
            // 数据加载成功关闭loading
            this.child.handleLoading()
          })
        } else {
          this.setState({ tableData: [], total: 0, selectedRowKeys: [], loading: false }, () => {
            // 数据加载成功关闭loading
            this.child.handleLoading();
          })
        }
      },
      error: function () {
        this.setState({ tableData: [], total: 0, selectedRowKeys: [], loading: false }, () => {
          // 数据加载成功关闭loading
          this.child.handleLoading();
        })
      }
    })
  }

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

  // 审核通过
  handleToExamine = (status) => {
    let { selectedRowKeys } = this.state;
    let data = {
      params: [{
        status, // 审核状态 01为通过，02为拒绝
        refundAppData: selectedRowKeys
      }]
    }
    $http.post('urlS', this, {
      code: "05100397",
      data: data,
      success: function (res) {
        if (+res.errorCode === 0) {
          message.success(res.errorMessage)
          this.handleQuery();
        }
      }
    })
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowId === '') {
          // 保存行数据以及ID
          this.setState({ rowId: record.key, rowData: record })
        } else {
          if (this.state.rowId !== record.key) {
            this.setState({ rowId: record.key, rowData: record })
          }
        }
      }
    }
  }

  // 选中行操作
  setRowClassNamePublic = (record) => {
    return record.key === this.state.rowId ? 'clickRowStyle' : "";
  }

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

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

    let rowSelection = {
      selectedRowKeys,
      onChange: this.rowSelectionOnChange,
    };
    return (
      <Spin tip="加载中..." spinning={showLoading}>
        <div className="review-refund-application">
          <div className="rra-header">
            <Row style={{ minHeight: '64px', padding: '0 24px' }}>
              <Col span={20}>
                <div style={{ display: 'inline-block', marginRight: "12px" }}>
                  <RangeDatePicker label={'申请日期：'} format='YYYY-MM-DD' width='340px' startDate={dateFrom} endDate={dateTo}
                    isChange={true} startChange={this.startChange.bind(this)} endChange={this.endChange.bind(this)} />
                </div>
                申请状态：<Select allowClear value={this.state.status} onChange={this.onChangeStatus} style={{ width: '150px', margin: '23px 15px 0 0' }} placeholder="请选择">
                  {statusSelectData && statusSelectData.map(item => {
                    return <Option value={item.id} key={item.id} title={item.descripts}>{item.descripts}</Option>
                  })}
                </Select>
                <Button onClick={this.handleQuery} style={{ margin: '23px 15px 20px 0' }}>查询</Button>
              </Col>
              <Col span={4} style={{ textAlign: 'right' }}>
                <Button type="primary" onClick={() => this.handleToExamine("01")} style={{ width: "100px", margin: '23px 15px 0 0' }} disabled={selectedRowKeys && selectedRowKeys.length > 0 ? false : true}>审核通过</Button>
                <Button type="danger" onClick={() => this.handleToExamine("02")} style={{ width: "100px", margin: '23px 15px 0 0' }} disabled={selectedRowKeys && selectedRowKeys.length > 0 ? false : true}>审核拒绝</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}
              // onClickRowPublic={this.onClickRowPublic} setRowClassNamePublic={this.setRowClassNamePublic}
              rowSelectionPublic={rowSelection}
            />
          </div>
        </div>
      </Spin>
    )
  }
}


