import React from 'react';
import { Select, Table } from 'antd';
import { $http } from 'containers/config/https';
class SeletTable extends React.Component {
    constructor(props) {
        super(props);
        this.columns = [
            {
                title: '序号',
                dataIndex: 'index',
                key: 'index',
                align: 'center',
                width: 30,
                fixed: true,
                render: function (text, record, index) {
                    return index + 1;
                }
            }, {
                title: '代码',
                dataIndex: 'Code',
                key: 'Code',
                width: 200,
                align: 'center'
            }, {
                title: '描述',
                dataIndex: 'Descripts',
                key: 'Descripts',
                width: 80,
                align: 'center'
            }, {
                title: '规格',
                dataIndex: 'Spec',
                key: 'Spec',
                width: 60,
                align: 'center'
            }, {
                title: '库存子类',
                dataIndex: 'StkSubCat',
                key: 'StkSubCat',
                width: 81,
                align: 'center'
            }, {
                title: '基本单位',
                dataIndex: 'BaseUom',
                key: 'BaseUom',
                width: 70,
                align: 'center'
            }, {
                title: '医嘱名称',
                dataIndex: 'MedItem',
                key: 'MedItem',
                align: 'center'
            }
        ];
    }
    rowClick = (recrod, index, e) => {
        this.props.selectCallBack(recrod, index, e);
    }
    componentDidMount() {
        //addEventListener("click",(e)=>{e.stopPropagation();},false);
    }
    render() {
        return (
            <div onClick={e => { e.nativeEvent.stopImmediatePropagation(); }}>
                <Table
                    dataSource={this.props.dataSource}
                    rowKey={(record) => record.ID}
                    columns={this.columns}
                    bordered
                    scroll={{ x: '200%', y: '200px' }}
                    onChange={(pagination, filters, sorter) => { }}
                    pagination={{ onChange: (page, pageSize) => { } }}
                    onRow={(record, index) => ({ onClick: (e) => { this.rowClick(record, index, e) } })}
                />
            </div>

        );
    }
}
class StockItemSelect extends React.Component {
    constructor(props) {
        super(props);
        const value = props.value || {};
        const visible = props.visible || false;
        this.state = {
            selectDataSource: [],
            visible: visible,
            id: value.value||'',
            desc: value.desc||'',
            pagination: [{
                currentPage: 1,
                pageSize: 10
            }]
        }
        this.timeout = null;
        this.currentValue = null;
    }
    static getDerivedStateFromProps(nextProps, prevState) {
        let ret = null;
        if ('value' in nextProps) {
            ret = { ...(nextProps.value || { id: '', desc: '' }) };
        }
        if ('visible' in nextProps) {
            ret = { ...ret, ...{ visible: nextProps.visible } }
        }
        return ret;
    }
    fetch = (value, callback) => {
        if (this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = null;
        }
        if (value==''){
            return;
        }
        let currentValue = value;
        let state = this.state;
        function fake() {
            const params = [{ descripts: "^" + value }];
            const { pagination } = state;
            $http.post("", this, {
                code: '02020027',
                data: { params: params, pagination: pagination },
                success: function (res) {
                    if (currentValue == value) {
                        if (res.result) {
                            callback(res.result);
                        }
                    }
                },
                error: function () {
                }
            });
        }
        this.timeout = setTimeout(fake, 500);
    }
    handleSearch = (value) => {
        this.fetch(value, data => this.setState({ selectDataSource: data.rows }));
    }
    handleSelectChange = (value) => {

    }
    selectFocus() {
        this.selectElement.rcSelect.inputRef.focus();
    }
    selectCallBack = (record, index, e) => {
        const value = { id: record.ID, desc: record.Descripts, visible: false };
        if (this.props.itemChangeCallback) {
            this.props.itemChangeCallback(record, index, e);  ///选中table中对应记录的回调
        }
        this.setState(value);
        this.triggerChange(value);
    }
    triggerChange=(changedValue)=>{
        const onChange = this.props.onChange;
        if (onChange) {
            const obj = Object.assign({}, this.state, changedValue);
            let value = {};
            for (let key in obj) {
                if (key == 'id' || key == 'desc') {
                    value[key] = obj[key];
                }
            }
            onChange(value);
        }
    }
    componentDidMount() {
        document.addEventListener("click", (e) => { this.state.visible ? this.setState({ visible: false }) : ''; return; }, false);
    }
    shouldComponentUpdate(nextProps, nextState) {
        if (nextState) {
            for (let key in nextState) {
                if (nextState[key] != this.state[key]) {
                    return true;
                }
            }
        }
        return false;
    }
    componentDidUpdate() {
        if (this.state.visible) {
            this.selectFocus();
        }
    }
    render() {
        const props = this.props;
        return (
            <div onClick={e => e.nativeEvent.stopImmediatePropagation()}>
                <Select
                    {...props}
                    showSearch
                    ref={el => { this.selectElement = el; if (this.props.itemRef) { this.props.itemRef(el); } }}
                    defaultActiveFirstOption={false}
                    showArrow={false}
                    filterOption={false}
                    onSearch={this.handleSearch}
                    onFocus={() => { this.setState({ visible: true }) }}
                    notFoundContent={null}
                    dropdownRender={(menuNode, props) => {
                        return (
                            <SeletTable selectCallBack={this.selectCallBack} dataSource={this.state.selectDataSource} />
                        );
                    }}
                    dropdownMatchSelectWidth={false}
                    dropdownStyle={{ width: '800px' }}
                    getPopupContainer={(el) => el}
                    open={this.state.visible}
                    value={this.state.id}
                >
                    <Select.Option value={this.state.id}>{this.state.desc}</Select.Option>
                </Select>
            </div>
            // <Dropdown
            //     visible={this.state.visible}
            //     overlayStyle={{ width: '800px' }}
            //     //trigger={'click'}
            //     placement={'bottomLeft'}
            //     overlay={() => (
            //         <SeletTable selectCallBack={this.selectCallBack} dataSource={this.state.selectDataSource} />
            //     )}
            // >
            //     <Input onClick={e=>e.nativeEvent.stopImmediatePropagation()} onFocus={(e) => {  this.setState({ visible: true }) }} onBlur={(e) => { }} onChange={(e) => { this.handleSearch(e.target.value); }}>
            //     </Input>
            // </Dropdown>
        );
    }
}
export default StockItemSelect;