// 封装原生table
import React from 'react';
import { Checkbox } from 'antd';
import '../style/index.less';

export default class ProtogenesisTable extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            checkedAll: false,
            selectedRowKeys: [],
            selectedRows: [],
            data: [],
        }
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.params.data !== this.state.data) {
            let arr = nextProps.params && nextProps.params.data ? nextProps.params.data : [];

            this.setState({ data: arr }, () => {
                this.setCheckedAllStatus();
            });
        }
    }

    // 全选/反选
    handleCheckboxAll = () => {
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (this.state.checkedAll) {
                data[i].check = false
            } else {
                data[i].check = true
            }

        }
        this.setState({ data, checkedAll: !this.state.checkedAll }, () => {
            this.handleFilterSelectData()
        });
    }

    // 单个选中操作
    handleTriggerCheckbox = (rowData) => {
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].key === rowData.key) {
                data[i].check = !data[i].check;
                break;
            }
        }
        this.setState({ data }, () => {
            this.setCheckedAllStatus();
            this.handleFilterSelectData();
        });
    }

    // 设置全选框的选中状态
    setCheckedAllStatus = () => {
        let status = false;
        let data = this.state.data && this.state.data.length > 0 ? JSON.parse(JSON.stringify(this.state.data)) : [];
        for (var i = 0; i < data.length; i++) {
            if (data[i].check) {
                status = true;
            } else {
                status = false;
                break;
            }
        }
        this.setState({ checkedAll: status })
    }

    // 过滤选中的数据
    handleFilterSelectData = () => {
        let data = JSON.parse(JSON.stringify(this.state.data));
        let filterData = data.filter((function (item) { return item.check }))
        console.log(filterData);

        this.props.params.onChange(filterData, data);
    }

    render() {
        let { data } = this.state;
        let { params } = this.props;
        return (
            <div className="hospital-pharmacies" style={{ height: params && params.height ? params.height : '300px', overflow: 'hidden' }}>
                <div style={{ width: '100%', overflowY: 'scroll' }}>
                    <table className="table-detail-style ant-table-content">
                        <thead className="ant-table-header ant-table-thead">
                            <tr style={{ width: parseInt(params.width) + 'px', overflow: 'auto' }}>
                                <th style={{ width: '80px' }}>
                                    <Checkbox
                                        checked={this.state.checkedAll}
                                        onChange={this.handleCheckboxAll}
                                        disabled={data && data.length > 0 ? false : true}
                                    />
                                </th>
                                {params.columns && params.columns.map((item, index) => {
                                    return (
                                        <th key={index} style={{ width: parseInt(item.width ) + 'px', textAlign: item.align ? item.align : 'center' }}>{item.title}</th>
                                    )
                                })}
                            </tr>
                        </thead>
                    </table>
                </div>
                {data && data.length > 0 ? <div style={{ width: '100%', height: (params && params.height ? parseInt(params.height) - 45 : 255) + 'px', overflow: 'scroll' }}>
                    <table className="table-detail-style" style={{ borderTop: '0px' }}>
                        <tbody className="ant-table-tbody">
                            {data && data.map((item, index) => {
                                return (
                                    <tr key={index} style={{ width: parseInt(params.width) + 'px', overflow: 'auto' }} className={params && params.rowClassName && item.rowClassName === 'Y' ? params.rowClassName : ''}>
                                        <td style={{ width: '80px' }} key={index}><Checkbox checked={item.check} disabled={item.disabled} onChange={() => this.handleTriggerCheckbox(item)} /></td>
                                        {params.columns && params.columns.map((itemChild, indexChild) => {
                                            return (
                                                <td
                                                    key={indexChild}
                                                    style={{
                                                        width: parseInt(itemChild.width) + 'px',
                                                        textAlign: itemChild.align ? itemChild.align : 'center',
                                                        color: itemChild.dataIndex === 'aclFlag' && item[itemChild.dataIndex] === '是' ? 'red' : ''
                                                    }}
                                                >
                                                    {item[itemChild.dataIndex]}
                                                </td>
                                            )
                                        })}
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div> : <div className="ant-table-placeholder" style={placeholderStyle}>
                    <div className="ant-empty ant-empty-normal">
                        <div className="ant-empty-image">
                            <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNDEiIHZpZXdCb3g9IjAgMCA2NCA0MSIgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCAxKSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgIDxlbGxpcHNlIGZpbGw9IiNGNUY1RjUiIGN4PSIzMiIgY3k9IjMzIiByeD0iMzIiIHJ5PSI3Ii8+CiAgICA8ZyBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI0Q5RDlEOSI+CiAgICAgIDxwYXRoIGQ9Ik01NSAxMi43Nkw0NC44NTQgMS4yNThDNDQuMzY3LjQ3NCA0My42NTYgMCA0Mi45MDcgMEgyMS4wOTNjLS43NDkgMC0xLjQ2LjQ3NC0xLjk0NyAxLjI1N0w5IDEyLjc2MVYyMmg0NnYtOS4yNHoiLz4KICAgICAgPHBhdGggZD0iTTQxLjYxMyAxNS45MzFjMC0xLjYwNS45OTQtMi45MyAyLjIyNy0yLjkzMUg1NXYxOC4xMzdDNTUgMzMuMjYgNTMuNjggMzUgNTIuMDUgMzVoLTQwLjFDMTAuMzIgMzUgOSAzMy4yNTkgOSAzMS4xMzdWMTNoMTEuMTZjMS4yMzMgMCAyLjIyNyAxLjMyMyAyLjIyNyAyLjkyOHYuMDIyYzAgMS42MDUgMS4wMDUgMi45MDEgMi4yMzcgMi45MDFoMTQuNzUyYzEuMjMyIDAgMi4yMzctMS4zMDggMi4yMzctMi45MTN2LS4wMDd6IiBmaWxsPSIjRkFGQUZBIi8+CiAgICA8L2c+CiAgPC9nPgo8L3N2Zz4K" alt="暂无数据" />
                        </div>
                        <p className="ant-empty-description">
                            暂无数据
                        </p>
                    </div>
                </div>}
            </div>
        )
    }
};
let placeholderStyle = {
    borderRight: '1px solid #e8e8e8',
    borderLeft: '1px solid #e8e8e8',
    position: 'relative',
    top: 0
}