// 门诊发药处方统计
import React from 'react';
import {Card, Form, DatePicker, Row, Col, Button, message } from 'antd';
import store from 'store';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import { handleExcel } from 'tools/handleExcel.js';
import PubilcTablePagination from 'pages/common/PubilcTablePagination';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import 'assets/css/common.css';

class PrescriptionStatistics extends React.Component {
    constructor() {
        super();
        this.state = {
            basicHeight: 0,
            parameterSetting: {}, // 界面默认数据
            columns: [],
            page: 1,
            pageSize: 20,
            total: 0,
            tableData:[],
            widthTotal: 0, // table总宽度
            loading: false
        }
    }

    componentDidMount() {
        this.getParameterSetting();
        this.getMainTableColumns();
        // 关闭loading
        this.child.handleLoading();
        this.setState({basicHeight: document.getElementById("outpatient-workload-statistics-basic").clientHeight})
    }

    onRef = (ref) => {
        this.child = ref
    }

    // 获取默认参数配置
    getParameterSetting = () => {
        let data = {
            params: []
        }
        $http.post('urlS', this, {
            code: "02050007",
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    this.setState({
                        parameterSetting: res.result[0] ? res.result[0] : {}
                    })
                }
            }
        })
    }

    // 获取主列表columns
    getMainTableColumns = () => {
        let data = {
            params: [{
                compontName: "PrescriptionStatistics",
                type: 'C',
            }]
        }
        $http.post('urlS', this, {
            code: '01040073',
            data: data,
            success: function (res) {
                if (+res.errorCode === 0) {
                    let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                        return  {
                            ...item,
                            key: index + 1,
                            title: <div onDoubleClick={() => this.mainColumnRef.onOpenModel()}>{item.title}</div>
                        }
                    }) : '';
                    let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                    this.setState({columns: filterArr, widthTotal: res.totalWidth})
                }
            }
        })
    }

    onMainColumnRef = (ref) => {
        this.mainColumnRef = ref;
    }

    // 请求列表数据
    getTableData () {
        this.setState({loading: true});
        const { form: { validateFields } } = this.props;
        validateFields((errors, values) => {
            if (errors === null) {
                let { page, pageSize } = this.state;
                let data = {
                    params: [{
                        startDate: values.startDate ? Moment(values.startDate).format("YYYY-MM-DD") : Moment(), // 开始日期
                        endDate: values.endDate ? Moment(values.endDate).format("YYYY-MM-DD") : '', // 截止日期
                    }],
                    pagination:[{
                        pageSize: pageSize,
                        currentPage: page,
                        sortColumn: "Describe",
                        sortOrder: "asc"
                    }]
                }
                $http.post('urlS', this, {
                    code: "02030081",
                    data: data,
                    success: function (res) {
                        if (+res.errorCode === 0) {
                            let arr = res.rows ? res.rows : [];
                            for (var i = 0; i < arr.length; i++) {
                                arr[i].key = i + 1
                            }
                            this.setState({tableData: arr, total: res.total, loading: false}, () => {
                                // 数据加载成功关闭loading
                                this.child.handleLoading()
                            })
                        } else {
                            this.setState({tableData: [], total: 0, loading: false}, () => {
                                // 数据加载成功关闭loading
                                this.child.handleLoading();
                            })
                        }
                    },
                    error: function () {
                        this.setState({tableData: [], total: 0, loading: false}, () => {
                            // 数据加载成功关闭loading
                            this.child.handleLoading();
                        })
                    }
                })
            }
        })

    }

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

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

    // 清屏
    resetFields = () => {
        this.props.form.resetFields();
        this.setState({tableData: [], total: 0});
    }

    render() {
        let {parameterSetting, basicHeight, columns, tableData, total, page, widthTotal, loading} = this.state;
        const { getFieldDecorator } = this.props.form;
        const formItemInput  = {
            labelCol: {span: 9},
            wrapperCol: {span: 15}
        };
        // 组件所需参数
        const param = {
            // 表头配置
            columns,
            // 表格数据
            data: tableData,
            // 数据总条数
            total,
            // 当前页数
            page,
            // 表格的宽度
            x: widthTotal,
            y: store.getState().tableHeight.y + 202 - 123 - basicHeight + 'px',
            height: store.getState().tableHeight.y + 202 - 77 - basicHeight + 'px',
            loading,
            pageSize: "20"
        }
        return (
            <div>
                <Card
                    size="small"
                    title={<div className="card-title-left-icon"><div></div>基本操作</div>}
                    id="outpatient-workload-statistics-basic"
                >
                    <Form>
                        <Row style={{marginTop: '12px'}}>
                            <Col span={3}>
                                <Form.Item label="开始日期" {...formItemInput}>
                                    {getFieldDecorator('startDate', {
                                        initialValue: parameterSetting.startDate ? Moment(parameterSetting.startDate) : Moment(),
                                    })(
                                        <DatePicker style={{width: '100%'}} />
                                    )}
                                </Form.Item>
                            </Col>
                            <Col span={3}>
                                <Form.Item label="截止日期" {...formItemInput}>
                                    {getFieldDecorator('endDate', {
                                        initialValue: parameterSetting.endDate ? Moment(parameterSetting.endDate) : Moment(),
                                    })(
                                        <DatePicker style={{width: '100%'}} />
                                    )}
                                </Form.Item>
                            </Col>

                            <Col span={6} style={{marginTop: '4px'}}>
                                <Button onClick={this.handleQuery} style={{margin: '0 50px'}}>查询</Button>
                                <Button
                                    type="primary"
                                    onClick={this.resetFields}
                                >清屏</Button>
                            </Col>
                        </Row>
                    </Form>
                </Card>
                <div style={{height: '6px', background: 'rgba(240, 242, 245, 1)', width: '100%'}}></div>
                <Card
                    size="small"
                    title={<div className="card-title-left-icon"><div></div>统计列表</div>}
                >
                    <div style={{height: store.getState().tableHeight.y + 202 - 30 - basicHeight + 'px', overflow: 'auto'}}>
                        <PubilcTablePagination param={param} handelThis={this} onRef={this.onRef} />
                    </div>
                </Card>
                <ColumnAuthoritysModel
                    clientWidth='800px'
                    compontName='PrescriptionStatistics'
                    configType="C"
                    onRef={this.onMainColumnRef}
                    reloadData={this.getMainTableColumns}
                />
            </div>
        )
    }
};
const PrescriptionStatisticsForm = Form.create()(PrescriptionStatistics);
export default PrescriptionStatisticsForm;
