/*
 * Create:      TC
 * CreateDate:  2022/07/14
 * Describe：   通过登记号查询付款记录
 * */
import React, { Component } from 'react';
import { Row, Col, Input, Button, Modal } from 'antd';
import store from 'store';
import { Util } from 'tools';
import PubilcTablePagination from 'pages/common/PubilcTablePagination.jsx';

class OrderDetailQuery extends Component {
    constructor(props) {
        super(props);
        var userData = JSON.parse(sessionStorage.getItem('userData'));
        this.state = {
            userData,
            hospID: userData?.hospID,
            orderResourceID: undefined,
            medItemDesc: undefined,
            statusID: undefined,
            selectData: {}, // 下拉数据
            columns: [],
            tableData: [],
            total: 0,
            page: 1,
            pageSize: 20,
            loading: false,
            totalWidth: 800,
            rowID: '',
            visible: false,
            subColumns: [],
            subTotalWidth: 500,
            subTableData: [],
        };
        this.staticColumns = [{
            key: 1,
            title: '医院',
            dataIndex: 'hospDesc',
            align: "center",
        }, {
            key: 2,
            title: '机构',
            dataIndex: 'orderResourceDesc',
            align: "center",
        }, {
            key: 3,
            title: '医嘱大类',
            dataIndex: 'orderCatDesc',
            align: "center",
        }, {
            key: 4,
            title: '医嘱子类',
            dataIndex: 'orderSubCatDesc',
            align: "center",
        }, {
            key: 5,
            title: '医嘱项',
            dataIndex: 'medItemDesc',
            align: "center",
        }, {
            key: 6,
            title: '开始日期',
            dataIndex: 'startDate',
            align: "center",
        }, {
            key: 7,
            title: '失效日期',
            dataIndex: 'stopDate',
            align: "center",
        }];
        this.timeout = null;
    }

    componentDidMount() {
        this.getTableColumns();
        this.getSubTableColumns();
    }

    // 获取列表columns
    getTableColumns = async () => {
        try {
            let data = {
                params: [{
                    compontName: "OrderDetailQuery",
                    type: 'C',
                }]
            }
            let res = await React.$asyncPost(this, '01040073', data);
            let filterColumn = res.result && 'C' in res.result && Array.isArray(res.result.C) ? JSON.parse(JSON.stringify(res.result.C)).filter(function (item) { return item.display !== 'N' }) : [];
            let columsOperation = {
                title: '操作',
                dataIndex: 'operation',
                align: "center",
                width: 150,
                render: (text, record) => (
                    <span>
                        <span className='span' onClick={(e) => this.handleDetailQuery(record, e)}>医嘱明细</span>
                    </span>
                ),
            }
            filterColumn.push(columsOperation);

            this.setState({
                columns: filterColumn,
                totalWidth: parseInt(res.totalWidth)
            })
        } catch (error) {
            console.log(error)
        }
    }

    // 获取列表columns
    getSubTableColumns = async () => {
        try {
            let data = {
                params: [{
                    compontName: "PaymentOrderDetail",
                    type: 'C',
                }]
            }
            let res = await React.$asyncPost(this, '01040073', data);
            let filterColumn = res.result && 'C' in res.result && Array.isArray(res.result.C) ? JSON.parse(JSON.stringify(res.result.C)).filter(function (item) { return item.display !== 'N' }) : [];
            this.setState({
                subColumns: filterColumn,
                subTotalWidth: parseInt(res.totalWidth)
            })
        } catch (error) {
            console.log(error)
        }
    }

    handleModal(record) {
        // 初始化数据
        this.setState({ rowID: record.id, visible: true, });
    }

    // 取消
    handleCancel = () => {
        this.setState({
            visible: false,
        })
    }
    // 查询
    handleQuery = () => {
        this.setState({ page: 1, loading: true }, () => {
            this.getTableData();
        })
    }

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

    // 请求列表数据
    getTableData = async () => {
        try {
            let { patNo, pageSize, page } = this.state;
            // let length = 10
            // patNo = (Array(length).join(0) + patNo).slice(-length)
            let data = {
                params: [{
                    patNo
                }],
                pagination: [{
                    pageSize,
                    currentPage: page
                }]
            }
            let res = await React.$asyncPost(this, '05300030', data);
            let tableData = res.result.data && Array.isArray(res.result.data) ? Util.addKeyValueToDataSource(res.result.data) : [];
            this.setState({ tableData, total: res.totalCount, loading: false });
        } catch (error) {
            this.setState({ tableData: [], total: 0, loading: false, patNo })
        }
    }

    // 医嘱明细
    handleDetailQuery = async (record) => {
        try {
            let data = {
                params: [{
                    id: record?.id
                }]
            }
            let res = await React.$asyncPost(this, '05300031', data);
            let subTableData = res.result.data && Array.isArray(res.result.data) ? Util.addKeyValueToDataSource(res.result.data) : [];
            this.setState({ subTableData, visible: true });
        } catch (error) {
            console.log(error)
        }
    }

    // 操作弹框
    onClickRowPublic = (record) => {
        return {
            onDoubleClick: () => {
                this.handleDetailQuery(record);
            }
        }
    }

    render() {
        let { patNo, columns, tableData, total, page, loading, totalWidth, subColumns, subTableData, subTotalWidth } = this.state;

        // 组件所需参数
        const param = {
            // 表头配置
            columns: columns && columns.length > 0 ? columns : [],
            // 表格数据
            data: tableData,
            // 数据总条数
            total,
            // 当前页数
            page,
            pageSize: "20",
            loading,
            // 表格的宽度
            x: totalWidth,
            componentName: 'OrderDetailQuery',
            y: store.getState().tableHeight.y + 6,
            height: store.getState().tableHeight.y + 56 + 'px'
        }
        const paramModal = {
            // 表头配置
            columns: subColumns && subColumns.length > 0 ? subColumns : [],
            // 表格数据
            data: subTableData,
            loading,
            // 表格的宽度
            x: subTotalWidth,
            componentName: 'PaymentOrderDetail',
            y: 400,
            height: '450px'
        }
        return (
            <div className='hospital-information'>
                <Row className='query-table-header'>
                    <Col span={18}>
                        病人标识：<Input
                            value={patNo}
                            className="common-query-input"
                            placeholder="输入病人信息回车查询"
                            onChange={Util.commonInputChange.bind(this, 'patNo')}
                            onPressEnter={this.handleQuery}
                        />
                        <Button onClick={this.handleQuery}>查询</Button>
                    </Col>
                    {/* <Col span={6} style={{ textAlign: 'right' }}>
            <Button
              type="primary"
              disabled={!rowID}
              onClick={this.handleDetailQuery}
            >
              医嘱明细
            </Button>
          </Col> */}
                </Row>
                <div className="common-query-split-line"></div>
                <div style={{ padding: 24 }}>
                    <PubilcTablePagination
                        param={param}
                        compilePage={this.compilePage}
                        getColumns={this.getTableColumns}
                        onClickRowPublic={this.onClickRowPublic}
                    />
                </div>
                <Modal
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    width="1000px"
                    title="医嘱明细"
                    className="table-body-height"
                    footer={false}
                >
                    <PubilcTablePagination
                        param={paramModal}
                        getColumns={this.getSubTableColumns}
                    />
                </Modal>
            </div>
        )
    }
};

export default OrderDetailQuery;