import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTable, WeaLocaleProvider, WeaSelect, WeaInput, WeaInputNumber
} from 'ecCom'
import {
    Row, Col, Button, Modal, message, Input, Dropdown, Icon, Menu
} from 'antd'
import {
    i18n
} from '../../public/i18n';
const getLabel = WeaLocaleProvider.getLabel;
import jQuery from "jquery";
const toJS = mobx.toJS;

export default class QuickSearchTableEdit extends React.Component {


    /**========================table字段类型=====================*/
    getColumns = () => {
        let columnArray = [
            {
                title: getLabel(261, "字段"), dataIndex: "fieldid", key: "fieldid", width: "18%",
                com: [{ label: '', type: 'SELECT', isLink: true, key: 'fieldid', options: [] }]
            },
            {
                title: getLabel(195, "名称"), dataIndex: "customname", key: "customname", width: "18%",
                com: [{
                    label: '', type: 'INPUT', key: 'customname', viewAttr: 2, otherParams: { isBase64: true, inputType: "multilang" }
                }]
            },
            {
                title: getLabel(389518, "查询范围"), dataIndex: "range", key: "range", width: "8%",
                com: [{ label: '', type: 'INPUT', key: 'range', viewAttr: 1 }]
            },
            {
                title: getLabel(387588, "内容自定义条件"), dataIndex: "condition", key: "condition", width: "15%",
                com: [{ label: '', type: 'BUTTON', key: 'condition', viewAttr: 1 }]
            }, {
                title: getLabel(21657, "显示模式"), dataIndex: "showmodel", key: "showmodel", width: "15%",
                com: [{
                    label: '',
                    type: 'SELECT',
                    key: 'showmodel',
                    viewAttr: 2,
                    options: [{ key: '0', showname: getLabel(149, '默认') }, { key: '1', showname: getLabel(19852, '平铺') },]
                }]
            }
        ];
        columnArray = columnArray.map((col) => {
            let _col = { ...col };
            _col.render = (text, record, index) => {
                return this.getColRender(_col, text, record, index);
            }
            return _col
        });
        return columnArray;
    }

    getColRender = (_col, text, record, index) => {
        const {
            quickSearch: store
        } = this.props;
        const { com } = _col;
        let _com = [];
        com.map((c, idn) => {
            if (typeof c.props === 'object') {
                _com.push(<span></span>);
            } else {
                const { key, isLink = false, viewAttr = 2, type = 'INPUT', width, otherParams = {}, detailtype = 1, options = [] } = c;
                const _type = type.toUpperCase();
                record.range = record.type == '1' ? getLabel('387636', "内容自定义") : getLabel('387637', "字段本身值");
                record.condition = record.type == '1' ? getLabel('68', "设置") : '';
                if (_type === 'INPUT') {
                    _com.push(<WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@gedh14@${idn}`}
                        style={{ minWidth: 60 }}
                        value={record[key]}
                        viewAttr={viewAttr}
                        onChange={(value) => this.onEdit(record, index, key, value)}
                        {...otherParams}
                        length={100}
                    />)
                } else if (_type === 'BUTTON') {
                    _com.push(<a onClick={() => this.onClick(record)}
                        style={{ width, display: 'inline-block' }}>{record[key]}</a>);
                } else if (_type === 'INPUTNUMBER') {
                    _com.push(<WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@9qqytl@${idn}`}
                        value={record[key]}
                        style={{ width, display: 'inline-block' }}
                        viewAttr={viewAttr}
                        onChange={(value) => this.onEdit(record, index, key, value)}
                        {...otherParams}
                    />)
                } else if (_type === 'SELECT') {
                    if (isLink) {
                        _com.push(<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@h3f5u2@${idn}`}
                        style={{ width, display: 'inline-block', minWidth: 173 }}
                        options={toJS(this.props.options)}
                        viewAttr={viewAttr}
                        value={record[key]}
                        detailtype={detailtype}
                        onChange={(value) => {
                            this.onEdit(record, index, key, value)
                        }}
                        showSearch
                        filterOption={(inputValue, option) => this.selectFilterOption(inputValue, option)}
                    />);
                    }else if (key === 'showmodel') {//可以设置平铺的类型
                        const opt = this.props.options.filter(item => item.fieldid === record.fieldid);
                        const isShowModel = opt[0] ? opt[0].isShowModel : false;
                        if (isShowModel) {
                            if (!record[key]) {
                                record[key] = '0'
                            }
                            _com.push(<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@ffcq2z@${idn}`}
                                style={{ width, display: 'inline-block' }}
                                options={options}
                                viewAttr={viewAttr}
                                value={record[key]}
                                detailtype={detailtype}
                                onChange={(value) => {
                                    this.onEdit(record, index, key, value)
                                }}
                                filterOption={(inputValue, option) => selectFilterOption(inputValue, option)}
                            />);
                        }
                    }

                    
                }
            }
        });
        return (
            <div className="cube-quicksearch-list-form">{_com}</div>
        )
    };

    onDropChange = (data) => {
        typeof this.props.onChange === 'function' && this.props.onChange(data);
    }

    onClick = (record) => {
        const { ListProps } = this.props;
        const { quickSearch } = ListProps;
        let key = record.key;
        if (key.indexOf("new") >= 0 || record.fieldid != record.orifieldid) {
            message.error(getLabel(82228, "请先保存再设置条件"));
            return;
        }
        quickSearch.openQuickSearchDetail(record);
    };

    onEdit = (record, index, key, value, name, data) => {
        const { datas } = this.props;
        let _datas = [...datas];
        _datas[index][key] = value;
        if (key == 'fieldid') {
            let opt = this.getType(value);
            if (opt != null) {
                _datas[index].type = opt['type'];
                _datas[index].customname = opt['showname'];
                _datas[index].range = _datas[index].type == '1' ? getLabel('387636', "内容自定义") : getLabel('387637', "字段本身值");
                _datas[index].condition = _datas[index].type == '1' ? getLabel('68', "设置") : '';
                _datas[index].isdetailtable = opt['isdetailtable'];
            }
        }
        typeof this.props.onChange === 'function' && this.props.onChange(_datas);
    }

    getType = (key) => {
        let option = null;
        this.props.options.map(f => {
            if (f.key == key) {
                option = f;
            }
        });
        return option;
    }

    /**
     * 根据选择框的名称，搜索过滤选项
     * @param inputValue 
     * @param option 
     */
    selectFilterOption = (inputValue, option) => {
        if (inputValue != "") {
            const { children } = option["props"];
            if (children) {
                if ((typeof children) == "string") {
                    return children.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
                } else if ((typeof children) == "object" && children.length > 0) {
                    const childrenNew = children[0]["props"]["children"];
                    if (childrenNew) {
                        return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
                    } else {
                        return false;
                    }
                } else {
                    const childrenNew = children["props"]["children"];
                    if (childrenNew) {
                        return childrenNew.toLowerCase().indexOf(inputValue.toLowerCase()) != -1;
                    } else {
                        return false;
                    }
                }
            } else {
                return false;
            }
        }
        return true;
    }


    render() {
        const { datas, rowSelection } = this.props;
        return (
            <div className="wev-cube-table-inner-warp">
                <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@ofga8g`}
                    rowSelection={rowSelection}
                    columns={this.getColumns()}
                    dataSource={datas}
                    pagination={false}
                    draggable={true}
                    onDrop={this.onDropChange}
                />
            </div>
        )
    }
}