import React from 'react';
import { Table, Input, Button, message, Select, Row, Col } from 'antd';
import { $http } from '../../containers/config/https';;
import RangeDatePicker from 'components/rangePicker/index';
import CommonPagination from 'components/pagination/index';
import Reports from '../raqSoft/reportsEmbed';
import store from '../../store';
const Option = Select.Option;
const { Search } = Input;
export default class OPAccountFootDataDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //输入的参数
            footID:"",
            stDate: "",
            endDate: "",
            // 主菜单列表数据
            data: [],
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading: true,
            total: "",
            page:"1",
            pageSize: "10",
            reportParam:{},
        }
        this.columns = [
            {
                title: "汇总ID",
                dataIndex: 'footID',
                width: '100px',
                align: 'center',
            },
            {
                title: "汇总时间",
                dataIndex: "footDateTime",
                width: '150px',
                align: 'center'
            },
            {
                title: "汇总人",
                dataIndex: "footName",
                width: '100px',
                align: 'center'
            },
            {
                title: "上期余额",
                dataIndex: "accEarlyBalance",
                width: '100px',
                align: 'center'
            },
            {
                title: "本期余额",
                dataIndex: "accCurrentBalance",
                width: '100px',
                align: 'center'
            },
            {
                title: "本日充值",
                dataIndex: 'accAddSum',
                width: '100px',
                align: 'center',
            },
            {
                title: "本日预交金退费",
                dataIndex: "accRefundSum",
                width: '200px',
                align: 'center'
            },
            {
                title: "本日消费",
                dataIndex: "accPaySum",
                width: '100px',
                align: 'center'
            },
            {
                title: "本日消费退款",
                dataIndex: 'accPayRefundSum',
                width: '100px',
                align: 'center',
            }

        ]
    }
    ///生命周期 数据异步请求，请求成功之后setState
    componentDidMount() {
        this.handleQuery();
        this.setState({
            showLoading: false,
            loading: false,
        }
        )
    }
    componentWillUnmount() {
        this.setState = (state, callback) => {
            return
        }
    }

    onChangeStDate = (value) => {
        if (value) { } else { value = "" }
        this.setState({
            stDate: value
        });
    }
    onChangeEndDate = (value) => {
        if (value) { } else { value = "" }
        this.setState({
            endDate: value
        });
    }

    /*setRowClassName = (record) => {
        return record.footID === this.state.footID? 'blueClass' : '';
      }*/
    // 页码改变的回调，参数是改变后的页码及每页条数
  appPageChange = (page, pageSize) => {
    this.setState({
      page: page,
      pageSize: pageSize,
    }, () => {
      // 重新调用查询方法
      this.handleQuery();
    });
  }

  // 条数改变的回调
  apponShowSizeChange = (current, size) => {
    this.setState({
      page: current,
      pageSize: size,
    }, () => {
      // 重新调用查询方法
      this.handleQuery();
    });
   }
   onClickRow = (record) => { 
    let userName=JSON.parse(window.sessionStorage.userData).userName  
    //给右边的编辑form传值
    return {
        
        onClick: () => {
            console.log("5678");
            if(this.state.footID===""){
                this.setState({
                    footID:record.footID,
                    reportParam:{"userName":userName,"stDateTime":record.stDateTime,"endDateTime":record.endDateTime,"footID":record.footID}
                });
                
            }else{
                if(this.state.footID!==record.footID){
                    this.setState({
                        footID:record.footID,
                        reportParam:{"userName":userName,"stDateTime":record.stDateTime,"endDateTime":record.endDateTime,"footID":record.footID}
                      });
                }else{
                    this.setState({
                        footID:"",
                        reportParam:{"userName":"","stDateTime":"","endDateTime":"","footID":""}
                        });
                    }
                } 
            },
        };
    }
    setRowClassName = (record) => {
        return record.footID === this.state.footID? 'clickRowStyle' : '';
    }

    // 查询
    handleQuery = () => {
        let {stDate, endDate, page,pageSize} = this.state;
        let data = {}
        data = {
            params: [{
                stDate: stDate,
                endDate: endDate,
                hospID: JSON.parse(window.sessionStorage.userData).hospID, //医院id 
            }],
            pagination: [{
                pageSize: pageSize,
                currentPage: page,
                sortColumn: "Code",
                sortOrder: "asc"
            }]
        }

        $http.post('urlS', this, {
            code: '05100704',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0 && res.data) {
                    for (var i = 0; i < res.data.length; i++) {
                        res.data[i].key = i;
                    }
                    console.log("KKK",res);
                    this.setState({ data: res.data ,total: res.total, loading: false}
                    )
                } else {
                    this.setState({
                        data: [],
                    })
                }
            }
        })
    }
    
    
    render() {
        return (
            <div>
            <span style={{ display: 'inline-block' , margin: '12px 15px 0 30px' }}>
                <RangeDatePicker label="汇总日期:" format='YYYY-MM-DD' width={300} startChange={this.onChangeStDate} endChange={this.onChangeEndDate}/>
            </span>
            <Button onClick={this.handleQuery} style={{ margin: '12px 15px 0 0', background: 'rgba(255,255,255,1)' }} >查询</Button> 
            <Row span={24}>
                <Col span={12} style={{ padding: 24 }}  >
                    <Table
                        style={{ height: store.getState().tableHeight.y + 65 + 'px' }}
                        dataSource={this.state.data}
                        rowClassName={this.setRowClassName}
                        className='TableA'
                        onRow={this.onClickRow}
                        columns={this.columns}
                        pagination={false}
                        scroll={{ x: 1000, y: store.getState().tableHeight.y }}
                        bordered
                        loading={this.state.loading}
                    />
                    <CommonPagination size="small" current={this.state.page} total={this.state.total} search='search'
                        onShowSizeChange={this.apponShowSizeChange} complete={true} dataSource={this.state.data}
                        onChange={this.appPageChange} />
                </Col >
                <Col span={12} style={{ padding: 24 }}  >
                    <div style={{height:"600px"}}>
                    <Reports 
                        params={this.state.reportParam}
                        raqName={'OPAccSummaryPersonInfo.rpx'}
                        //debug
                    />
                    </div>
                </Col>
            </Row>
            </div>  
        )
    }
}