import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop, WeaFormItem, WeaTable, WeaRightMenu,
    WeaNewScroll, WeaSearchGroup, WeaLocaleProvider, WeaTab
} from 'ecCom'
import {
    Row, Col, Button, Modal, message, Input, Dropdown, Icon, Menu
} from 'antd'
import { WeaSwitch } from 'comsMobx'
import {
    i18n
} from '../../public/i18n';
import QuickSearchTableEdit from './QuickSearchTableEdit';
import QuickSearchDetail from './QuickSearchDetail';
const getLabel = WeaLocaleProvider.getLabel;

const toJS = mobx.toJS;
const confirm = Modal.confirm;



@inject('quickSearch')
@observer
export default class QuickSearch extends React.Component {
    constructor(props) {
        super(props);
    }

    componentWillMount() {
    }

    componentDidMount() {
        const {
            quickSearch
        } = this.props;
        quickSearch.initList();
    }

    componentWillUnmount() {
    }


    componentWillReceiveProps(nextProps) {
        const {
            quickSearch
        } = this.props;

        if (this.props.location.key !== nextProps.location.key) {
            quickSearch.initList();
        }
    }

    getDropMenuDatas() {
        const {
            quickSearch
        } = this.props,{
            rightMenu
        } = quickSearch

        let menus = [];
        toJS(rightMenu).map((item, index) => {
            let obj = {
                key: item.menuFun,
                icon: <i className={`${item.menuIcon}`} />,
                content: getLabel('547360', "保存"),
            }
            menus.push(obj);
        })
        return menus;
    }

    getTopMenuBtns() {
        const {
            quickSearch
        } = this.props,{
            topMenu
        } = quickSearch

        let btns = [];
        topMenu.map((item, i) => {
            btns.push(<Button type='primary' onClick={() => {
this[item.menuFun] && this[item.menuFun]();
}}>{getLabel('547360', "保存")}</Button>);
        });
        return btns;
    }

    save = () => {
        const {
            quickSearch
        } = this.props;
        quickSearch.saveQuickSearchInfo();
    }


    getFormItems = () => {
        const { quickSearch } = this.props;
        const { quickSearchFields, quickSearchForm } = quickSearch;
        const arr = [];
        const formParams = quickSearchForm.getFormParams();
        const { isFormInit } = quickSearchForm;
        isFormInit && quickSearchFields.map((field, index) => {
            arr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4cc308@${index}`} offset={1}>
                <div style={{ marginTop: 20 }}>
                    <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@u6ex85@${index}`}
                        label={`${getLabel('547592', "快捷搜索条件")}`}
                        labelCol={{ span: `${field.labelcol}` }}
                        wrapperCol={{ span: `${field.fieldcol}` }}>
                        {<WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p7d3td@${index}`} fieldConfig={field} form={quickSearchForm} formParams={formParams} />}
                    </WeaFormItem>
                </div>
            </Col>)
        })

        return <Row>{arr}</Row>
    }

    getSearchButton = () => {
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7xw5i9@addRow`} type="primary" shape="circle" title={getLabel(611, '添加')} size="small" disabled={0} onClick={() => {
                this.addRow();
            }}><i className="anticon anticon-plus"></i></Button>),
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@lzrtmm@delRow`} shape="circle" title={getLabel(126371, '删除')} size="small" onClick={() => {
                this.delRow();
            }} ><i className="anticon anticon-minus"></i></Button>
        ]
    }

    addRow = () => {
        const { quickSearch } = this.props;
        let { quickSearchData } = quickSearch;
        let datas = quickSearchData.datas;
        if(datas.length>=8){
            message.error(getLabel('547622',"最多只能添加8项"));
            return;
        }
        let time = new Date().getTime();
        let type = quickSearchData.options.length > 0 ? quickSearchData.options[0].type : '2';
        let fieldid = quickSearchData.options.length > 0 ? quickSearchData.options[0].key : '';
        let customname = quickSearchData.options.length > 0 ? quickSearchData.options[0].showname : '';
        let isdetailtable = quickSearchData.options.length > 0 ? quickSearchData.options[0].isdetailtable : '0';
        let obj = {
            key: "new_" + time,
            fieldid: fieldid,
            customname: customname,
            range: type == '1' ? getLabel('547623', "内容自定义") : getLabel('547624', "字段本身值"),
            condition: type == '1' ? getLabel('547625', "设置") : '',
            orderid: 0,
            type: type,
            isdetailtable: isdetailtable
        }
        datas = toJS(datas);
        datas.push(obj);
        quickSearch.setQuickSearchData(datas);
    }

    delRow = () => {
        const { quickSearch } = this.props;
        let { qcSelectedRowKeys } = quickSearch;
        if (qcSelectedRowKeys.length <= 0) {
            message.error(getLabel(547626, '请选择要删除的信息'));
            return;
        }
        const that = this;
        Modal.confirm({
            title: getLabel(547627, '您确认要删除选中的记录吗？'),
            onOk() {
                let { datas } = quickSearch.quickSearchData;
                datas = toJS(datas);
                datas = that.delFromArray(datas, qcSelectedRowKeys);
                quickSearch.qcSelectedRowKeys = [];
        		quickSearch.setQuickSearchData(datas);
        	},
        	onCancel() {},
        });
    }

     delFromArray = (array, selectRowIds) => {
        for (let i = 0; i < selectRowIds.length; i++) {
            let key = selectRowIds[i];
            for (let j = 0; j < array.length; j++) {
                if (array[j]["key"] == key) {
                    array.splice(j, 1);
                    break;
                }
            }
        }
        return array;
    }

    onSelectChange = (keys, rows) => {
        let keyarr = [];
        rows.map(row => {
            keyarr.push(row.key);
        });
        const { quickSearch } = this.props;
        quickSearch.qcSelectedRowKeys = keyarr;
    }


    onChange = (data) => {
        const { quickSearch } = this.props;
        quickSearch.setQuickSearchData(data);
    }



    render() {

        const { quickSearch: store } = this.props;
        const { qcSelectedRowKeys } = store;
        const rowSelection = {
            selectedRowKeys: qcSelectedRowKeys,
            onChange: this.onSelectChange,
        }

        return (
            <div ref='page' style={{ height: '100%' }}>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@k6oc4u`}
                    datas={this.getDropMenuDatas()}
                    onClick={key => {
this[key] && this[key]()
}}
                    >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                        title={i18n.label.quickSearchCustom()}
                        icon={<i className='icon-coms-hrm' />}
                        iconBgcolor='#217346'
                        loading={true}
                        buttons={this.getTopMenuBtns()}
                        showDropIcon={true}
                        dropMenuDatas={this.getDropMenuDatas()}
                        onDropMenuClick={(key) => {
this[key] && this[key]()
}}
                    >
                        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@weabdm`}>

                            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ddy3vv`} needTigger={false} showGroup={true} title={getLabel(82751, "基础设置")}>
                                {this.getFormItems()}
                            </WeaSearchGroup>
                            <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@s8pupj`} needTigger={false} showGroup={true} title={getLabel(547593, "条件字段")}>
                                <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@sxnhjh`}
                                    keyParam="key"  //主键
                                    buttons={this.getSearchButton()}
                                />
                                <QuickSearchTableEdit ecId={`${this && this.props && this.props.ecId || ''}_QuickSearchTableEdit@1xviqu`}
                                    datas={toJS(store.quickSearchData.datas)}
                                    options={toJS(store.quickSearchData.options)}
                                    onChange={this.onChange}
                                    rowSelection={rowSelection}
                                    ListProps={this.props}
                                />
                            </WeaSearchGroup>
                        </WeaNewScroll>
                        <QuickSearchDetail ecId={`${this && this.props && this.props.ecId || ''}_QuickSearchDetail@plu05u`}  {...this.props}/>
                    </WeaTop>
                </WeaRightMenu>

            </div>
        )
    }
}