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 OPNoChargeDetails extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            //输入的参数
            admID:"",
            cardTypeID: "",
            cardNo: '',
            patNo: '',
            stDate: "",
            endDate: "",
            //下拉框数组
            cardTypeData: [],
            // 主菜单列表数据
            data: [],
            // 是否显示loading
            showLoading: true,
            // 表格loading
            loading: true,
            total: "",
            page:"1",
            pageSize: "10",
            reportParam:{},
        }
        this.columns = [
            {
                title: "就诊ID",
                dataIndex: 'admID',
                width: '100px',
                align: 'center',
            },
            {
                title: "就诊时间",
                dataIndex: "admDateTime",
                width: '150px',
                align: 'center'
            },
            {
                title: "人员标识",
                dataIndex: "patNo",
                width: '100px',
                align: 'center'
            },
            {
                title: "姓名",
                dataIndex: "patName",
                width: '100px',
                align: 'center'
            },
            {
                title: "就诊科室",
                dataIndex: 'admLocDesc',
                width: '100px',
                align: 'center',
            },
            {
                title: "诊断",
                dataIndex: "diagnose",
                width: '100px',
                align: 'center'
            },
            {
                title: "金额",
                dataIndex: "patAmt",
                width: '100px',
                align: 'center'
            }

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


    //卡类型
    cardTypeList = () => {
        var data = {
            params: [{
                hospID: JSON.parse(window.sessionStorage.userData).hospID, //医院id 
            }]
        }

        $http.post('urlS', this, {
            code: "01040059",
            data: data,
            success: function (res) {
                let errorCode = res.errorCode;
                if (errorCode === '0') {
                    let cardDeffault = res.cardType.filter((item) => {
                        return item.defaultFlag === 'Y';
                    })
                    this.setState({
                        cardTypeID: cardDeffault[0].id, // 默认卡
                        cardTypeData: res.cardType,  // 用户数据
                    });
                }
            }
        });
    }
   
    /***双向绑定***/
    onChangeCardTypeID = (value) => {
        this.setState({
            cardTypeID: value
        });
    }
    onChangeCardNo = (e) => {
        this.setState({
            cardNo: e.target.value
        });
    }
    onChangePatNo = (e) => {
        this.setState({
            patNo: e.target.value
        });
    }
    onChangeStDate = (value) => {
        if (value) { } else { value = "" }
        this.setState({
            stDate: value
        });
    }
    onChangeEndDate = (value) => {
        if (value) { } else { value = "" }
        this.setState({
            endDate: value
        });
    }

   /* setRowClassName = (record) => {
        return record.GrantID === this.state.grantID ? '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 groupID=JSON.parse(window.sessionStorage.userData).groupID  //医院id 
    let locID=JSON.parse(window.sessionStorage.userData).locID  //医院id 
    let hospID=JSON.parse(window.sessionStorage.userData).hospID  //医院id 
    let expStr=groupID+"^"+locID+"^"+hospID
    //给右边的编辑form传值
    return {
        
        onClick: () => {
            if(this.state.admID===""){
                this.setState({
                    admID:record.admID,
                    patName:record.patName,
                    reportParam:{"admIdStr":record.admID,"patName":record.patName,"expStr":expStr,"admDateTime":record.admDateTime,"mobile":record.mobile}
                });
                
            }else{
                if(this.state.admID!==record.admID){
                    this.setState({
                        admID:record.admID,
                        patName:record.patName,
                        reportParam:{"admIdStr":record.admID,"patName":record.patName,"expStr":expStr,"admDateTime":record.admDateTime,"mobile":record.mobile}
                      });
                }else{
                    this.setState({
                        admID:"",
                        patName:"",
                        reportParam:{"admIdStr":"","patName":"","expStr":"","admDateTime":"","mobile":""}
                        });
                    }
                } 
            },
        };
    }
    setRowClassName = (record) => {
        return record.admID === this.state.admID ? 'clickRowStyle' : '';
    }

    // 查询
    handleQuery = () => {
        let { patNo, cardTypeID, cardNo, stDate, endDate, page,pageSize} = this.state;
        let data = {}
        data = {
            params: [{
                cardTypeID:cardTypeID,
                cardNo:cardNo,
                number:patNo,
                startDate: 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: '05100272',
            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>
            <Select allowClear style={{ width: '100px', margin: '12px 15px 0 0' }} placeholder="请选择" value={this.state.cardTypeID} onChange={(event) => { this.onChangeCardTypeID(event) }} >
                <Option value=''>请选择</Option>
                {this.state.cardTypeData.map(item => <Option title={item.descripts + '^' + item.descriptsSPCode} key={item.id} value={item.id}  >{item.descripts}</Option>)}
            </Select>
            <Search maxLength={50} className='search' style={{ width: '200px', margin: '12px 15px 0 0' }} allowClear placeholder="请输入卡号" value={this.state.cardNo} onChange={this.onChangeCardNo} onPressEnter={this.handleQuery}/>
            人员标识：<Input placeholder="病人ID/身份证号码" style={{ width: '260px', margin: '12px 15px 0 0' }} value={this.state.patNo} onChange={this.onChangePatNo} onPressEnter={this.handleQuery} />    
            <span style={{ display: 'inline-block' , margin: '12px 15px 0 0' }}>
                <RangeDatePicker label="就诊日期:" format='YYYY-MM-DD' width={260} 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={'OPNoChargeTarDetail.rpx'}
                        //debug
                    />
                    </div>
                </Col>
            </Row>
            </div>  
        )
    }
}