// 账户用途维护
import React from 'react';
import { Card, Row, Col, Form, DatePicker, Select, Button, Checkbox, Table, Switch, message, Pagination, Input } from 'antd';
import { $http } from 'containers/config/https';
import CommonPagination from 'components/pagination/index';
import Moment from 'moment';
import store from 'store';

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 DataMaintenance = Form.create()(
    class extends React.Component {
        constructor() {
            super();
            this.state = {
                userInfo: {}, //表单数据详情
                GroupListData: [], //盘点组列表数据
                pageSize: 20,
                page: 1,
                total: 0,
                rowKey: '', //行选中id
                rowData: {}, //当前行数据
                language: JSON.parse(window.sessionStorage.userData),
                ChineseEnglishSize: [],
                columns: [],
                detailWidthTotal: '',
                payWayData: [], //支付方式下拉
                selectData: [],
                payWayId: '',
                IfAdmflag: false
            }
        }
        componentDidMount() {
            // 初始化数据  
            this.loadHospitalMsg();
            this.getInventroyGroupList();
            this.getDetailTableColumns();
        }
        componentWillUnmount() {
            // 组件销毁前将静止让setState修改state的状态，防止内存泄漏
            this.setState = (state, callback) => { return; }
        }

        //清空表格内容
        resetFields = () => {
            this.props.form.resetFields();
            this.setState({ userInfo: {}, rowKey: '', rowData: '' });
        };
        searchInformation = () => {
            this.setState({ page: 1 }, () => {
                this.getInventroyGroupList()
            })
        };
        //支付方式下拉
        loadHospitalMsg() {
            var data = {

            }
            $http.post('urlS', this, {
                code: "05100351",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({
                            payWayData: res.result,
                            selectData: res.result,
                        })
                    }
                }
            });
        }
        ///获取列表数据
        getInventroyGroupList = () => {
            let { language } = this.state;
            let code = this.props.form.getFieldValue('acCode');
            let desc = this.props.form.getFieldValue('acDesc');
            let payWayID = this.props.form.getFieldValue('acPayWayID');
            this.setState({ loading: true })
            let data = {
                params: [
                    {
                        code: code ? code : undefined,
                        desc: desc ? desc : undefined,
                        payWayID: payWayID ? payWayID : undefined,

                    }
                ],
                pagination: [
                    {
                        pageSize: this.state.pageSize,
                        currentPage: this.state.page,
                        sort: "ID",
                        dir: "asc",
                    }
                ],
            };
            $http.post('urlS', this, {
                code: "05100352",
                data: data,
                success: function (res) {
                    if (res.errorCode == 0 && res.result.rows.length > 0) {
                        for (let i = 0; i < res.result.rows.length; i++) {
                            res.result.rows[i].key = i;
                        }
                        this.setState({ GroupListData: res.result.rows, total: res.result.total, loading: false });
                    } else {
                        this.setState({ GroupListData: [], total: 0, loading: false });
                        if (language.language == 'EN') {
                            message.error("No related data was found");
                        } else {
                            message.error("没数据");
                        }
                        this.props.form.resetFields();
                    }
                }
            });
        };
        //保存
        saveData = () => {
            this.props.form.validateFields((error, value) => {
                let obj = JSON.parse(JSON.stringify(value));
                console.log(obj, "222222")
                if (error == null) {
                    let data = {
                        params: [
                            {
                                id: this.state.rowKey,
                                code: obj.code,	//代码
                                acDesc: obj.desc,	//描述
                                payWayID: obj.payWayId,
                                type: obj.type,
                                IfAdmflag: obj.IfAdmflag
                            }
                        ]
                    };
                    $http.post('urlS', this, {
                        code: "05100353",
                        data: data,
                        success: function (res) {
                            if (res.errorCode == 0) {
                                message.success(res.errorMessage);
                                this.getInventroyGroupList();
                            }
                        }
                    });
                }
            })
        }
        // 设置行属性
        onClickRow = (record) => {
            return {
                // 单击行选中
                onClick: (e) => {
                    e.stopPropagation();
                    this.resetFields();
                    if (this.state.rowKey === '') {
                        // 保存行数据以及ID
                        this.setState({ rowKey: record.ID });
                        this.inventoryGroupData(record.ID)
                    } else {
                        if (this.state.rowKey !== record.ID) {
                            this.setState({ rowKey: record.ID });
                            this.inventoryGroupData(record.ID)
                        } else {
                            this.setState({ rowKey: '', userInfo: {} });
                            this.resetFields();
                        }
                    }
                }
            }
        };

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

        inventoryGroupData = (id) => {

            let data = {
                params: [
                    {
                        id: id
                    }
                ]
            };
            $http.post('urlS', this, {
                code: "05100354",
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        this.setState({ userInfo: res.result, IfAdmflag:res.result.IfAdmflag})
                    }
                    console.log("11userInfo",this.state.userInfo)
                }
            })

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

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

        // 显示分页总条数
        showTotal(total) {
            return `共 ${total} 条`;
        }
        //页面中英文翻译
        getDetailTableColumns = () => {
            let { language } = this.state;
            let data = {
                params: [{
                    reactCode: ['AccountUsageMaintenance'],
                    compontName: 'AccountUsageMaintenance',
                    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>{language.language == 'EN' ? item.enDescripts : item.title}</div>
                            }
                        }) : '';
                        let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                        this.setState({ columns: filterArr, detailWidthTotal: res.totalWidth, ChineseEnglishSize: language.language == 'EN' ? res.result.language.EN : res.result.language.CN })
                    }
                }
            })
        };
        render() {
            const { getFieldDecorator } = this.props.form;
            const { userInfo, ChineseEnglishSize, columns } = this.state;
            return (
                <div className="DataMaintenance">
                    <Col span={14}>
                        <Row>
                            <Card
                                size="small"
                                title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.AccountUsageMaintenancelist ? ChineseEnglishSize.AccountUsageMaintenancelist.descripts : '账户用途列表'}</div>}>
                                <Col span={24}>
                                    <Row >
                                        <Col span={5}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.AccountUsageMaintenancecode ? ChineseEnglishSize.AccountUsageMaintenancecode.descripts : '代码'}>
                                                {getFieldDecorator('acCode', {
                                                    initialValue: undefined,
                                                })(
                                                    <Input />
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={5}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.AccountUsageMaintenanceDesc ? ChineseEnglishSize.AccountUsageMaintenanceDesc.descripts : '描述'}>
                                                {getFieldDecorator('acDesc', {
                                                    initialValue: undefined,
                                                })(
                                                    <Input />
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col span={8}>
                                            <FormItem {...formItemLayout} label={ChineseEnglishSize.AccountUsageMaintenancepayWay ? ChineseEnglishSize.AccountUsageMaintenancepayWay.descripts : '支付方式'}>
                                                {getFieldDecorator('acPayWayID', {
                                                    initialValue: undefined,
                                                })(
                                                    <Select showSearch optionFilterProp="title" style={{ width: '150px' }} >
                                                        {this.state.payWayData && this.state.payWayData.map(item => {
                                                            return <Option key={item.id} value={item.id} title={item.descripts} seatchprop={item.id}>{item.descripts}</Option>
                                                        })}
                                                    </Select>
                                                )}
                                            </FormItem>
                                        </Col>
                                        <Col style={{ textAlign: 'center' }} span={6}>
                                            <Button onClick={this.searchInformation}>{ChineseEnglishSize.AccountUsageMaintenancequery ? ChineseEnglishSize.AccountUsageMaintenancequery.descripts : '查询'}</Button>
                                            <Button type="primary" onClick={this.importData} style={{ marginLeft: '20px' }}>{ChineseEnglishSize.AccountUsageMaintenanceclean ? ChineseEnglishSize.AccountUsageMaintenanceclean.descripts : '清屏'}</Button>
                                        </Col>
                                    </Row>
                                </Col>
                            </Card>
                        </Row>
                        <Row>
                            <Col>
                                <Card
                                    size="small"
                                >
                                    <div style={{ height: store.getState().tableHeight.y + 94 + 'px' }}>
                                        <Table
                                            columns={columns.length > 0 ? columns : this.columns}
                                            dataSource={this.state.GroupListData}
                                            pagination={false}
                                            bordered
                                            style={{ height: store.getState().tableHeight.y + 61 + 'px' }}
                                            scroll={{ y: store.getState().tableHeight.y + 10 }}
                                            rowKey={record => record.key}
                                            onRow={this.onClickRow}
                                            rowClassName={this.setRowClassName}
                                        />
                                        <CommonPagination size='small' current={this.state.page} total={this.state.total} search='search'
                                            onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.GroupListData}
                                            loading={this.state.loading} onChange={this.onChange.bind(this)} pageSize={true} />
                                    </div>
                                </Card>
                            </Col>
                        </Row>
                    </Col>
                    <Col span={10}>
                        <Col >
                            <Form>
                                <Card
                                    title={<div className="card-title-left-icon"><div></div>{ChineseEnglishSize.AccountUsageMaintenanceinfo ? ChineseEnglishSize.SAccountUsageMaintenanceinfo.descripts : '账户用途信息'}</div>}
                                    size="small"
                                >
                                    <div style={{ height: store.getState().tableHeight.y + 129 + 'px' }}>
                                        <Col span={20}>

                                            <Row span={8}>
                                                <FormItem label={ChineseEnglishSize.AccountUsageMaintenancecode ? ChineseEnglishSize.AccountUsageMaintenancecode.descripts : '代码：'} {...formItemItem}>
                                                    {getFieldDecorator('code', {
                                                        initialValue: userInfo.tkCode ? userInfo.tkCode : undefined,
                                                        rules: [{ required: ChineseEnglishSize.AccountUsageMaintenancecode ? ChineseEnglishSize.AccountUsageMaintenancecode.required == 'Y' ? true : false : false, message: ChineseEnglishSize.AccountUsageMaintenancecode ? ChineseEnglishSize.AccountUsageMaintenancecode.message : '请输入代码' }]
                                                    })(
                                                        <Input style={{ width: '100%' }} />
                                                    )}
                                                </FormItem>
                                            </Row>

                                            <Row span={8}>
                                                <FormItem label={ChineseEnglishSize.AccountUsageMaintenanceDesc ? ChineseEnglishSize.AccountUsageMaintenanceDesc.descripts : '描述：'} {...formItemItem}>
                                                    {getFieldDecorator('desc', {
                                                        initialValue: userInfo.tkDesc ? userInfo.tkDesc : undefined,
                                                        rules: [{ required: ChineseEnglishSize.AccountUsageMaintenanceDesc ? ChineseEnglishSize.AccountUsageMaintenanceDesc.required == 'Y' ? true : false : false, message: ChineseEnglishSize.AccountUsageMaintenanceDesc ? ChineseEnglishSize.AccountUsageMaintenanceDesc.message : '请输入描述' }]
                                                    })(
                                                        <Input style={{ width: '100%' }} />
                                                    )}
                                                </FormItem>
                                            </Row>
                                            <Row span={8}>
                                                <FormItem label={ChineseEnglishSize.AccountUsageMaintenancepayWay ? ChineseEnglishSize.AccountUsageMaintenancepayWay.descripts : '支付方式：'} {...formItemItem}>
                                                    {getFieldDecorator('payWayId', {
                                                        initialValue: userInfo.payWayID ? userInfo.payWayID : undefined,
                                                        rules: [{ required: ChineseEnglishSize.AccountUsageMaintenancepayWay ? ChineseEnglishSize.AccountUsageMaintenancepayWay.required == 'Y' ? true : false : false, message: ChineseEnglishSize.AccountUsageMaintenancepayWay ? ChineseEnglishSize.AccountUsageMaintenancepayWay.message : '请选择支付方式' }]
                                                    })(
                                                        <Select allowClear style={{ width: '100%' }}>
                                                            {this.state.selectData.length > 0 && this.state.selectData.map(item => {
                                                                return <Option value={item.id} key={item.id} title={item.descripts} seatchprop={item.id}>{item.descripts}</Option>
                                                            })}
                                                        </Select>
                                                    )}
                                                </FormItem>
                                            </Row>
                                            <Row span={8}>
                                                <FormItem label={ChineseEnglishSize.AccountUsageMaintenancetype ? ChineseEnglishSize.AccountUsageMaintenancetype.descripts : '类型：'} {...formItemItem}>
                                                    {getFieldDecorator('type', {
                                                        initialValue: userInfo.type ? userInfo.type : undefined,
                                                        rules: [{ required: ChineseEnglishSize.AccountUsageMaintenancetype ? ChineseEnglishSize.AccountUsageMaintenancetype.required == 'Y' ? true : false : false, message: ChineseEnglishSize.AccountUsageMaintenancetype ? ChineseEnglishSize.AccountUsageMaintenancetype.message : '请输入类型' }]
                                                    })(
                                                        <Input style={{ width: '100%' }} />
                                                    )}
                                                </FormItem>
                                            </Row>
                                            <Row span={4}>
                                                <FormItem label={ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag ? ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag.descripts : '是否按就诊:'}{...formItemItem}>
                                                    {getFieldDecorator('IfAdmflag', {
                                                        initialValue:this.state.IfAdmflag,
                                                        rules: [{ required: ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag ? ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag.required == 'Y' ? true : false : false, message: ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag ? ChineseEnglishSize.AccountUsageMaintenanceIfAdmflag.message : '请选择是否按就诊' }]
                                                    })(
                                                        <Switch checkedChildren="Y" unCheckedChildren="N" onChange={this.onChangeIfSupplementOrd} checked={this.state.IfAdmflag} />
                                                    )}
                                                </FormItem>
                                            </Row>
                                        </Col>
                                    </div>
                                </Card>
                            </Form>
                        </Col>
                        <Col>
                            <Row style={{ marginTop: '10px', textAlign: 'right' }} >
                                <Button type="primary" style={{ marginRight: '30px' }} onClick={this.saveData}>{ChineseEnglishSize.StkTakeMaintenancesave ? ChineseEnglishSize.StkTakeMaintenancesave.descripts : '保存'}</Button>
                                <Button onClick={this.resetFields}>{ChineseEnglishSize.StkTakeMaintenancereSet ? ChineseEnglishSize.StkTakeMaintenancereSet.descripts : '重置'}</Button>
                            </Row>
                        </Col>
                    </Col>
                </div>
            )
        }
    }


);
export default DataMaintenance;