// 物资库存转移制单
import React from 'react';
import { Card, Row, Col, Form, DatePicker, Select, Input, Button, message, Popconfirm, Icon } from 'antd';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import ShiftDetailList from './component/ShiftDetailList.jsx';
import InquireShift from './component/InquireShift.jsx';
import SelectRequisition from './component/SelectRequisition.jsx';
import './style/index.less';
import { printTransfer } from '../commonPrint/stkPrint';

const { Option } = Select;
const { TextArea } = Input;

const ShiftVouching = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: {},
                SelectData: {}, // 下拉框数据
                detailInfo: [], // 明细列表数据
                rowId: '', // 入库单Id
                pageSize: 10,
                page: 1,
                User: JSON.parse(window.sessionStorage.userData),
                statusCode: '',
                statusId: '',
                inOpLocDr: '',
                toLocDr: '',
                stkCat: '',
                filterLoc: JSON.parse(window.sessionStorage.userData).locID,
                showPopup: true,
                ChineseEnglishSize: {},
                count: 0
            };
            this.myRef1 = React.createRef();
            this.myRef2 = React.createRef();
            this.myRef3 = React.createRef();
            this.myRef4 = React.createRef();
            this.myRef5 = React.createRef();
            this.myRef6 = React.createRef();
            this.myRef7 = React.createRef();
            this.myRef8 = React.createRef();
            this.myRef9 = React.createRef();
        }

        componentDidMount() {
            // 初始化数据
            this.getSelectData();
            this.getInOpLocDr();
        }

        componentWillUnmount() {
            // 组件销毁前将静止让setState修改state的状态，防止内存泄漏
            this.setState = (state, callback) => { return; }
        }

        onRef = (ref) => {
            this.childModal = ref;
        }

        detailOnRef = (ref) => {
            this.childDetail = ref;
        }

        onSelectRef = (ref) => {
            this.childSelect = ref;
        }

        // 获取下拉框的数据
        getSelectData() {
            let data = {
                params: []
            };
            $http.post('urlS', this, {
                code: "02060016",
                data: data,
                success: function (res) {
                    // console.log('res', res)
                    if (+res.errorCode === 0) {
                        this.setState({ SelectData: res }, () => {
                            if (res.params && res.params.autoLoadRequest == '1') {
                                let data = {
                                    params: [
                                        {
                                            begin: this.state.SelectData.params ? Moment(this.state.SelectData.params.startDate).format('YYYY-MM-DD') : '',
                                            end: this.state.SelectData.params ? Moment(this.state.SelectData.params.endDate).format('YYYY-MM-DD') : '',
                                            stateID: '20',
                                            toLocID: undefined,
                                            frLocID: undefined,
                                            transStatus: 0
                                        }
                                    ],
                                    pagination: [
                                        {
                                            pageSize: this.state.pageSize,
                                            currentPage: this.state.page,
                                            sort: "",
                                            dir: "",
                                        }
                                    ],
                                };
                                $http.post('urlS', this, {
                                    code: "02020112",
                                    data: data,
                                    success: function (res) {
                                        if (res.rows.length > 0) {
                                            this.selectRequisition();
                                        }
                                    }
                                });
                            }
                        });
                    } else {
                        this.setState({ SelectData: {} })
                    }
                }
            })
        }

        // 保存
        saveHandle = () => {
            let { ChineseEnglishSize } = this.state;
            if (this.childDetail.state.data.length < 1) {
                message.error(ChineseEnglishSize.MaterialInventoryTransferFormdetailUnitTips ? ChineseEnglishSize.MaterialInventoryTransferFormdetailUnitTips.descripts : "明细列表不能为空")
            } else {
                this.props.form.validateFields((errors, values) => {
                    let obj = JSON.parse(JSON.stringify(values));
                    if (errors == null) {
                        let remark = this.props.form.getFieldValue('remark2');
                        let listId = this.childModal.state.rowId ? this.childModal.state.rowId : this.state.userInfo.transID;
                        let data = {
                            params: [{
                                transID: listId ? listId : '',
                                frLocID: obj.frLoc ? obj.frLoc : '',
                                toLocID: obj.toLoc ? obj.toLoc : '',
                                stkCatID: obj.stkCat ? obj.stkCat : '',
                                remark: remark ? remark : '',
                                operTypeID: obj.operType ? obj.operType : '',
                                detail: this.childDetail.state.data
                            }]
                        };
                        $http.post('urlS', this, {
                            code: "02060017",
                            data: data,
                            success: function (res) {
                                if (+res.errorCode === 0) {
                                    // 成功提示
                                    message.success(res.errorMessage);
                                    this.setState({ statusCode: res.result.main.stateID, statusId: res.result.main.transID });
                                    this.childModal.setState({ tableData: [], total: 0 });
                                    this.getEchoData(res.result.main.transID);
                                } else {
                                    this.getEchoData(this.childModal.state.rowId);
                                }
                            },
                            error: function (err) {
                                console.log(err)
                            }
                        })
                    }
                })
            }
        }

        // 保存成功后根据返回回来的inOperateID重新查找数据
        getEchoData(id) {
            // 重置表单
            this.props.form.resetFields(); //清空所有
            this.setState({ rowId: id }); // 将行id保存起来
            let data = {
                params: [
                    {
                        transID: id
                    }
                ],
                pagination: [
                    {
                        pageSize: this.state.pageSize,
                        currentPage: this.state.page,
                    }
                ],
            };
            $http.post('urlS', this, {
                code: "02060019",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        for (let i = 0; i < res.detail.rows.length; i++) {
                            res.detail.rows[i].key = i + "main";
                        }
                        this.setState({ userInfo: res.main, detailInfo: res.detail.rows, count: res.detail.total }, () => {
                            console.log("count", this.state.count)
                        });
                        // this.props.form.setFieldsValue(res.result[0].mainInfo[0]); // 将查询出来的数据回显
                    } else {
                        this.setState({ userInfo: {}, detailInfo: [], count: 0 });
                    }
                }
            })
        }

        // 获取到部门的值
        getInOpLocDr = () => {
            let inOpLocDr = this.props.form.getFieldValue('frLoc');
            let toLocDr = this.props.form.getFieldValue('toLoc');
            let stkCat = this.props.form.getFieldValue('stkCat');
            this.setState({ inOpLocDr: inOpLocDr, toLocDr: toLocDr, stkCat: stkCat });
            return inOpLocDr
        }

        changeStkCat = (v) => {
            this.setState({ stkCat: v })
        }

        changesDesc = (v) => {
            this.setState({ inOpLocDr: v })
        }

        changeToLoc = (v) => {
            this.setState({ toLocDr: v })
        }

        // 点击查询显示弹框
        inquireHandle = () => {
            this.getInOpLocDr();
            this.childModal.showModal(this.state.ChineseEnglishSize);
        }

        //显示选取请求单
        selectRequisition = () => {
            this.getInOpLocDr();
            this.childSelect.showModal(this.state.SelectData, this.state.ChineseEnglishSize);
        }

        // 重置所有内容
        resetFieldsAll() {
            this.props.form.resetFields(); //清空所有
            this.setState({ userInfo: {}, detailInfo: [], rowId: "", statusId: '', filterLoc: '', count: 0 });
            this.childDetail.resetFields();
            this.childDetail.deleteData();
            this.childModal.handleUncheck();
            this.childModal.setState({ tableData: [] });
        }

        // 重置表单
        resetFields = () => {
            this.resetFieldsAll()
        }

        // 删除
        handleDelete = () => {
            let data2 = {
                params: {
                    detail: [{
                        transDetailID: this.childDetail.state.userInfo && this.childDetail.state.userInfo.PODetailID ? this.childDetail.state.userInfo.PODetailID : undefined,
                    }]
                }
            };
            let data3 = {
                params: {
                    main: [
                        {
                            transID: this.childModal.state.rowId ? this.childModal.state.rowId : this.state.userInfo.transID ? this.state.userInfo.transID : undefined,
                        }
                    ]
                }
            };
            $http.post('urlS', this, {
                code: "02060021",
                data: this.childDetail.state.userInfo && this.childDetail.state.userInfo.PODetailID ? data2 : data3,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success(res.errorMessage);
                        this.resetFieldsAll();
                        this.childModal.setState({ tableData: [], total: 0, userInfo: {} })
                    }
                }
            })
        }

        //完成
        accomplish = () => {
            let userPOID = this.state.userInfo.transID ? this.state.userInfo.transID : undefined;
            let data = {
                params: [{
                    transID: this.state.statusId ? this.state.statusId : userPOID
                }]
            };
            $http.post('urlS', this, {
                code: "02060022",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success(res.errorMessage);
                        this.setState({ statusCode: '' });
                        this.getEchoData(res.result.main.transID);
                        this.childModal.setState({ tableData: [], total: 0 })
                    }
                }
            })
        }

        //取消完成
        offAccomplish = () => {
            let userPOID = this.state.userInfo.transID ? this.state.userInfo.transID : undefined;
            let data = {
                params: [{
                    transID: this.state.statusId ? this.state.statusId : userPOID
                }]
            };
            $http.post('urlS', this, {
                code: "02060023",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        message.success(res.errorMessage);
                        this.getEchoData(res.result.main.transID);
                        this.childModal.setState({ tableData: [], total: 0 })
                    }
                }
            })
        }

        //请求单弹窗双击后需要请求的数据
        onDoubleClickRequisition = (id) => {
            let data = {
                params: [
                    {
                        stkReqID: id
                    }
                ]
            };
            $http.post('urlS', this, {
                code: "02060149",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        for (let i = 0; i < res.result.detail.rows.length; i++) {
                            res.result.detail.rows[i].key = i + "main";
                        }
                        this.setState({ userInfo: res.result.main, detailInfo: res.result.detail.rows });
                        message.success(res.errorMessage);
                        this.childDetail.setState({ userInfo: {}, getBatchDetail: {} });
                        this.childSelect.setState({ getBatchDetail: [] })
                    } else {
                        this.setState({ userInfo: {}, detailInfo: [] });
                        this.childDetail.setState({ userInfo: {}, getBatchDetail: {} });
                        this.childSelect.setState({ getBatchDetail: [] })
                    }
                }
            })
        }

        //筛选科室
        filterLoc = (e) => {
            this.setState({ filterLoc: e });
            this.changesDesc(e);
        }

        show = () => {
            this.setState({ showPopup: false })
        }

        getDetailTableColumns = (v) => {
            this.setState({ ChineseEnglishSize: v })
        }

        // 获取供给科室
        getFrLoc = () => {
            let frLoc = this.props && this.props.form && this.props.form.getFieldValue('frLoc') ? this.props.form.getFieldValue('frLoc') : undefined;
            return frLoc;
        }

        // 明细列表导出
        exportTableData = () => {
            this.childDetail && this.childDetail.exportTableData && this.childDetail.exportTableData();
        }

        render() {
            const formItemInput = {
                labelCol: { span: 6 },
                wrapperCol: { span: 18 },
            };
            let { ChineseEnglishSize, User } = this.state;
            const { getFieldDecorator } = this.props.form;
            let userInfo = this.state.userInfo ? this.state.userInfo : {};
            let user = this.state.User.locID ? this.state.User.locID : undefined;
            let userStatusCode = this.state.userInfo.stateID ? this.state.userInfo.stateID : '';
            return (
                <div className="ShiftVouching">
                    <Card
                        size="small"
                        title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.MaterialInventoryTransferForminventoryTransferDocument ? ChineseEnglishSize.MaterialInventoryTransferForminventoryTransferDocument.descripts : '库存转移制单'}</div>}
                    >
                        <Row>
                            <Col span={18} className="top-form">
                                <Form>
                                    <Row>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormfrLoc ? ChineseEnglishSize.MaterialInventoryTransferFormfrLoc.descripts : '供给科室：'} {...formItemInput}>
                                                {getFieldDecorator('frLoc', {
                                                    initialValue: userInfo.frLocID ? userInfo.frLocID + '' : user,
                                                    rules: [{ required: ChineseEnglishSize.MaterialInventoryTransferFormfrLoc ? ChineseEnglishSize.MaterialInventoryTransferFormfrLoc.required == 'Y' ? true : false : false, message: ChineseEnglishSize.MaterialInventoryTransferFormfrLoc ? ChineseEnglishSize.MaterialInventoryTransferFormfrLoc.message : '供给科室不能为空' }]
                                                })(
                                                    <Select showSearch allowClear placeholder={ChineseEnglishSize.MaterialInventoryTransferFormfrLocTips ? ChineseEnglishSize.MaterialInventoryTransferFormfrLocTips.descripts : '请选择供给科室'} onChange={this.filterLoc}>
                                                        {this.state.SelectData.loc && this.state.SelectData.loc.map(item => {
                                                            return <Option key={item.id} value={item.id} >{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormtransNO ? ChineseEnglishSize.MaterialInventoryTransferFormtransNO.descripts : '转移单号：'} {...formItemInput}>
                                                {getFieldDecorator('transNO', {
                                                    initialValue: userInfo.transNO ? userInfo.transNO : undefined,
                                                })(
                                                    <Input placeholder={ChineseEnglishSize.MaterialInventoryTransferFormtransNO ? ChineseEnglishSize.MaterialInventoryTransferFormtransNO.message : '请输入转移单号'} disabled />
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormNo ? ChineseEnglishSize.MaterialInventoryTransferFormNo.descripts : '请求单号：'} {...formItemInput}>
                                                {getFieldDecorator('No', {
                                                    initialValue: userInfo.stkReqNO ? userInfo.stkReqNO : undefined,
                                                    rules: [{ required: false, message: ChineseEnglishSize.MaterialInventoryTransferFormNo ? ChineseEnglishSize.MaterialInventoryTransferFormNo.message : '请求单号不能为空' }]
                                                })(
                                                    <Input disabled />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormtoLoc ? ChineseEnglishSize.MaterialInventoryTransferFormtoLoc.descripts : '请求科室：'} {...formItemInput}>
                                                {getFieldDecorator('toLoc', {
                                                    initialValue: userInfo.toLocID ? userInfo.toLocID + '' : undefined,
                                                    rules: [{ required: ChineseEnglishSize.MaterialInventoryTransferFormtoLoc ? ChineseEnglishSize.MaterialInventoryTransferFormtoLoc.required == 'Y' ? true : false : false, message: ChineseEnglishSize.MaterialInventoryTransferFormtoLoc ? ChineseEnglishSize.MaterialInventoryTransferFormtoLoc.message : '请求科室不能为空' }]
                                                })(
                                                    <Select showSearch allowClear onChange={this.changeToLoc} optionFilterProp="seatchprop"
                                                        placeholder={ChineseEnglishSize.MaterialInventoryTransferFormtoLocTips ? ChineseEnglishSize.MaterialInventoryTransferFormtoLocTips.descripts : '请选择请求科室'}>
                                                        {this.state.SelectData.toLoc && this.state.SelectData.toLoc.map(item => {
                                                            return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormcrStartDate ? ChineseEnglishSize.MaterialInventoryTransferFormcrStartDate.descripts : '制单时间：'} {...formItemInput}>
                                                {getFieldDecorator('StartDate', {
                                                    initialValue: userInfo.createDate ? Moment(userInfo.createDate, 'YYYY-MM-DD') : Moment(),
                                                })(
                                                    <DatePicker style={{ width: '100%' }} format="YYYY-MM-DD" disabled />
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormremark2 ? ChineseEnglishSize.MaterialInventoryTransferFormremark2.descripts : '备注：'} {...formItemInput}>
                                                {getFieldDecorator('remark2', {
                                                    initialValue: userInfo.remark ? userInfo.remark : undefined,
                                                })(
                                                    <TextArea rows={1} style={{ width: '100%' }} />
                                                )}
                                            </Form.Item>
                                        </Col>
                                    </Row>
                                    <Row>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormstkCatID ? ChineseEnglishSize.MaterialInventoryTransferFormstkCatID.descripts : '库存大类：'} {...formItemInput}>
                                                {getFieldDecorator('stkCat', {
                                                    initialValue: userInfo.stkCatID ? userInfo.stkCatID + '' : undefined,
                                                    rules: [{ required: ChineseEnglishSize.MaterialInventoryTransferFormstkCatID ? ChineseEnglishSize.MaterialInventoryTransferFormstkCatID.required == 'Y' ? true : false : false, message: ChineseEnglishSize.MaterialInventoryTransferFormstkCatID ? ChineseEnglishSize.MaterialInventoryTransferFormstkCatID.message : '库存大类不能为空' }]
                                                })(
                                                    <Select showSearch allowClear optionFilterProp="seatchprop" placeholder={ChineseEnglishSize.MaterialInventoryTransferFormstkCatTips ? ChineseEnglishSize.MaterialInventoryTransferFormstkCatTips.descripts : '请选择库存大类'} onChange={this.changeStkCat}>
                                                        {this.state.SelectData.stkCat && this.state.SelectData.stkCat.map(item => {
                                                            return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.StockTransferMakingFormOutbound ? ChineseEnglishSize.StockTransferMakingFormOutbound.descripts : '出库类型'}{...formItemInput}>
                                                {getFieldDecorator('operType', {
                                                    initialValue: userInfo.operTypeID ? userInfo.operTypeID + '' : undefined,
                                                    rules: [{ required: ChineseEnglishSize.StockTransferMakingFormOutbound ? ChineseEnglishSize.StockTransferMakingFormOutbound.required == 'Y' ? true : false : false, message: ChineseEnglishSize.StockTransferMakingFormOutbound ? ChineseEnglishSize.StockTransferMakingFormOutbound.message : '出库类型不能为空' }]
                                                })(
                                                    <Select showSearch allowClear optionFilterProp="seatchprop" placeholder={ChineseEnglishSize.StockTransferMakingFormdelivery ? ChineseEnglishSize.StockTransferMakingFormdelivery.descripts : '请选择出库类型'}>
                                                        {this.state.SelectData.operType && this.state.SelectData.operType.map(item => {
                                                            return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>
                                        <Col span={8}>
                                            <Form.Item label={ChineseEnglishSize.MaterialInventoryTransferFormstatus ? ChineseEnglishSize.MaterialInventoryTransferFormstatus.descripts : '单据状态：'} {...formItemInput}>
                                                {getFieldDecorator('stkCat2', {
                                                    initialValue: userInfo.stateID ? userInfo.stateID : undefined,
                                                    rules: [{ required: false }]
                                                })(
                                                    <Select showSearch allowClear disabled optionFilterProp="seatchprop">
                                                        {this.state.SelectData.state && this.state.SelectData.state.map(item => {
                                                            return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </Form.Item>
                                        </Col>

                                    </Row>
                                </Form>
                            </Col>
                            <Col span={5} style={{ marginLeft: '33px' }}>
                                <Row style={{ marginBottom: '20px', marginTop: '5px' }}>
                                    <Button style={{ marginRight: '30px' }} onClick={this.inquireHandle}>{ChineseEnglishSize.MaterialInventoryTransferFormsearch ? ChineseEnglishSize.MaterialInventoryTransferFormsearch.descripts : '查询'}</Button>
                                    <Button type="primary" style={{ marginRight: '30px' }} onClick={this.saveHandle}>{ChineseEnglishSize.MaterialInventoryTransferFormsave ? ChineseEnglishSize.MaterialInventoryTransferFormsave.descripts : '保存'}</Button>
                                    <Button disabled={this.state.statusCode == 10 ? false : userStatusCode == 10 ? false : true} onClick={this.accomplish}>{ChineseEnglishSize.MaterialInventoryTransferFormaccomplish ? ChineseEnglishSize.MaterialInventoryTransferFormaccomplish.descripts : '完成'}</Button>
                                </Row>
                                <Row>
                                    <Popconfirm title={ChineseEnglishSize.MaterialInventoryTransferFormresetTips ? ChineseEnglishSize.MaterialInventoryTransferFormresetTips.descripts : '重置后将初始化数据，你确定要重置吗?'} onConfirm={this.resetFields}
                                        okText={User.language == 'EN' ? "Yes" : '是'} cancelText={User.language == 'EN' ? "No" : '否'}
                                    >
                                        <Button style={{ marginRight: '30px' }} >{ChineseEnglishSize.MaterialInventoryTransferFormReset ? ChineseEnglishSize.MaterialInventoryTransferFormReset.descripts : '重置'}</Button>
                                    </Popconfirm>
                                    <Popconfirm title={ChineseEnglishSize.MaterialInventoryTransferFormdeleteTips ? ChineseEnglishSize.MaterialInventoryTransferFormdeleteTips.descripts : '删除不可恢复，你确定要删除吗?'} onConfirm={this.handleDelete}
                                        okText={User.language == 'EN' ? "Yes" : '是'} cancelText={User.language == 'EN' ? "No" : '否'}
                                    >
                                        <Button type="danger" style={{ marginRight: '30px' }}>{ChineseEnglishSize.MaterialInventoryTransferFormdelete ? ChineseEnglishSize.MaterialInventoryTransferFormdelete.descripts : '删除'}</Button>
                                    </Popconfirm>
                                    <Button disabled={this.state.statusCode == 20 ? false : userStatusCode == 20 ? false : true} onClick={this.offAccomplish}>{ChineseEnglishSize.MaterialInventoryTransferFormcancelComplete ? ChineseEnglishSize.MaterialInventoryTransferFormcancelComplete.descripts : '取消完成'}</Button>
                                </Row>
                                <Row style={{ marginTop: '20px' }}>
                                    <Button style={{ marginRight: '30px' }} onClick={() => { this.selectRequisition(); this.setState({ showPopup: false }) }}>{ChineseEnglishSize.MaterialInventoryTransferFormselectRequestForm ? ChineseEnglishSize.MaterialInventoryTransferFormselectRequestForm.descripts : '选取请求单'}</Button>
                                    <Button style={{ marginRight: '30px' }} type="dashed" onClick={printTransfer.bind(this, this.state.rowId)}>{ChineseEnglishSize.MaterialInventoryTransferFormprint ? ChineseEnglishSize.MaterialInventoryTransferFormprint.descripts : '打印'}</Button>
                                    <Button
                                        type="dashed"
                                        onClick={this.exportTableData}
                                    ><Icon type="export" />导出</Button>
                                </Row>
                            </Col>
                        </Row>
                    </Card>
                    <ShiftDetailList SelectData={this.state.SelectData}
                        count={this.state.count}
                        onRef={this.detailOnRef} detailInfo={this.state.detailInfo}
                        handleThis={this} inOpLocDr={this.state.inOpLocDr}
                        toLocDr={this.state.toLocDr} stkCat={this.state.stkCat}
                        getFrLoc={this.getFrLoc}
                    />
                    <InquireShift SelectData={this.state.SelectData} onRef={this.onRef} inOpLocDr={this.state.inOpLocDr ? this.state.inOpLocDr : ''} handleThis={this} toLocDr={this.state.toLocDr} />
                    <SelectRequisition SelectData={this.state.SelectData} onRef={this.onSelectRef} showPopup={this.state.showPopup} inOpLocDr={this.state.inOpLocDr ? this.state.inOpLocDr : ''} toLocDr={this.state.toLocDr} handleThis={this} />

                </div>
            )
        }
    }
);

export default ShiftVouching;