import React from 'react'
import PropTypes from 'prop-types';
import { $http } from 'containers/config/https';
import CommonPagination from 'components/pagination/index';
import ColumnAuthoritysModel from 'pages/columnAuthority/ColumnAuthoritysModel';
import '../style/style.less'

import { Form, Input, Col, Table, Row, Divider, span } from 'antd';

const FormHandel = Form.create()(
    class extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                visible: false,
                userInfo: {},
                itemAllTotalAmt: '',
                total: 0,
                dataAmt: 0,
                dis: false,
                total: 0,
                page: 1,
                pageSize: 10,
                columns: [],
                languageTable1: {}, // 国际化Table1
                languageTable2: {}, // 国际化Table2
                languageData: {}, // 国际化语言包
                language: {},   // 国际化语言
                languageCode: JSON.parse(window.sessionStorage.userData).language, // 国际化语言标识

            };
            // this.columns = [
            //     {
            //         title: '项目名称',
            //         dataIndex: 'itemBillItemID',
            //         width: 200,
            //         align: 'center'
            //     },
            //     {
            //         title: '项目规格',
            //         dataIndex: 'itemBillSpec',
            //         width: 100,
            //         align: 'center'
            //     },
            //     {
            //         title: '项目单价',
            //         dataIndex: 'itemBillPrice',
            //         width: 100,
            //         align: 'center'
            //     },
            //     {
            //         title: '项目单位',
            //         dataIndex: 'itemBillUnitID',
            //         width: 100,
            //         align: 'center'
            //     },
            //     {
            //         title: '项目数量',
            //         dataIndex: 'itemBillQty',
            //         width: 100,
            //         align: 'center'
            //     },
            //     {
            //         title: '应付总额',
            //         dataIndex: 'itemBillTotalAmt',
            //         width: 100,
            //         align: 'center'
            //     },
            //     {
            //         title: '执行科室',
            //         dataIndex: 'itemBillDesc',
            //         width: 100,
            //         align: 'center'
            //     },
            // ]
        }
        //初始化数据
        componentDidMount() {
            this.tableList();
            this.props.onRef(this)
            this.setState({
                userInfo: this.props.userInfo
            }, () => {
                this.handleQuery()
            })

            if (this.props.special === 'center') {
                this.setState({
                    dis: true
                })
            }

        }

        onColumnRef = (ref) => {
            this.columnRef = ref;
        }
        // 获取主列表columns
        tableList = () => {
            var data = {
                params: [{
                    "reactCode": ["PayMentRecordModal"],
                    "compontName": "PayMentRecordModal",
                    "type": "C"
                }]
            }
            $http.post('urlS', this, {
                code: '01040073',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0) {
                        let resC = res.result.C
                        let { languageCode } = this.state
                        for (var i = 0; i < resC.length; i++) {
                            resC[i].key = i;
                        }
                        if (languageCode === "EN") {
                            resC.map((item, i) => {
                                item.title = item.enDescripts
                            })
                        }

                        if (languageCode === "CN") {
                            resC.map((item, i) => {
                                item.title = item.descripts
                            })
                        }
                        let arr = res.result && resC.length > 0 ? JSON.parse(JSON.stringify(resC)).map(item => {
                            return {
                                align: item.align,
                                widthNum: parseInt(item.width),
                                width: item.width,
                                dataIndex: item.dataIndex,
                                title: <div onDoubleClick={() => this.columnRef.onOpenModel()}>{item.title}</div>,
                                display: item.display,
                                key: item.seqNo
                            }
                        }) : '';
                        let filterArr = arr.filter(function (item) { return item.display === 'Y' });
                        this.setState({
                            columns: filterArr,
                            languageTable1: res.result.B || {},  // 国际化Table1
                            languageTable2: res.result.C || {},  // 国际化Table2
                            languageData: res.result.language || {},  // 国际化语言包
                        }, () => {
                            this.LanCNEN(this.state.languageCode)
                        })
                    }
                }
            })
        }

        LanCNEN = (code) => {
            let { languageData } = this.state
            this.setState({
                language: languageData[code]
            })
        }

        //列表数据
        handleQuery = () => {
            let { page, pageSize } = this.state;
            let data = {
                "params": [{
                    "recordInvID": this.state.userInfo.ID,
                    "invType": this.state.userInfo.invType
                }],
                pagination: [{
                    pageSize: pageSize,
                    currentPage: page,
                    sortColumn: 'code',
                    sortOrder: 'asc'
                }]
            }

            $http.post('urlS', this, {
                code: '05100099',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 && res.result) {
                        for (var i = 0; i < res.result.length; i++) {
                            res.result[i].key = i;
                        }
                        this.setState({ data: res.result, dataAmt: res.allTotalAmt, total: res.totalCount, loading: false })
                    } else {
                        this.setState({ data: [], dataAmt: 0, total: 0, loading: false })
                    }
                }
            })
        }
        // 页码改变的回调，参数是改变后的页码及每页条
        onChange = (page, pageSize) => {
            this.setState({ page: page, pageSize: pageSize }, () => {
                this.handleQuery()
            });
        }
        // 条数改变的回调
        onShowSizeChange = (current, size) => {
            this.setState({ page: current, pageSize: size }, () => {
                // 重新调用查询方法
                this.onChange(current, size);
            })
        }
        // 重置表单
        resetFields() {
            this.props.form.resetFields(); //清空所有
        }
        render() {
            return (
                <div className="outpatient-body">
                    <Row style={{ height: '10px', lineHeight: '10px', marginLeft: '0px', display: this.state.dis ? 'none' : 'block' }}>
                        <Col span={24} style={{ height: '20px', background: '#fff', color: 'rgb(66, 185, 131)', }}>
                            <span>{this.state.userInfo.name}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.name !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.sexDesc}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.sexDesc !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.patBirthDate}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.patBirthDate !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.patAge}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.patAge !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.recordPayDate}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.recordPayDate !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.invNo}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.invNo !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.patTypeDesc}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.patTypeDesc !== '' ? 'inline-block' : 'none' }} />
                            <span>{this.state.userInfo.payWayID}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.payWayID !== '' ? 'inline-block' : 'none' }} />
                            ￥<span>{this.state.userInfo.recordTotalAmt}</span>
                            <Divider type="vertical" style={{ margin: '0 15px', display: this.state.userInfo.recordTotalAmt !== '' ? 'inline-block' : 'none' }} />
                        </Col>
                    </Row>
                    <Row>
                        <Col span={24}>
                            {/* <Table style={{ minHeight: '300px' }} columns={this.columns} dataSource={this.state.data} pagination={false} bordered></Table> */}
                            <Table
                                style={{ minHeight: '300px' }}
                                dataSource={this.state.data}
                                columns={this.state.columns}
                                pagination={false}
                                bordered
                            />
                            <ColumnAuthoritysModel
                                clientWidth='900px'
                                compontName='PayMentRecordModal'
                                configType="C"
                                onRef={this.onColumnRef}
                                reloadData={this.tableList}
                            />
                        </Col>
                    </Row>
                    <Row>
                        <CommonPagination size="small" current={this.state.page} total={this.state.total} search='search'
                            onShowSizeChange={this.onShowSizeChange.bind(this)} complete={true} dataSource={this.state.data}
                            onChange={this.onChange.bind(this)} />
                    </Row>
                </div >
            )
        }
    }
)
export default FormHandel;

FormHandel.propTypes = {
    // 验证userInfo的属性
    userInfo: PropTypes.object
}