/*
 * Creator:     ML
 * CreatDate:   2019-11-15
 * descripts：煎药方式和费用对照
 * */
import React from 'react';
import moment from 'moment';
import { Form, Row, Col, Input, Table, Select, DatePicker, Button, Modal, message, Divider, Tooltip, Icon, Card, Checkbox, Radio, Badge, Fragment, Pagination, Popconfirm, Switch } from 'antd';
import { $http } from '../../containers/config/https';
import store from '../../store';
import DecoctingOrderModal from "./component/DecoctingOrderModal"
import CommonPagination from 'components/pagination/index';
import './css/index.less'

const paddRightCol = {
    paddingRight: "0px",
    paddingLeft: "0px"
}
const formItemLayoutType = {
    labelCol: { span: 9 },
    wrapperCol: { span: 15 }
}
const formItemLayoutNumber = {
    labelCol: { span: 10 },
    wrapperCol: { span: 12 }
}
const FormItem = Form.Item;
const Option = Select.Option;
const DecoctingMethodAndOrder = Form.create()(
    class DecoctingMethodAndOrder extends React.Component {
        cacheOriginData = {};
        constructor() {
            super()
            this.state = {
                leftData: [],//左边查询到的表格数据
                rightData: [],//右边双击后的表格数据
                // 左侧表格
                total: 0,//医嘱项表格总数据
                page: 1,//页数
                pageSize: 10,//显示数
                //右侧表格
                totalRight: 0,
                pageRight: 1,
                pageSizeRight: 10,
                size: "small",
                search: "",
                sizeRight: "small",
                searchRight: "",
                rowId: "",
                rowIds: "",
                checked: true
            }
        }
        componentDidMount = () => {
            // 初始化设置table的高度以及表体的高度
            if (document.querySelector('.ant-table-body')) {
                document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px'
            }
            this.getHopSelect()
            this.getDecocList()
        }
        //子组件 搜索医嘱项
        OnChildrefs = (ref) => {
            this.child = ref
        }
        //接收子组件 医嘱项id 描述
        handleParms = (record) => {
            this.props.form.setFieldsValue({ orderItem: record.descripts })
            this.setState({
                medItemID: record.id
            })
        }
        //搜索医嘱项
        handleOrderItem = () => {
            // console.log("this.props.form.getFieldValue('orderItem')",this.props.form.getFieldValue("orderItem"))
            if (this.props.form.getFieldValue("orderItem") && this.props.form.getFieldValue('orderItem').length == 0) {
                message.warning("请输入医嘱项名称")
            } else {
                //调起
                this.child.showModal(this.props.form.getFieldValue("orderItem"))
            }
        }
        //清空医嘱项
        handleValue = (e) => {
            if (e) {
                if (e.target.value.length == 0) {
                    this.setState({
                        medItemID: ""
                    })
                }
            }
        }
        //获取医院下拉框
        getHopSelect = () => {
            let data = {
                params: [{
                    hospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
                    logonGroupID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).groupID : "",
                    logonHospID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).hospID : "",
                }],
            }
            $http.post('urlS', this, {
                code: '01040001',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            hospArr: res.result
                        })
                    }
                }
            })
        }
        //获取煎药列表
        getDecocList = (search) => {
            const { page, pageSize } = this.state
            let data = {
                params: [{

                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                }]
            }
            $http.post('urlS', this, {
                code: '02030064',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            search: search && search || "",
                            leftData: res.result.Data,
                            total: res.result.TotalCount
                        })
                    }
                }
            })
        }
        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }

        // 修改page和pageSize 跳转至---
        onChange = (page, pageSize) => {
            this.setState({ page: page, pageSize: pageSize }, () => {
                // 重新调用查询方法
                this.getDecocList();
            })
        }
        // 页码改变的回调，参数是改变后的页码及每页条数
        PageChange = (page, pageSize) => {
            this.setState({ page: page, pageSize: this.state.pageSize }, () => {
                // 重新调用查询方法
                this.getDecocList();
            });
        }
        //下拉选择页数
        onShowSizeChange = (page, pageSize) => {
            this.setState({ page: 1, pageSize: pageSize }, () => {
                // 重新调用查询方法
                this.getDecocList("search");
            })
        }
        //右侧
        // 显示分页总条数
        showTotalRight(total) {
            return `共 ${total} 条`;
        }
        // 修改page和pageSize 跳转至---
        onChangeRight = (page, pageSize) => {
            this.setState({ pageRight: page, pageSizeRight: pageSize }, () => {
                // 重新调用查询方法
                this.getDecocOrderData(this.state.rowId)
            })
        }

        // 页码改变的回调，参数是改变后的页码及每页条数
        PageChangeRight = (page, pageSize) => {
            this.setState({ pageRight: page, pageSizeRight: this.state.pageSizeRight }, () => {
                // 重新调用查询方法
                this.getDecocOrderData(this.state.rowId)
            });
        }
        //下拉选择页数
        onShowSizeChangeRight = (page, pageSize) => {
            this.setState({ pageRight: 1, pageSizeRight: pageSize }, () => {
                // 重新调用查询方法
                this.getDecocOrderData(this.state.rowId, "search")
            })
        }
        //根据煎药方式ID获取煎药方式医嘱项列表
        getDecocOrderData = (cookTypeID, search) => {
            const { pageRight, pageSizeRight } = this.state
            let data = {}
            data = {
                params: [{
                    cookTypeID: cookTypeID,
                    status: this.state.checked == true ? "Y" : "N"
                }],
                pagination: [{
                    pageSize: pageSizeRight,
                    currentPage: pageRight,
                }]
            }
            $http.post('urlS', this, {
                code: '02030066',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result.Data) {
                        res.result.Data.map((item, i) => {
                            res.result.Data.key == Number(i)
                        })
                        this.setState({
                            searchRight: search && search || "",
                            rightData: res.result.Data,
                            totalRight: res.result.TotalCount
                        })
                    }
                    // if(res.result.Data&&res.result.Data.length==0&&res.result.TotalCount>0){
                    //     let prevPage = this.state.page - 1
                    //     this.onChangeRight(prevPage, this.state.pageSize)
                    //   }
                }
            })
        }

        //点击Row 左侧表格
        onClickRow = (record) => {
            return {
                onClick: () => {
                    this.setState({
                        cookTypeID: record.cookTypeID,
                        centerInfo: {},
                        rowIds: "",
                        isDefalult: false
                    })
                    if (record.cookTypeID) {
                        if (this.state.rowId === "") {
                            this.setState({
                                rowId: record.cookTypeID,
                                topInfo: record,
                                pageRight: 1, 
                                pageSizeRight: 10
                            },()=>{
                                this.getDecocOrderData(record.cookTypeID, "search")
                            });
                        } else {
                            if (this.state.rowId !== record.cookTypeID) {
                                this.props.form.resetFields();
                                this.setState({
                                    rowId: record.cookTypeID,
                                    topInfo: record,
                                    pageRight: 1, 
                                    pageSizeRight: 10
                                },()=>{
                                    this.getDecocOrderData(record.cookTypeID, "search")
                                });
                            } else {
                                this.props.form.resetFields();
                                this.setState({
                                    rowId: "",
                                    topInfo: {},
                                    cookTypeID: "",
                                    pageRight: 1, 
                                    pageSizeRight: 10
                                },()=>{
                                    this.getDecocOrderData(record.cookTypeID, "search")
                                });
                                // this.child.initOrig()
                            }
                        }
                    }
                },
                onDoubleClick: () => {
                    this.setState({
                        rowId: "",
                        topInfo: {},
                        cookTypeID: "",
                        rightData: []
                    });
                    this.props.form.resetFields();
                    // this.child.handletTopCancel()
                }
            };
        }
        //返回添加状态
        initOrigin = () => {
            this.setState({
                rowId: "",
                rowIds: "",
                cookTypeID: "",
                isDefalult: false,
                centerInfo: {},
                rightData: []
            })
            this.props.form.resetFields()
        }
        //设置点击row颜色 --左侧表格
        setRowClassName = (record) => {
            return record.cookTypeID === this.state.rowId ? 'clickRowStyle' : '';
        }

        //点击右侧表格行
        onClickRightRow = (record) => {
            const { rightData } = this.state
            return {
                onClick: () => {
                    this.setState({
                        centerInfo: {},
                        isDefalult: false,
                    })
                    // this.getPublicLocSelect(record.linkID)
                    this.props.form.resetFields();
                    if (record.linkID) {
                        if (this.state.rowIds === "") {
                            this.setState({
                                rowIds: record.linkID,
                                centerInfo: record,
                                medItemID: record.medItemID,
                                isDefalult: record.defaultFlag == "Y" ? true : false
                            });
                            //   this.getDecocOrderData(record.cookTypeID)
                        } else {
                            if (this.state.rowIds !== record.linkID) {
                                this.setState({
                                    rowIds: record.linkID,
                                    centerInfo: record,
                                    isDefalult: record.defaultFlag == "Y" ? true : false,
                                    medItemID: record.medItemID,

                                });
                                // this.getDecocOrderData(record.cookTypeID)
                            } else {
                                this.setState({
                                    rowIds: "",
                                    centerInfo: {},
                                    isDefalult: false
                                    //   ordShow:false
                                });
                                this.propsfrom.resetFields()
                                // this.props.form.resetFields();
                            }
                        }
                    }
                },
            }
        }
        setRowClassNames = (record) => {
            return record.linkID === this.state.rowIds ? 'clickRowStyle' : '';
        }
        handleRightCancel = () => {
            this.setState({
                centerInfo: {}
            })
            this.props.form.resetFields()
        }
        handleRightOk = () => {
            this.props.form.validateFields((err, values) => {
                if (!err) {
                    let data = {}
                    if (this.state.rowIds) {
                        data = {
                            params: [{
                                updateUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                                hospID: values.hospID || "",
                                cookTypeID: this.state.rowId,
                                linkID: this.state.rowIds || "",
                                medItemID: this.state.medItemID,
                                billModel: values.billModal || "",
                                minQty: values.minQty || "",
                                maxQty: values.maxQty || "",
                                qty: values.qty || "",
                                factor: values.factor || "",
                                startDate: values.getDateFrom ? moment(values.getDateFrom).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD'),
                                stopDate: values.getDateTo ? moment(values.getDateTo).format('YYYY-MM-DD') : "",
                            }],
                        }
                    } else {
                        data = {
                            params: [{
                                updateUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                                hospID: values.hospID || "",
                                cookTypeID: this.state.rowId,
                                linkID: this.state.rowIds || "",
                                medItemID: this.state.medItemID,
                                billModel: values.billModal || "",
                                minQty: values.minQty || "",
                                maxQty: values.maxQty || "",
                                qty: values.qty || "",
                                factor: values.factor || "",
                                startDate: values.getDateFrom ? moment(values.getDateFrom).format('YYYY-MM-DD') : moment().format('YYYY-MM-DD'),
                                stopDate: values.getDateTo ? moment(values.getDateTo).format('YYYY-MM-DD') : "",
                            }],
                        }
                    }
                    $http.post('urlS', this, {
                        code: this.state.rowIds ? '02030068' : "02030065",
                        data: data,
                        success: function (res) {
                            if (+res.errorCode === 0) {
                                if (this.state.rowIds) {
                                    message.success("修改成功")
                                    if ((values.getDateFrom && values.getDateFrom) && (values.getDateTo && values.getDateTo)) {
                                        if (moment(values.getDateTo).format('YYYYMMDD') < moment().format('YYYYMMDD')) {
                                            this.getDecocOrderData(this.state.rowId)
                                            return
                                        }
                                    }
                                    this.setState({
                                        checkedRight: true,
                                    })
                                    this.getDecocOrderData(this.state.rowId)
                                } else {
                                    message.success("添加成功")
                                    this.props.form.resetFields()
                                    this.setState({
                                        cookTypeID: this.state.rowId
                                    })
                                    if ((values.getDateFrom && values.getDateFrom) && (values.getDateTo && values.getDateTo)) {
                                        if (moment(values.getDateTo).format('YYYYMMDD') < moment().format('YYYYMMDD')) {
                                            this.setState({
                                                checkedRight: false,
                                            })
                                            this.getDecocOrderData(this.state.rowId)
                                            return
                                        }
                                    }
                                    this.setState({
                                        checkedRight: true,
                                        cookTypeID: this.state.rowId
                                    })
                                    this.getDecocOrderData(this.state.rowId)
                                }
                            }
                        }
                    })
                }
            })
        }
        canSave = (id) => {
            this.setState({
                canSave: false,
                cookTypeID: id
            })
        }
        handleTemDaCancel = () => {
            this.setState({
                OrdDaShow: false
            })
        }
        //删除对照医嘱项
        delate = (e, record) => {
            let data = {}
            data = {
                params: [{
                    updateUserID: sessionStorage.userData ? JSON.parse(sessionStorage.userData).userID : "",
                    linkID: record.linkID,
                }],
            }
            $http.post('urlS', this, {
                code: '02030067',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success("删除成功")
                        this.getDecocOrderData(this.state.rowId)
                        this.setState({
                            rowIds: "",
                            centerInfo: {},
                            isDefalult: false
                            //   ordShow:false
                        });
                        this.propsfrom.resetFields()
                    }
                }
            })
        }
        //点击是否生效
        changeChecked = (e) => {
            this.setState({
                checked: e.target.checked
            }, () => {
                this.getDecocOrderData(this.state.rowId)
            })
        }
        //初始化信息
        initData = () => {
            this.setState({
                isMod: -1,
                ordShow: false,
                tempChildDis: false
            })
            this.props.form.setFieldsValue({ docMesName: undefined });
            this.props.form.setFieldsValue({ othName: undefined });
            this.props.form.setFieldsValue({ docMesType: undefined });
        }


        render() {
            //左侧查询数据表
            const leftDetailColumns = [
                {
                    align: "center",
                    title: '煎药方式代码',
                    dataIndex: 'cookTypeCode',
                    key: '1',
                    width: 100,

                },
                {
                    align: "center",
                    width: '100px',
                    title: '煎药方式描述',
                    dataIndex: 'cookTypeDesc',
                    key: '2',
                },
            ];
            //右侧医嘱项表格
            const rightColumns = [
                {
                    align: "center",
                    title: '医嘱项代码',
                    dataIndex: 'medItemCode',
                    key: '0',
                }, {
                    align: "center",
                    title: '医嘱项描述',
                    dataIndex: 'medItemDesc',
                    key: '1',
                }, {
                    align: "center",
                    title: '医院描述',
                    dataIndex: 'hospDesc',
                    key: '2',
                }, {
                    align: "center",
                    title: '数量',
                    dataIndex: 'qty',
                    key: '5',
                }, {
                    align: "center",
                    title: '最小数量',
                    dataIndex: 'minQty',
                    key: '3',
                }, {
                    align: "center",
                    title: '最大数量',
                    dataIndex: 'maxQty',
                    key: '4',
                },
                {
                    align: "center",
                    title: '状态',
                    dataIndex: 'status',
                    key: '5',
                    render: (text, record, index) => {
                        if (text == "Y") {
                            return "生效"
                        } else {
                            return "失效"
                        }
                    },
                }, {
                    title: '操作',
                    dataIndex: '',
                    key: '6',
                    align: "center",
                    width: 200,
                    render: (text, record, index) => {
                        return (
                            <span>
                                <Popconfirm title="删除不可恢复，你确定要删除吗?" onCancel={this.handlePopcon} onConfirm={(e) => this.delate(e, record)} >
                                    <span className='span' style={{ cursor: "pointer" }} style={{ color: 'rgba(240,65,52,1)' }}>删除</span>
                                </Popconfirm>
                            </span>
                        )
                    }
                }

            ];
            const { getFieldDecorator } = this.props.form;
            let { centerInfo } = this.state
            const publicBillArr = [
                {
                    key: "1",
                    id: "P",
                    descripts: "处方",
                    code: "10",
                }, {
                    key: "2",
                    id: "D",
                    descripts: "付",
                    code: "11",
                }
            ]
            //医院
            let hosOp = []
            this.state.hospArr && this.state.hospArr.map(item => {
                hosOp.push(<Option key={item.id} value={String(item.id)}>{item.descripts}</Option>)
            })
            //计费方式
            let billOp = []
            publicBillArr && publicBillArr.map(item => {
                billOp.push(<Option key={item.id} role={item.descripts + '^' + item.descripts} title={item.descripts} value={String(item.id)}>{item.descripts}</Option>)
            })
            return (
                <div>
                    <Row gutter={60} className="majorCategoriesDom" style={{ marginRight: "0" }}>
                        <Col span={8} style={{ paddingRight: "0" }}>
                            <Card title="煎药方式列表" bordered={false} style={{ marginRight: "4px", }} className="configDeTemDom">
                                <Table
                                    className="components-table-demo-nested"
                                    columns={leftDetailColumns}
                                    pagination={false}
                                    rowClassName={this.setRowClassName}
                                    onRow={this.onClickRow}
                                    rowKey={record => record.key}
                                    dataSource={this.state.leftData}
                                />
                                <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search={this.state.search}
                                    onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.leftData}
                                    onChange={this.PageChange.bind(this)} />

                                {/* {
                                    this.state.leftData && this.state.leftData.length > 0 ? <Pagination
                                        size="small"
                                        showQuickJumper
                                        showSizeChanger
                                        defaultCurrent={1}
                                        current={this.state.page}
                                        total={this.state.total}
                                        onChange={this.PageChange}
                                        onRow={this.selectID}
                                        onShowSizeChange={this.onShowSizeChange}
                                        style={{ textAlign: "right", marginTop: '10px' }}
                                        showTotal={() => this.showTotal(this.state.total)}
                                    /> : ""
                                } */}

                            </Card>
                        </Col>
                        <Col span={16} style={{ paddingLeft: "6px", paddingRight: "0" }}>
                            <Card title={this.state.rowIds && this.state.rowIds ? "编辑煎药方式费用对照" : "添加煎药方式费用对照"} bordered={false} className="moreInfoCard configDeTemDom" style={{ paddingRight: "0" }}>
                                <div>
                                    <Form>
                                        <Row gutter={60}>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='医院'>
                                                    {getFieldDecorator('hospID', {
                                                        initialValue: centerInfo && centerInfo.hospID ? String(centerInfo.hospID) : undefined,
                                                        rules: [{ required: true, message: '请选择医院' }],
                                                    })(
                                                        <Select
                                                        >
                                                            {hosOp}
                                                        </Select>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='计费模式'>
                                                    {getFieldDecorator('billModal', {
                                                        initialValue: centerInfo && centerInfo.billModel ? centerInfo.billModel : undefined,
                                                        rules: [{ required: true, message: '请选择计费模式' }],
                                                    })(
                                                        <Select
                                                            optionFilterProp="role"
                                                        >
                                                            {billOp}
                                                        </Select>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='数量'>
                                                    {getFieldDecorator('qty', {
                                                        initialValue: centerInfo && centerInfo.qty ? centerInfo.qty : undefined,
                                                        rules: [{ required: true, message: '请输入数量' }],
                                                        getValueFromEvent: (event) => {
                                                            return event.target.value.replace(/\D|^0/g, '')
                                                        },
                                                    })(
                                                        <Input></Input>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='最大数量'>
                                                    {getFieldDecorator('maxQty', {
                                                        initialValue: centerInfo && centerInfo.maxQty ? centerInfo.maxQty : undefined,
                                                        rules: [{ required: false, message: '' }],
                                                        getValueFromEvent: (event) => {
                                                            return event.target.value.replace(/\D|^0/g, '')
                                                        },
                                                    })(
                                                        <Input ></Input>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={4} style={paddRightCol}>
                                                <FormItem {...formItemLayoutNumber} label='最小数量'>
                                                    {getFieldDecorator('minQty', {
                                                        initialValue: centerInfo && centerInfo.minQty ? centerInfo.minQty : undefined,
                                                        rules: [{ required: false, message: '' }],
                                                        getValueFromEvent: (event) => {
                                                            return event.target.value.replace(/\D|^0/g, '')
                                                        },
                                                    })(
                                                        <Input ></Input>
                                                    )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row gutter={60}>

                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='医嘱项'>
                                                    {getFieldDecorator('orderItem', {
                                                        initialValue: centerInfo && centerInfo.medItemDesc ? centerInfo.medItemDesc : undefined,
                                                        rules: [{ required: true, message: '请输入检索医嘱项' }],
                                                    })(
                                                        <Input placeholder="输入内容回车检索医嘱项" onChange={this.handleValue} onPressEnter={this.handleOrderItem}></Input>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem {...formItemLayoutType} label='系数'>
                                                    {getFieldDecorator('factor', {
                                                        initialValue: centerInfo && centerInfo.factor ? centerInfo.factor : undefined,
                                                        rules: [{ required: false, message: '' },],
                                                        getValueFromEvent: (event) => {
                                                            return event.target.value.replace(/\D|^0/g,'',)
                                                        },
                                                    })(
                                                        <Input ></Input>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem label='生效日期' {...formItemLayoutType}>
                                                    {getFieldDecorator('getDateFrom', {
                                                        initialValue: centerInfo && centerInfo.startDate ? moment(centerInfo.startDate, "YYYY-MM-DD") : moment(),
                                                        rules: [{ required: true, message: '请选择生效日期' }],
                                                    })(
                                                        <DatePicker style={{ width: '100%' }} placeholder={'生效日期'} disabledDate={(curDate) => {
                                                            return curDate && curDate > moment().endOf('day');
                                                        }} />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={5} style={paddRightCol}>
                                                <FormItem label='失效日期' {...formItemLayoutType}>
                                                    {getFieldDecorator('getDateTo', {
                                                        initialValue: centerInfo && centerInfo.stopDate ? moment(centerInfo.stopDate, "YYYY-MM-DD") : undefined,
                                                        rules: [{ required: false, message: '' }],
                                                    })(
                                                        <DatePicker style={{ width: '100%' }} placeholder={'失效日期'} />
                                                    )}
                                                </FormItem>
                                            </Col >
                                        </Row>
                                    </Form>
                                </div>
                                <Col span={24} style={{ textAlign: "right", zIndex: "1" }}>
                                    <Button key="submitc" type="primary" disabled={this.state.rowId == ""} onClick={this.handleRightCancel}>清空</Button>
                                    <Button key="submits" style={{ margin: "0 12px 0 10px" }} type="primary" disabled={this.state.rowId == ""} onClick={this.handleRightOk}>保存</Button>
                                    <Checkbox checked={this.state.checked} onChange={this.changeChecked}>仅显示生效</Checkbox>
                                </Col>
                                <Table
                                    columns={rightColumns}
                                    pagination={false}
                                    rowClassName={this.setRowClassNames}
                                    onRow={this.onClickRightRow}
                                    dataSource={this.state.cookTypeID && this.state.cookTypeID ? this.state.rightData : []}
                                    className="clearBackground"
                                />
                                <CommonPagination size={this.state.sizeRight} current={this.state.pageRight} total={this.state.totalRight} search={this.state.searchRight}
                                    onShowSizeChange={this.onShowSizeChangeRight.bind(this)} complete={true} dataSource={this.state.rightData}
                                    onChange={this.PageChangeRight.bind(this)} />
                                {/* {
                                    this.state.rightData && this.state.rightData.length > 0 ? <Pagination
                                        size="small"
                                        showQuickJumper
                                        showSizeChanger
                                        defaultCurrent={1}
                                        current={this.state.pageRight}
                                        total={this.state.totalRight}
                                        onChange={this.PageChangeRight}
                                        // onRow={this.selectID}
                                        onShowSizeChange={this.onShowSizeChangeRight}
                                        style={{ textAlign: "right", marginTop: '10px' }}
                                        showTotal={() => this.showTotalRight(this.state.totalRight)}
                                    /> : ""
                                } */}
                            </Card>
                        </Col>
                    </Row>
                    <DecoctingOrderModal OnChildrefs={this.OnChildrefs} handleParms={this.handleParms}></DecoctingOrderModal>
                </div>
            )
        }
    })
export default DecoctingMethodAndOrder