// 采购计划制单-依据请求单
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 AccordingToRequestForm = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: JSON.parse(window.sessionStorage.userData),
                data: [],
                queryCondition: {},
                SelectData: {},
                inOpLocDr:'',
                vendor: '',
                detailsListData:[], //请求单单明细数据
                WaListData: [], //请求单数据
                size: 'small',
                pageSize: 10,
                page: 1,
                pageSize2: 10,
                page2: 1,
                total:0,
                detailTotal: 0,
                show: false,
                paymentID: '',
                modalColumns: [],
                visible: false,
                vouchingId: [],
                selectedRowKeys: [],
                detailWidthTotal: '', // 明细表头长度
                ChineseEnglishSize: '', //中英翻译
            };

            // 药品的数据表头
            this.columns = [
                {
                    key: 1,
                    title: '请求单号',
                    dataIndex: 'stkReqNO',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 8,
                    title: '请求部门',
                    dataIndex: 'toLocDesc',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 2,
                    title: '库存大类',
                    dataIndex: 'stkCatDesc',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 3,
                    title: '制单日期',
                    dataIndex: 'createDate',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 4,
                    title: '制单时间',
                    dataIndex: 'createTime',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 5,
                    title: '制单人',
                    dataIndex: 'createUserName',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 6,
                    title: '备注',
                    dataIndex: 'remark',
                    align: "center",
                    width: '150px'
                }
            ];
            // 付款单详细表头
            this.modalColumns = [
                {
                    key: 1,
                    title: '代码',
                    dataIndex: 'stockCode',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 8,
                    title: '名称',
                    dataIndex: 'stockDesc',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 2,
                    title: '单位',
                    dataIndex: 'unitDesc',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 3,
                    title: '本科室数量',
                    dataIndex: 'rpAmt',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 4,
                    title: '请求数量',
                    dataIndex: 'willPay',
                    align: "center",
                    width: '150px'
                },
                {
                    key: 5,
                    title: '已转移数量',
                    dataIndex: 'createDate',
                    align: "center",
                    width: '150px'
                }
            ]
        }

        componentDidMount() {
            this.props.onRef(this);
            // 初始化数据
            this.getTacitlyApproveData();
            this.getDetailTableColumns();
        }
        componentWillReceiveProps(props){
            this.setState({ChineseEnglishSize: props.ChineseEnglishSize})
        }
        // 获取明系列表头数据
        getDetailTableColumns = () => {
            let data = {
                params: [{
                    compontName: 'purchasePlanDetailList',
                    type: 'C',
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let arr = res.result.C&&res.result.C.length > 0 ? JSON.parse(JSON.stringify(res.result.C)).map((item, index) => {
                            return  {
                                ...item,
                                key: index + 1,
                                title: <div onDoubleClick={() => { this.columnRef.onOpenModel();}}>{item.title}</div>
                            }
                        }) : '';
                        let filterArr = arr.filter(function(item){ return item.display === 'Y'});
                        this.setState({modalColumns: filterArr, detailWidthTotal: res.totalWidth})
                    }
                }
            });
        };
        //清空表格内容
        handleReset = () => {
            this.setState({WaListData: [],detailsListData: [],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})
            let locDr = this.props.form.getFieldValue('locDr');
            let EndData = this.props.form.getFieldValue('EndData');
            let StartDate = this.props.form.getFieldValue('StartDate');
            let apply = this.props.form.getFieldValue('apply');
            let data = {
                params: [{
                    frLocID: locDr ? locDr : undefined,
                    begin: Moment(StartDate).format('YYYY-MM-DD'),
                    end: Moment(EndData).format('YYYY-MM-DD'),
                    stateID: '20',
                    transStatus: 0,
                }],
                pagination: [
                    {
                        pageSize:this.state.pageSize,
                        currentPage:this.state.page,
                        sort:"ID",
                        dir:"asc",
                    }
                ],
            };
            $http.post('urlS', this, {
                code: "02020231",
                data: data,
                success: function (res) {
                    if(res.rows.length > 0){
                        for(var i = 0; i < res.rows.length; i++){
                            res.rows[i].key = i;
                        }
                        this.setState({ WaListData: res.rows,total: res.total,loading:false });
                    }else {
                        this.setState({WaListData: [], detailsListData: [],});
                        message.error("没数据")
                    }
                }
            });
        };

        // 获取请求单详情
        getRequestForm=(val)=>{
            let listData = document.querySelectorAll('.detailsHeight  .ant-table-body');
            if(listData.length>0){
                listData[0].style.height = store.getState().tableHeight.y - 255 + 'px';
            }
            let detailId = [];
            for(var k=0; k<val.length; k++){
                detailId.push({stkReq: val[k].stkReqID})
            }
            let data = {
                params: detailId.length>0 ? detailId : undefined
            };
            $http.post('urlS', this, {
                code: "02020246",
                data: data,
                success: function (res) {
                    if(res.result.detail.rows.length > 0){
                        for(var i = 0; i < res.result.detail.rows.length; i++){
                            res.result.detail.rows[i].key = i;
                        }
                        this.setState({ detailsListData: res.result.detail.rows});
                    }else {
                        this.setState({detailsListData: []});
                        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);
            })
        };

        // 收起明细录入
        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,
                page2: 1,
                pageSize: 10,
                pageSize2:10,
                locId: '',
                toLocID: '',
            });
        };
        // 确定
        handleOk = (e) => {
            this.handleCancel()
        };
        // 打开弹框
        showModal = () => {
            this.setState({
                visible: true,
            });
        };
        render() {
            const { getFieldDecorator } = this.props.form;

            //下拉列表
            let loc = [];
            this.state.SelectData.loc && this.state.SelectData.loc.map((item, i) => {
                loc.push(<Option value={item.id} key={i}>{item.descripts}</Option>)
            });
            const rowSelection = {
                selectedRowKeys: this.state.selectedRowKeys,
                selectedRows: this.state.vouchingId,
                onChange: (selectedRowKeys, selectedRows) => {
                    this.setState({selectedRowKeys: selectedRowKeys, vouchingId: selectedRows},()=>{
                        this.getRequestForm(selectedRows)
                    })
                }
            };
            let {ChineseEnglishSize, userInfo}=this.state;
            return (
                <Modal
                    visible={this.state.visible}
                    onCancel={this.handleCancel}
                    width='75%'
                    footer={null}
                    className="AccordingToRequestForm"
                >
                    <Row>
                        <Card
                            size="small"
                            title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.purchasePlanDetailListPurchasePlanPopoup ? ChineseEnglishSize.purchasePlanDetailListPurchasePlanPopoup.descripts:'采购计划-依据请求单'}</div>}
                        >
                            <Col >
                                <Form>
                                    <Row >
                                        <Col span={5}>
                                        <FormItem {...formItemLayout} label={ChineseEnglishSize.purchasePlanDetailListloc ? ChineseEnglishSize.purchasePlanDetailListloc.descripts:'科室'}>
                                        {getFieldDecorator('locDr',{
                                        initialValue: this.state.userInfo.locID ? this.state.userInfo.locID : undefined,
                                            rules:[{ required : ChineseEnglishSize.purchasePlanDetailListloc ? ChineseEnglishSize.purchasePlanDetailListloc.required =='Y'? true:false: false, message: ChineseEnglishSize.purchasePlanDetailListloc ? ChineseEnglishSize.purchasePlanDetailListloc.message:'科室不能为空'}]
                                        })(
                                        <Select allowClear={true}>
                                        {loc}
                                        </Select>
                                        ) }
                                        </FormItem>
                                        </Col>

                                        <Col span={3} className="queryTime" style={{marginLeft: '30px'}}>
                                            <FormItem>
                                                {getFieldDecorator('StartDate',{
                                                    initialValue: this.state.queryCondition.startDate ? Moment(this.state.queryCondition.startDate, 'YYYY-MM-DD') : Moment(Moment().format('L'), 'YYYY-MM-DD'),
                                                    rules:[{required: true, message: '起初日期不能为空'}]
                                                })(
                                                    <DatePicker  style={{width: '100%'}}  />
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={1} style={{ textAlign: 'center', lineHeight: '37px', width: '20px', paddingRight: '5px'}}>
                                            <span>到</span>
                                        </Col>
                                        <Col span={3}  className="queryTime">
                                            <FormItem>
                                                {getFieldDecorator('EndData',{
                                                    initialValue: this.state.queryCondition.endDate ? Moment(this.state.queryCondition.endDate, 'YYYY-MM-DD') : Moment(Moment().format('L'), 'YYYY-MM-DD'),
                                                    rules:[{required: true, message: '截至日期不能为空'}]
                                                })(
                                                    <DatePicker  style={{width: '100%'}}  />
                                                ) }
                                            </FormItem>
                                        </Col>
                                        <Col span={4}>
                                            <Form.Item {...formItemSwitch} label={ChineseEnglishSize.purchasePlanDetailListApplication ? ChineseEnglishSize.purchasePlanDetailListApplication.descripts:'仅申请计划'}>
                                                {getFieldDecorator('apply',{
                                                    valuePropName: 'checked',
                                                    initialValue: false,
                                                    rules:[{required: false}]
                                                })(
                                                    userInfo.language == 'EN' ?  <Switch checkedChildren="yes" unCheckedChildren="no" />:  <Switch checkedChildren="是" unCheckedChildren="否" />
                                                ) }
                                            </Form.Item>
                                        </Col>
                                        <Col span={4}  style={{marginLeft: '30px'}}>
                                            <Row style={{marginTop: '4px'}} className="buttonLeft">
                                                <Button onClick={this.getWarehouseList}>{ChineseEnglishSize.purchasePlanDetailListsearch ? ChineseEnglishSize.purchasePlanDetailListsearch.descripts:'查询'}</Button>
                                                <Button style={{marginLeft: '20px'}} onClick={this.handleReset}>{ChineseEnglishSize.purchasePlanDetailListReset ? ChineseEnglishSize.purchasePlanDetailListReset.descripts:'重置'}</Button>
                                            </Row>
                                        </Col>
                                    </Row>
                                </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.purchasePlanDetailListRequestInformation ? ChineseEnglishSize.purchasePlanDetailListRequestInformation.descripts:'请求单信息'}</div>}
                            >
                                <div className="drugList " style={{height: store.getState().tableHeight.y - 200 + 'px'}}>
                                    <Table
                                        rowSelection={rowSelection}
                                        columns={this.columns}
                                        dataSource={this.state.WaListData ? this.state.WaListData : []}
                                        pagination={false}
                                        bordered
                                        scroll={{x: 900, 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}
                                    />
                                    <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.WaListData}
                                                      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.purchasePlanDetailListRequestDetails ? ChineseEnglishSize.purchasePlanDetailListRequestDetails.descripts:'请求单明细'}</span>}
                                extra={<span style={{color: '#666'}} className='span' onClick={() => { this.columnRef.onOpenModel();}}><Icon type="setting" title={ChineseEnglishSize.purchasePlanDetailListcolumnSettings ? ChineseEnglishSize.purchasePlanDetailListcolumnSettings.descripts:'列权限设置'} /></span>}
                            >
                                <div style={{height: store.getState().tableHeight.y -200 + 'px'}}>
                                    <Table
                                        columns={this.state.modalColumns.length>0 ? this.state.modalColumns : this.modalColumns}
                                        dataSource={this.state.detailsListData}
                                        pagination={false}
                                        bordered
                                        style={{height: (store.getState().tableHeight.y - 300)}}
                                        scroll={{x:  this.state.detailWidthTotal ? this.state.detailWidthTotal : 900, y: store.getState().tableHeight.y - 295}}
                                        rowKey={record => record.key}
                                        className='detailsHeight'
                                    />
                                </div>
                            </Card>
                        </Col>
                    </Row>

                    {/*//显示表头修改弹窗*/}
                    <ColumnAuthoritysModel
                        clientWidth='800px'
                        compontName='purchasePlanDetailList'
                        configType="C"
                        onRef={this.onColumnRef}
                        reloadData={this.getDetailTableColumns}
                    />
                </Modal>
            )
        }
    }
);
export default AccordingToRequestForm;