// 采购计划制单-依据请求单
import React from 'react';
import { Card, Row, Col, Form, DatePicker, Select, Button, Modal, Table, Switch, message, Pagination, Input, Checkbox, Icon } from 'antd';
import { $http } from 'containers/config/https';
import Moment from 'moment';
import store from 'store';
import '../style/index.less';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import CommonPagination from 'components/pagination/index';

const { Option } = Select;
const FormItem = Form.Item;
const formItemLayout = {    // label 和input宽度
    labelCol: { span: 7 },
    wrapperCol: { span: 17 },
};
const formItemSwitch = {    // label 和input宽度
    labelCol: { span: 12 },
    wrapperCol: { span: 12 },
};
const AccordingToChecked = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: JSON.parse(window.sessionStorage.userData),
                data: [],
                queryCondition: {},
                SelectData: {},
                inOpLocDr: '',
                vendor: '',
                checkedDataDetails: [], //请求单单明细数据
                CheckedData: [], //请求单数据
                size: 'small',
                pageSize: 10,
                pageSize2: 10,
                page: 1,
                page2: 1,
                total: 0,
                total2: 0,
                detailTotal: 0,
                show: false,
                modalColumns: [],
                visible: false,
                detailWidthTotal: '', // 明细表头长度
                stockID: '', //主表格id
                rowKey: '', //行key值
                ChineseEnglishSize: {}, //中英翻译
            };

            // 药品的数据表头
            this.columns = [
                {
                    key: 1,
                    title: this.state.userInfo.language == 'EN' ? 'supplier' : '供应商',
                    dataIndex: 'vendorDesc',
                    align: "center",
                    width: '28%'
                },
                {
                    key: 2,
                    title: this.state.userInfo.language == 'EN' ? 'Incoming department' : '入库科室',
                    dataIndex: 'inOperLocDesc',
                    align: "center",
                    width: '16%',
                },
                {
                    key: 3,
                    title: this.state.userInfo.language == 'EN' ? 'Inbound order number' : '入库单号',
                    dataIndex: 'No',
                    align: "center",
                    width: '20%',
                },
                {
                    key: 4,
                    title: this.state.userInfo.language == 'EN' ? 'Document status' : '单据状态',
                    dataIndex: 'statusDesc',
                    align: "center",
                    width: '16%',
                },
                {
                    key: 5,
                    title: this.state.userInfo.language == 'EN' ? 'Date of inbound' : '入库日期',
                    dataIndex: 'createDate',
                    align: "center",
                }
            ]
            // 付款单详细表头
            this.modalColumns = [
                {
                    key: 1,
                    title: this.state.userInfo.language == 'EN' ? 'Code' : '代码',
                    dataIndex: 'stockCode',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 2,
                    title: this.state.userInfo.language == 'EN' ? 'description' : '描述',
                    dataIndex: 'stockDesc',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 3,
                    title: this.state.userInfo.language == 'EN' ? 'Packing specification' : '包装规格',
                    dataIndex: 'stockSpec',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 4,
                    title: this.state.userInfo.language == 'EN' ? 'Manufacturer' : '生产厂家',
                    dataIndex: 'manfDesc',
                    align: "center",
                    width: '300px',
                    render: (text, record, index) => {
                        return (<Select style={{ width: '100%' }} value={text} onChange={(e) => this.handleFieldSelect(e, 'manfID', record.inOperDetailID)}>
                            {this.state.SelectData.vendor && this.state.SelectData.vendor.map((item, i) => {
                                return <Option value={item.id} key={i}>{item.descripts}</Option>
                            })}
                        </Select>
                        )
                    }
                },
                {
                    key: 5,
                    title: this.state.userInfo.language == 'EN' ? 'lot number' : '批号',
                    dataIndex: 'batNo',
                    align: "center",
                    width: '150px',
                    render: (text, record, index) => {
                        return (<Input min={0} style={{ width: '90%' }} value={text} onChange={(e) => this.handleFieldChange(e, 'batNo', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 6,
                    title: this.state.userInfo.language == 'EN' ? 'Validity period' : '有效期',
                    dataIndex: 'expDate',
                    align: "center",
                    width: '150px',
                    render: (text, record, index) => {
                        return (<DatePicker style={{ width: '90%' }} value={text ? Moment(text, 'YYYY-MM-DD') : undefined} onChange={(e) => this.onChangeTime(e, 'expDate', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 7,
                    title: this.state.userInfo.language == 'EN' ? 'Production Date' : '生产日期',
                    dataIndex: 'produceDate',
                    align: "center",
                    width: '150px',
                    render: (text, record, index) => {
                        return (<DatePicker style={{ width: '90%' }} value={text ? Moment(text, 'YYYY-MM-DD') : undefined} onChange={(e) => this.onChangeTime(e, 'produceDate', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 8,
                    title: this.state.userInfo.language == 'EN' ? 'Quantity' : '数量',
                    dataIndex: 'qty',
                    align: "center",
                    width: '100px'
                },
                {
                    key: 9,
                    title: this.state.userInfo.language == 'EN' ? '单位' : '单位',
                    dataIndex: 'unitDesc',
                    align: "center",
                    width: '100px'
                },
                {
                    key: 10,
                    title: this.state.userInfo.language == 'EN' ? 'Purchase price' : '进价',
                    dataIndex: 'rp',
                    align: "center",
                    width: '100px',
                    render: (text, record, index) => {
                        return (<Input min={0} style={{ width: '90%' }} type="number" value={text} onChange={(e) => this.handleFieldChange(e, 'rp', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 11,
                    title: this.state.userInfo.language == 'EN' ? 'Price' : '售价',
                    dataIndex: 'sp',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 12,
                    title: this.state.userInfo.language == 'EN' ? 'invoice number' : '发票号',
                    dataIndex: 'invNo',
                    align: "center",
                    width: '150px',
                    render: (text, record, index) => {
                        return (<Input min={0} style={{ width: '90%' }} value={text} onChange={(e) => this.handleFieldChange(e, 'invNo', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 13,
                    title: this.state.userInfo.language == 'EN' ? 'Invoice date' : '发票日期',
                    dataIndex: 'invDate',
                    align: "center",
                    width: '150px',
                    render: (text, record, index) => {
                        return (<DatePicker style={{ width: '90%' }} value={Moment(text, 'YYYY-MM-DD')} onChange={(e) => this.onChangeTime(e, 'invDate', record.inOperDetailID)} />)
                    }
                },
                {
                    key: 14,
                    title: this.state.userInfo.language == 'EN' ? 'Amount of purchase price' : '进价金额',
                    dataIndex: 'rpAmt',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 15,
                    title: this.state.userInfo.language == 'EN' ? 'Price amount' : '售价金额',
                    dataIndex: 'spAmt',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 16,
                    title: this.state.userInfo.language == 'EN' ? 'Sales balance' : '进销差额',
                    dataIndex: 'difAmt',
                    align: "center",
                    width: '150px'
                }
            ]
        }

        componentDidMount() {
            this.props.onRef(this);
            // 初始化数据
            this.getTacitlyApproveData();
        }

        //获取操作行数据对象
        getRowByKey(key, newData) {
            const { checkedDataDetails } = this.state;
            return (newData || checkedDataDetails).filter(item => item.inOperDetailID === key)[0];
        }
        //文本框数据修改
        handleFieldChange = (e, fieldName, key) => {
            const { checkedDataDetails } = this.state;
            const newData = checkedDataDetails.map(item => ({ ...item }));
            const target = this.getRowByKey(key, newData);
            if (target) {
                target[fieldName] = e.target.value;
                this.setState({ checkedDataDetails: newData });
            }
        };
        //日期数据修改
        onChangeTime = (e, fieldName, key) => {
            const { checkedDataDetails } = this.state;
            const newData = checkedDataDetails.map(item => ({ ...item }));
            const target = this.getRowByKey(key, newData);
            if (target) {
                target[fieldName] = e ? Moment(e).format('YYYY-MM-DD') : undefined;
                this.setState({ checkedDataDetails: newData });
            }
        };
        //下拉框数据修改
        handleFieldSelect = (e, fieldName, key) => {
            const { checkedDataDetails } = this.state;
            const newData = checkedDataDetails.map(item => ({ ...item }));
            const target = this.getRowByKey(key, newData);
            if (target) {
                target[fieldName] = e;
                this.setState({ checkedDataDetails: newData });
            }
        };
        //清空表格内容
        handleReset = () => {
            this.setState({ CheckedData: [], checkedDataDetails: [], total: 0 });
            this.props.form.setFieldsValue({ stockDr: undefined });
            this.props.form.resetFields();
        };

        // 获取界面默认值
        getTacitlyApproveData() {
            let data = {
                params: []
            };
            // 获取下拉数据
            $http.post('urlS', this, {
                code: "02020247",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({ SelectData: res })
                    }
                }
            })
        }

        // 获取请求单数据
        getWarehouseList = () => {
            let leftList = document.querySelectorAll('.waListHeight  .ant-table-body');
            if (leftList.length > 0) {
                leftList[0].style.height = store.getState().tableHeight.y + 10 + 'px';
            }
            this.setState({ loading: true });
            this.props.form.validateFields((err, val) => {
                let obj = JSON.parse(JSON.stringify(val));
                if (err == null) {
                    let data = {
                        params: [{
                            inOperLocID: obj.locDr ? obj.locDr : undefined,
                            vendorID: obj.vendorDr ? obj.vendorDr : undefined,
                            startDate: Moment(obj.StartDate).format('YYYY-MM-DD'),
                            endDate: Moment(obj.EndDate).format('YYYY-MM-DD'),
                            auditFlag: "Y",
                        }],
                        pagination: [
                            {
                                pageSize: this.state.pageSize,
                                currentPage: this.state.page,
                                sort: "ID",
                                dir: "asc",
                            }
                        ],
                    };
                    $http.post('urlS', this, {
                        code: "02020061",
                        data: data,
                        success: function (res) {
                            if (res.result.length > 0) {
                                for (var i = 0; i < res.result.length; i++) {
                                    res.result[i].key = i;
                                }
                                this.setState({ CheckedData: res.result, total: res.total, loading: false });
                            } else {
                                this.setState({ CheckedData: [], checkedDataDetails: [], });
                                message.error("没数据")
                            }
                        }
                    });
                }
            });
        };

        // 获取请求单详情
        getRequestForm = () => {
            this.setState({ detailsLoading: true })
            let listData = document.querySelectorAll('.detailsHeight  .ant-table-body');
            if (listData.length > 0) {
                listData[0].style.height = store.getState().tableHeight.y - 255 + 'px';
            }

            let data = {
                params: [{
                    inOperID: this.state.stockID ? this.state.stockID : undefined,
                }],
                pagination: [
                    {
                        pageSize: this.state.pageSize2,
                        currentPage: this.state.page2,
                        sort: "ID",
                        dir: "asc",
                    }
                ],
            };
            $http.post('urlS', this, {
                code: "02020062",
                data: data,
                success: function (res) {
                    if (res.result[0].rows.length > 0) {
                        for (var i = 0; i < res.result[0].rows.length; i++) {
                            res.result[0].rows[i].key = i;
                        }
                        this.setState({ checkedDataDetails: res.result[0].rows, total2: res.total, detailsLoading: false });
                    } else {
                        this.setState({ checkedDataDetails: [] });
                        message.error("没数据")
                    }
                }
            });
        };

        // 页码改变的回调，参数是改变后的页码及每页条数
        onChange = (e) => {
            this.setState({ page: e, pageSize: this.state.pageSize }, () => {
                // 重新调用查询方法
                this.getWarehouseList();
            });
        };

        onShowSizeChange = (current, size) => {
            this.setState({ page: current, pageSize: size }, () => {
                // 重新调用查询方法
                this.onChange(current, size);
            })
        };

        // 页码改变的回调，参数是改变后的页码及每页条数
        onChange2 = (e) => {
            this.setState({ page2: e, pageSize2: this.state.pageSize2 }, () => {
                // 重新调用查询方法
                this.getRequestForm();
            });
        };

        onShowSizeChange2 = (current, size) => {
            this.setState({ page2: current, pageSize2: size }, () => {
                // 重新调用查询方法
                this.onChange(current, size);
            })
        };

        // 收起明细录入
        packUpHandle = () => {
            this.setState({ show: !this.state.show, span: 24 })
        };

        //组件权限编辑器
        onColumnRef = (ref) => {
            this.columnRef = ref;
        };
        // 关闭
        handleCancel = (e) => {
            this.setState({
                visible: false,
                getBatchDetail: [],
                total2: 0,
                rowKey: '',
                rowId: '',
                data: [],//主列表数据
                total: 0,
                page: 1,
                pageSize: 10,
                locId: '',
                toLocID: '',
            });
        };
        // 确定
        handleOk = (e) => {
            this.handleCancel()
        };
        // 打开弹框
        showModal = (val) => {
            this.setState({
                visible: true,
                ChineseEnglishSize: val,
            });
        };

        // 设置行属性
        onClickRow = (record) => {
            return {
                // 单击行选中
                onClick: (e) => {
                    e.stopPropagation();
                    if (this.state.rowKey === '') {
                        // 保存行数据以及ID
                        this.setState({ rowKey: record.key, stockID: record.inOperID }, () => {
                            this.getRequestForm();
                        });
                    } else {
                        if (this.state.rowKey !== record.key) {
                            this.setState({ rowKey: record.key, stockID: record.inOperID }, () => {
                                this.getRequestForm();
                            });
                        } else {
                            this.setState({ rowKey: '', stockID: '', checkedDataDetails: [] });
                        }
                    }
                }
            }
        };

        // 表格行的类名
        setRowClassName = (record) => {
            return record.key === this.state.rowKey ? 'clickRowStyle' : '';
        };

        //  取消审核
        offAudit = () => {

            let data = {
                params: [{
                    inOperID: this.state.stockID ? this.state.stockID : undefined,
                }]
            };
            $http.post('urlS', this, {
                code: "02020260",
                data: data,
                success: function (res) {
                    if (res.errorCode == 0) {
                        message.success(res.errorMessage)
                    }
                }
            });
        };
        //保存
        save = () => {

            let data = {
                params: this.state.checkedDataDetails.length > 0 ? this.state.checkedDataDetails : undefined
            };
            $http.post('urlS', this, {
                code: "02020256",
                data: data,
                success: function (res) {
                    if (res.errorCode == 0) {
                        message.success(res.errorMessage)
                    }
                }
            });
        }
        render() {
            const { getFieldDecorator } = this.props.form;
            let userInfo = this.state.userInfo ? this.state.userInfo : {};

            //下拉列表
            let loc = [];
            this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
                loc.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });
            let { ChineseEnglishSize } = this.state;
            return (
                <Modal
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    width='75%'
                    footer={null}
                    className="AccordingToChecked"
                >
                    <Row>
                        <Card
                            size="small"
                            title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.WarehousingOrderMakingreviewedInboundOrderInquiryand ? ChineseEnglishSize.WarehousingOrderMakingreviewedInboundOrderInquiryand.descripts : '已审核入库单查询与修改'}</div>}
                        >
                            <Col >
                                <Form>
                                    <Col span={19}>
                                        <Row >
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakingloc ? ChineseEnglishSize.WarehousingOrderMakingloc.descripts : '科室'}>
                                                    {getFieldDecorator('locDr', {
                                                        initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
                                                        rules: [{ required: true, message: '科室不能为空' }]
                                                    })(
                                                        <Select allowClear={true}>
                                                            {loc}
                                                        </Select>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakingstartDate ? ChineseEnglishSize.WarehousingOrderMakingstartDate.descripts : '起初日期'}>
                                                    {getFieldDecorator('StartDate', {
                                                        initialValue: this.state.queryCondition.startDate ? Moment(this.state.queryCondition.startDate, 'YYYY-MM-DD') : Moment(Moment(), 'YYYY-MM-DD'),
                                                        rules: [{ required: true, message: '起初日期不能为空' }]
                                                    })(
                                                        <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                                                            return curDate && curDate > Moment().endOf('day');
                                                        }} />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakingendDate ? ChineseEnglishSize.WarehousingOrderMakingendDate.descripts : '截至日期'}>
                                                    {getFieldDecorator('EndDate', {
                                                        initialValue: this.state.queryCondition.endDate ? Moment(this.state.queryCondition.endDate, 'YYYY-MM-DD') : Moment(Moment(), 'YYYY-MM-DD'),
                                                        rules: [{ required: true, message: '截至日期不能为空' }]
                                                    })(
                                                        <DatePicker style={{ width: '100%' }} disabledDate={(curDate) => {
                                                            return curDate && curDate > Moment().endOf('day');
                                                        }} />
                                                    )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                        <Row>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakingvendorID ? ChineseEnglishSize.WarehousingOrderMakingvendorID.descripts : '供应商'}>
                                                    {getFieldDecorator('vendorDr', {
                                                        initialValue: undefined,
                                                        rules: [{ required: false, message: '供应商不能为空' }]
                                                    })(
                                                        <Select showSearch allowClear placeholder="请选择供应商" >
                                                            {this.state.SelectData.vendor && this.state.SelectData.vendor.map(item => {
                                                                return <Option key={item.id} value={item.id} >{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakinginOperNo ? ChineseEnglishSize.WarehousingOrderMakinginOperNo.descripts : '入库单号'}>
                                                    {getFieldDecorator('inOperNo', {
                                                        initialValue: undefined,
                                                        rules: [{ required: false, message: '入库单号不能为空' }]
                                                    })(
                                                        <Input disabled />
                                                    )}
                                                </FormItem>
                                            </Col>
                                            <Col span={8}>
                                                <FormItem {...formItemLayout} label={ChineseEnglishSize.WarehousingOrderMakinginvoiceNo ? ChineseEnglishSize.WarehousingOrderMakinginvoiceNo.descripts : '发票号'}>
                                                    {getFieldDecorator('invoiceNo', {
                                                        initialValue: undefined,
                                                        rules: [{ required: false, message: '发票号不能为空' }]
                                                    })(
                                                        <Input disabled />
                                                    )}
                                                </FormItem>
                                            </Col>
                                        </Row>
                                    </Col>
                                    <Col span={5}>
                                        <Row style={{ marginTop: '4px', marginLeft: '35px' }} className="buttonLeft">
                                            <Button onClick={this.getWarehouseList}>{ChineseEnglishSize.WarehousingOrderMakingsearch ? ChineseEnglishSize.WarehousingOrderMakingsearch.descripts : '查询'}</Button>
                                            <Button style={{ marginLeft: '74px' }} onClick={this.save}>{ChineseEnglishSize.WarehousingOrderMakingsave ? ChineseEnglishSize.WarehousingOrderMakingsave.descripts : '保存'}</Button>
                                        </Row>
                                        <Row style={{ marginTop: '18px', marginLeft: '35px' }} className="buttonLeft">
                                            <Button onClick={this.offAudit} disabled={this.state.stockID ? false : true}>{ChineseEnglishSize.WarehousingOrderMakingunapprove ? ChineseEnglishSize.WarehousingOrderMakingunapprove.descripts : '取消审核'}</Button>
                                            <Button style={{ marginLeft: '50px' }} onClick={this.handleReset}>{ChineseEnglishSize.WarehousingOrderMakingReset ? ChineseEnglishSize.WarehousingOrderMakingReset.descripts : '清空'}</Button>
                                        </Row>
                                    </Col>
                                </Form>
                            </Col>
                        </Card>
                    </Row>
                    <Row>
                        <Col span={12} style={{ display: this.state.show ? 'none' : '' }} className={!this.state.show ? "animate-wrap active down-in" : "animate-wrap"}>
                            <Card
                                size="small"
                                title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.WarehousingOrderMakingreceipts ? ChineseEnglishSize.WarehousingOrderMakingreceipts.descripts : '入库单'}</div>}
                            >
                                <div className="drugList " style={{ height: store.getState().tableHeight.y - 200 + 'px' }}>
                                    <Table
                                        columns={this.columns}
                                        dataSource={this.state.CheckedData ? this.state.CheckedData : []}
                                        pagination={false}
                                        bordered
                                        scroll={{ y: store.getState().tableHeight.y - 295 }}
                                        style={{ height: (store.getState().tableHeight.y - 238) }}
                                        rowKey={record => record.key}
                                        className='waListHeight'
                                        current={this.state.page ? this.state.page : 1}
                                        onRow={this.onClickRow}
                                        rowClassName={this.setRowClassName}
                                    />
                                    <CommonPagination size={this.state.size} current={this.state.page} total={this.state.total} search='search'
                                        onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.CheckedData}
                                        loading={this.state.loading} onChange={this.onChange.bind(this)} />
                                </div>
                            </Card>
                        </Col>
                        <Col span={this.state.show ? 24 : 12}>
                            <Card
                                size="small"
                                title={<span><Icon onClick={this.packUpHandle} type={this.state.show ? 'double-right' : 'double-left'} />{ChineseEnglishSize.WarehousingOrderMakingstartDated ? ChineseEnglishSize.WarehousingOrderMakingstartDated.descripts : '入库单明细'}</span>}
                            >
                                <div style={{ height: store.getState().tableHeight.y - 200 + 'px' }}>
                                    <Table
                                        columns={this.modalColumns}
                                        dataSource={this.state.checkedDataDetails}
                                        pagination={false}
                                        bordered
                                        style={{ height: (store.getState().tableHeight.y - 238) }}
                                        scroll={{ x: 2400, y: store.getState().tableHeight.y - 295 }}
                                        rowKey={record => record.key}
                                        className='detailsHeight'
                                    />
                                    <CommonPagination size={this.state.size} current={this.state.page2} total={this.state.total2} search='search'
                                        onShowSizeChange={this.onShowSizeChange2.bind(this)} complete={true} dataSource={this.state.checkedDataDetails}
                                        loading={this.state.detailsLoading} onChange={this.onChange2.bind(this)} />
                                </div>
                            </Card>
                        </Col>
                    </Row>
                </Modal>
            )
        }
    }
);
export default AccordingToChecked;