//库存项别名维护
import React from 'react';
import {
    Form,Row,Input,Col,Button,Card,Table,Pagination,message
} from 'antd';
import '../../../assets/css/App.css'
import { $http } from '../../../containers/config/https';
const FormItem = Form.Item;

const FormHandel = Form.create()(
    class extends React.Component {
        constructor(props) {
            super(props)
            this.state = { 
                alias:'',
                total: 0,
                page: 1,
                pageSize: 10,
            }

            this.columns = [
                {
                    key: 'alias',
                    title: '库存项别名',
                    dataIndex: 'alias',
                    width: "100%",
                    align: 'center'
                }
            ];
        }

        componentDidMount() {
            this.props.onRef(this);
        }

        //处理多个input的公共方法
        onChangeInput(name, e){
            this.setState({
                [name]: e.target.value
            })
        }

        // 查询
        handleQuery = () => {
            if(parseInt(this.state.stockID)>0){
                let data = {}
                data={
                    params: [{
                        stockID: this.state.stockID,
                    }],
                    pagination:[{
                        pageSize: this.state.pageSize,
                        currentPage: this.state.page,
                        sort: "ID",
                        dir: "desc",
                    }]
                }
                $http.post('urlS', this, {
                    code: "02020030",
                    data: data,
                    success: function (res) {
                        if (res.errorCode === '0') {
                            for(var i = 0; i < res.result.rows.length; i++) {
                                res.result.rows[i].key = i
                            }
                            this.setState({
                                data: res.result.rows, 
                                total: res.result.total,
                                selectID: '',
                                alias:'',
                            })
                            this.props.form.resetFields();
                        }
                    }
                });
            }else{

            }
        }

        // 保存
        handleSave = () => {
            if(parseInt(this.state.stockID)>0){
                if(this.state.alias===""){
                    message.warning('库存项别名不能为空!!');
                    return;
                }
                let data = {}
                data={
                    params: [{
                        stockID: this.state.stockID,
                        ID: this.state.selectID,
                        stockAlias: this.state.alias,
                    }],
                }
                $http.post('urlS', this, {
                    code: "02020029",
                    data: data,
                    success: function (res) {
                        if (res.errorCode === '0') {
                            message.success('保存成功');
                            this.handleQuery();
                        }
                    }
                });
            }else{
                message.warning('请先保存库存项信息!');
                return;
            }
        }

        //删除
        handleDelete = ()=>{
            if(parseInt(this.state.selectID)>0){
                let data = {}
                data={
                    params: [{
                        ID: this.state.selectID,
                    }],
                }
                $http.post('urlS', this, {
                    code: "02020031",
                    data: data,
                    success: function (res) {
                        if (res.errorCode === '0') {
                            message.success('删除成功');
                            this.handleQuery();
                        }
                    }
                });
            }else{
                message.warning('请先选择记录再删除信息!');
                return;
            }
        }

        // 清空
        Clear = () => {
            this.setState({
                selectID: '',
                alias:'',
            })
            this.props.form.resetFields();
        }

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

        // 条数改变的回调
        onShowSizeChange = (current, size) => {
        this.setState({page: current, pageSize: size}, () => {
                // 重新调用查询方法
                this.handleQuery();
            });
        }

        setRowClassName = (record) => {
            return record.ID === this.state.selectID ? 'clickRowStyle' : '';
        }
    
        onClickRow = (record) => {
            return {
                onClick: () => {
                    this.Clear();
                    if(this.state.selectID===""){
                        this.setState({
                            selectID: record.ID,
                            alias:record.alias,
                        });
                    }else{
                        if(this.state.selectID!==record.ID){
                            this.setState({
                                selectID: record.ID,
                                alias:record.alias,
                            });
                        }else{
                            this.Clear();
                        }
                    }
                },
                onDoubleClick: () => {
                    
                }
            };
        }
        render() {
            const { getFieldDecorator } = this.props.form;
            let formItemLayout = {
                labelCol: { span: 7 },
                wrapperCol: { span: 17 }
            };
            return (
                <div>
                    <Form>
                        <Row style={{paddingTop:'10px'}}>
                            <Card bodyStyle={{padding:'10px'}}>
                                <Col span={8}>
                                    <FormItem {...formItemLayout} label='库存项别名'>
                                        {getFieldDecorator('Alias', {
                                            initialValue:this.state.alias,
                                            rules: [{ required: true, message: '库存项别名是必填项,请选择！' }]
                                            })(
                                                <Input 
                                                    onChange={this.onChangeInput.bind(this,"alias")}
                                                />
                                            )}
                                    </FormItem>
                                </Col>
                                <Col span={8}>
                                    <Button style={{ marginLeft: '20px',marginTop:'2px', background: '#1999db',color:'#ffffff'}}  onClick={this.handleQuery}>查询</Button>
                                    <Button style={{ marginLeft: '20px',marginTop:'2px', background: '#1999db',color:'#ffffff'}}  onClick={this.handleSave}>保存</Button>
                                    <Button style={{ marginLeft: '20px',marginTop:'2px', background: 'rgba(255,0,0,1)',color:'#ffffff'}}  onClick={this.handleDelete}>删除</Button>
                                </Col>
                            </Card>
                        </Row>
                        <Row type="flex" justify="space-between">
                            <Card bodyStyle={{padding:'10px'}}>
                                <div>
                                    <Table
                                        dataSource={this.state.data}
                                        columns={this.columns}
                                        rowClassName={this.setRowClassName}
                                        pagination={false}
                                        bordered
                                        onRow={this.onClickRow}
                                        rowKey="ID" 
                                        style={{height:'260px',width:'370px'}}
                                        scroll={{ x:this.state.TableWidth, y: '215px' }}
                                    
                                    />
                                    {/* 分页: total--总条数  defaultCurrent--默认的当前页 hideOnSinglePage--只有一页时隐藏分页器 */}
                                    <Pagination
                                        size="small"
                                        showQuickJumper
                                        showSizeChanger
                                        defaultCurrent={1}
                                        current={this.state.page}
                                        total={this.state.total}
                                        onChange={this.PageChange}
                                        onShowSizeChange={this.onShowSizeChange}
                                        style={{textAlign: "right", marginTop: '5px'}}
                                    />
                                </div>
                            </Card>
                        </Row>
                    </Form>
                </div>
            )
        }
    }
);
export default FormHandel;