//药库调整统计报表
import React from 'react';
import { Card, Row, Radio, Col, Form, DatePicker, Select, Button, Input } from 'antd';
import { $http } from 'containers/config/https';
import Reports from '../../raqSoft/reportsEmbed';
import './style/index.less';
import Moment from 'moment';
import store from 'store';
import PublicModalTable from './../../common/PublicModalTable';
const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const formItemItem = {
    labelCol: { span: 10 },
    wrapperCol: { span: 14 }
};

const WarehousingSummaryMaintenance = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            const userInfo = sessionStorage.userData ? JSON.parse(sessionStorage.userData) : {}
            this.state = {
                selectData: {},
                userInfo: userInfo, //表单数据详情
                outPutListData: [],//输出信息列表
                pageSize: 10,
                page: 1,
                total: 0,
                language: JSON.parse(window.sessionStorage.userData),
                ChineseEnglishSize: [],
                raqName: '药品_库存调整统计.rpx',
                params: {},
                stockID: '', //药品名称id
            };
            this.locDesc = userInfo.locDesc;
            this.typeDesc = '';
            this.modalColumns = [
                {
                    key: 1,
                    title: this.state.userInfo.language == 'EN' ? 'Inventory item code' : '库存项代码',
                    dataIndex: 'stockCode',
                    align: "center",
                    width: '22%'
                },
                {
                    key: 2,
                    title: this.state.userInfo.language == 'EN' ? 'Inventory item description' : '库存项描述',
                    dataIndex: 'stockDesc',
                    align: "center",
                    width: '24%',
                },
                {
                    key: 5,
                    title: this.state.userInfo.language == 'EN' ? 'Inventory classification' : '库存分类',
                    dataIndex: 'stkSubCatDesc',
                    align: "center",
                    width: '16%',
                },
                {
                    key: 3,
                    title: this.state.userInfo.language == 'EN' ? 'Packing specification' : '包装规格',
                    dataIndex: 'stockSpec',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 6,
                    title: this.state.userInfo.language == 'EN' ? 'Basic unit' : '基本单位',
                    dataIndex: 'baseUnitDesc',
                    align: "center",
                    width: '12%',
                },
                {
                    key: 7,
                    title: this.state.userInfo.language == 'EN' ? 'Storage unit' : '入库单位',
                    dataIndex: 'purUnitDesc',
                    align: "center",
                }
            ]
        }
        componentDidMount() {
            // 初始化数据
            this.getSelectListData();
        }
        componentWillUnmount() {
            // 组件销毁前将静止让setState修改state的状态，防止内存泄漏
            this.setState = (state, callback) => { return; }
        }

        //清空表格内容
        resetFields = () => {
            this.props.form.resetFields();
            this.setState({ userInfo: {}, rowKey: '', rowData: '', stockID: '' });
        };
        handleReset = () => {
            this.resetFields();

        }
        //获取初始化页面的下拉列表数据
        getSelectListData = () => {
            $http.post('urlS', this, {
                code: "02020353",
                data: { params: [] },
                success: function (res) {
                    this.setState({ selectData: res.result });
                    //this.typeDesc=res.result.type[0].descripts;
                }
            });
        }
        // 根据表单获取列表数据
        searchInformation = () => {
            this.props.form.validateFields((err, values) => {
                if (err) {
                    return;
                }
                const params = {
                    locID: values.locID ? values.locID : undefined,
                    startDate: values.startDate ? Moment(values.startDate).format("YYYY-MM-DD") : undefined,
                    endDate: values.endDate ? Moment(values.endDate).format("YYYY-MM-DD") : undefined,
                    stkCatID: values.stkCatID ? values.stkCatID : "",
                    stkSubCatID: values.stkSubCatID ? values.stkSubCatID : "",
                    reasonID: values.reasonID ? values.reasonID : "",
                    stockID: this.state.stockID ? this.state.stockID : '',
                    number: values.number ? values.number : "",
                }
                const raqName = values.reportType ? values.reportType : this.state.raqName;
                // console.log({ params: params, raqName: raqName });
                this.setState({ params: params, raqName: raqName });
            })
        };
        onRef = (ref) => {
            this.child = ref;
        };
        // 获取描述列表数据
        getModalListData(alias) {
            let data = {
                params: [
                    {
                        stockAlias: alias, // 库存项描述别名
                        frLocID: this.state.frLocDr ? this.state.frLocDr : undefined
                    }
                ]
            };
            $http.post('urlS', this, {
                code: "02020042",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        for (var i = 0; i < res.result.length; i++) {
                            res.result[i].key = i
                        }
                        this.setState({ modalData: res.result })
                    } else {
                        this.setState({ modalData: [] })
                    }
                }
            })
        }
        // 描述回车事件
        stockDescOnPressEnter = (e) => {
            let top = document.getElementById('stock-desc').getBoundingClientRect().top + 40 + 'px';
            let left = document.getElementById('stock-desc').getBoundingClientRect().left + 100 + 'px';
            this.setState({
                top: top,
                left: left
            });
            this.getModalListData(e.target.value);
            this.child.showModal();
        };

        // 当描述失去焦点的时候
        stastockDescOnBlure = (e) => {
            if (this.state.ModalRowData && (e.target.value !== this.state.ModalRowData.stockDesc)) {
                this.props.form.setFieldsValue({ stockDesc: undefined });
            }
        };

        // 操作弹框
        onClickRowPublic = (record) => {
            return {
                onDoubleClick: () => {
                    this.confirmSelection(record);
                }
            }
        };
        // 双击选中行数据的回调
        confirmSelection = (record) => {
            // this.resetFields();
            this.setState({ ModalRowData: record }, () => {
                this.setState({ stockID: record.stockID });
                this.props.form.setFieldsValue({ stockDesc: record.stockDesc });
                // 关闭弹窗
                this.child.handleCancel();
            })
        };

        onchangeStock = (val) => {
            if (!val.target.value) {
                this.setState({ stockID: '' });
            }
        };
        render() {
            const { getFieldDecorator } = this.props.form;
            const { userInfo, ChineseEnglishSize, selectData } = this.state;
            let param = {
                width: '600px',
                top: this.state.top,
                left: this.state.left,
                columns: this.modalColumns,
                data: this.state.modalData,
                isOnRow: true,
                TableClassName: 'tab-placeholder',
            };
            return (
                <div className="WarehousingSummaryMaintenance">
                    <Row>
                        <Col span={5}>
                            <Row>
                                <Card
                                    size="small"
                                    title={<div className="card-title-left-icon"><div></div>按钮操作</div>}
                                >
                                    <Col >
                                        <Row >
                                            <Col style={{ textAlign: 'center' }} >
                                                <Button onClick={this.searchInformation}>查询</Button>
                                                <Button type="primary" onClick={this.handleReset} style={{ marginLeft: '20px' }}>清屏</Button>
                                            </Col>
                                        </Row>
                                    </Col>
                                </Card>
                            </Row>
                            <Row>
                                <Form >
                                    <Card
                                        title={<div className="card-title-left-icon"><div></div>查询条件</div>}
                                        size="small"
                                        className='checkAll'
                                    >
                                        <section className="ant-form-list">
                                            <div className='scrollbar' style={{ height: store.getState().tableHeight.y + 83 + 'px' }}>
                                                <Row >
                                                    <Col >
                                                        <FormItem label="科室" {...formItemItem}>
                                                            {getFieldDecorator('locID', {
                                                                initialValue: userInfo.locID ? userInfo.locID : "",
                                                                rules: [
                                                                    {
                                                                        required: false,
                                                                        message: 'Please input your Loc',
                                                                    }
                                                                ],
                                                            })(
                                                                <Select showSearch optionFilterProp="seatchprop" allowClear style={{ width: '100%' }} onChange={(val, opt) => this.locDesc = opt.props.children}>
                                                                    {selectData.loc && selectData.loc.map(item => {
                                                                        return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.descriptsSPCode + "^" + item.descripts}>{item.descripts}</Option>
                                                                    })}
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="开始日期" {...formItemItem}>
                                                            {getFieldDecorator('startDate', {
                                                                initialValue: Moment(new Date()),
                                                                rules: [{ required: true, message: 'Please select startDate!' }]
                                                            })(
                                                                <DatePicker
                                                                    format="YYYY-MM-DD"
                                                                    style={{ width: '100%' }}
                                                                >
                                                                </DatePicker>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="结束日期" {...formItemItem}>
                                                            {getFieldDecorator('endDate', {
                                                                initialValue: Moment(new Date()),
                                                                rules: [{ required: true, message: 'Please select startDate!' }]
                                                            })(
                                                                <DatePicker
                                                                    format="YYYY-MM-DD"
                                                                    style={{ width: '100%' }}
                                                                >
                                                                </DatePicker>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="库存大类" {...formItemItem}>
                                                            {getFieldDecorator('stkCatID', {
                                                                initialValue: undefined,
                                                            })(
                                                                <Select showSearch optionFilterProp="seatchprop" allowClear style={{ width: '100%' }}>
                                                                    {selectData.stkCat && selectData.stkCat.map(item => {
                                                                        return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                                    })}
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="库存子类" {...formItemItem}>
                                                            {getFieldDecorator('stkSubCatID', {
                                                                initialValue: undefined,
                                                            })(
                                                                <Select showSearch optionFilterProp="seatchprop" allowClear style={{ width: '100%' }}>
                                                                    {selectData.stkSubCat && selectData.stkSubCat.map(item => {
                                                                        return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                                    })}
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="调整原因" {...formItemItem}>
                                                            {getFieldDecorator('reasonID', {
                                                                initialValue: undefined,
                                                            })(
                                                                <Select showSearch optionFilterProp="seatchprop" allowClear style={{ width: '100%' }}>
                                                                    {selectData.reason && selectData.reason.map(item => {
                                                                        return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.descripts + '^' + item.descriptsSPCode}>{item.descripts}</Option>
                                                                    })}
                                                                </Select>
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24} id='stock-desc'>
                                                        <FormItem label="药品名称" {...formItemItem}>
                                                            {getFieldDecorator('stockDesc', {
                                                                rules: [
                                                                    {
                                                                        required: false,
                                                                        message: 'Please input your groupClass',
                                                                    }
                                                                ],
                                                            })(
                                                                <Input placeholder={ChineseEnglishSize.DepartmentDrugInformationMaintcarriageSearch ? ChineseEnglishSize.DepartmentDrugInformationMaintcarriageSearch.descripts : '回车检索药品相关信息'} allowClear onPressEnter={this.stockDescOnPressEnter} onBlur={this.stastockDescOnBlure} onChange={this.onchangeStock} />
                                                            )}
                                                        </FormItem>
                                                    </Col>
                                                    <Col span={24}>
                                                        <FormItem label="调整单号" {...formItemItem}>
                                                            {getFieldDecorator('number', {
                                                                rules: [
                                                                    {
                                                                        required: false,
                                                                        message: 'Please input your groupClass',
                                                                    },
                                                                ],
                                                            })(
                                                                <Input style={{ width: '100%' }} />
                                                            )}
                                                        </FormItem>
                                                    </Col>

                                                    {/* <Col span={24}>
                                                        <FormItem label="报表类型" {...{labelCol: { span: 6 },wrapperCol: { span: 18 }}}>
                                                            {getFieldDecorator('reportType', {
                                                                rules: [
                                                                    {
                                                                        required: true,
                                                                        //message: 'Please input your groupClass',
                                                                    }
                                                                ],
                                                                initialValue: [""],

                                                            })(
                                                                <Radio.Group style={{ width: '100%' }}>
                                                                    <Row>
                                                                        {selectData.reportType && selectData.reportType.map(item => {
                                                                            return <Col>
                                                                                <Radio value={item.raqName} key={item.id}>{item.descripts}</Radio>
                                                                            </Col>
                                                                        })}
                                                                    </Row>
                                                                </Radio.Group>
                                                            )}
                                                        </FormItem>
                                                    </Col> */}
                                                </Row>
                                            </div>
                                        </section>
                                    </Card>
                                </Form>
                            </Row>
                        </Col>
                        <Col span={19}>
                            <div style={{ height: store.getState().tableHeight.y + 200 + 'px' }}>
                                <Reports
                                    raqName={this.state.raqName}
                                    params={this.state.params}
                                />
                            </div>
                        </Col >
                    </Row>
                    <PublicModalTable onClickRowPublic={this.onClickRowPublic} param={param} onRef={this.onRef} />
                </div>
            )
        }
    }
);
export default WarehousingSummaryMaintenance;