/*
    公共组件-自定义参数查询组件
*/
import React, { Component } from 'react'
import { Button,Tooltip } from 'antd'
import Text from './components/Text'
import Number from './components/Number'
import Date from './components/Date'
import DateTime from './components/DateTime'
import Radio from './components/Radio'
import Checkbox from './components/Checkbox'
import Select from './components/Select'
import DeptSelect from './components/DeptSelect'
import UserSelect from './components/UserSelect'
import PrivSelect from './components/PrivSelect'
import MultiSelect from './components/MultiSelect'
import TimePicker from './components/TimePicker'
import './searchfields.css'

export default class Search extends Component {
    constructor(props){
        super(props)

        let map = {}
        let mapVlaue = {}
        let searchParams = props.searchParams || []
        let selectDatas = props.selec_data || []
        this.searchParams = searchParams
        this.selectDatas = selectDatas
        searchParams.map(item=>{
            if(item.type==="date" || item.type==="date_time"){
                if(item.scope!=="among"&&typeof item.value==="object"){
                    item.value=""
                    item.date_value=""
                }
            }
            if(item.date_value){
                mapVlaue[item.key] = item.date_value
            }
            map[item.key] = item.value
                
        })
        this.state = {
            map: map,
            mapVlaue: mapVlaue,
        }
    }
    componentWillReceiveProps(nextProps){
        let map = {},mapVlaue={}
        let searchParams = nextProps.searchParams || []
        let selectDatas = nextProps.selec_data || []
        this.searchParams = searchParams
        this.selectDatas = selectDatas
        searchParams.map(item=>{
            if(item.type==="date" || item.type==="date_time"){
                if(item.scope!=="among"&&typeof item.value==="object"){
                    item.value=""
                    item.date_value=""
                }
            }
            if(item.date_value){
                mapVlaue[item.key] = item.date_value
            }
            if(item.type==="date"&&!item.date_type){
                item.date_type="YYYY-MM-DD"
            }
            if(item.type==="date_time"&&!item.date_type){
                item.date_type="YYYY-MM-DD HH:mm:ss"
            }
            map[item.key] = item.value
        })
       
        this.setState({
            map: map,
            mapVlaue: mapVlaue,
        })
    }
    onChange(key, value,date_value){
        let newMap = {...this.state.map}
        let newMapVlaue = {...this.state.mapVlaue}
        newMap[key] = value
        if(!date_value || date_value==="" ||date_value===null ){
            newMapVlaue[key] = null
        }else{
            newMapVlaue[key] = date_value  
        }
        
        this.setState({
            map: newMap,
            mapVlaue: newMapVlaue,
        })
    }
    onSearch(){
        let params = []
        let { map,mapVlaue } = this.state
        this.searchParams.map(item=>{
            // if(mapVlaue[item.key]){
            //     params.push({
            //         ...item,
            //         value: mapVlaue[item.key]
            //     })
            // }else{
                params.push({
                    ...item,
                    value: map[item.key]
                })
            // }
           
        })
        this.props.onSearch(params)
    }
    getSymbol(type){
        switch(type){
            case 'dept-select':
                return '包含'
                break;
            case 'user-select':
                return '包含'
                break;
            case 'priv-select':
                return '包含'
                break;
            default:
                return '等于'
        }

    }
    getScope(type){
        switch(type){
            case "equal":
                return "等于";
                break
            case "include":
                return "包含";
                break
            case "notInclude":
                return "包含";
                break
            case "big":               
            return "大于";
                break
            case "small":
                return "小于";
                break
            case "among":
                return "区间";
                break
            default:
                return '等于'
        }
    }
    render(){
        const me = this
        const getFieldLabel = (field) => {
            return (field.label + ': ' + this.getScope(field.scope))
        }
        let width="98%"
        if($("#myRepDetail")&&$("#myRepDetail").width()){
            width= $("#myRepDetail").width()-30;
        }

        return(
            <div className="rep-search clearfix">
                <div className="rep-search-wrapper clearfix" style={{width:width}}>
				{
                    this.searchParams.map((field, key) => (
                        <div key={key} className={field.type.includes('-select') ? "rep-search-field rep-search-field-2x" : "rep-search-field"}>
                            <Tooltip title={getFieldLabel(field)}>
                                <span className="rep-search-fieldslabel">{field.label}</span>
                            </Tooltip>
                            <span >&nbsp;</span>
                            {
                                (()=>{
                                    let fieldProps = {
                                        ...field,
                                        value : me.state.mapVlaue[field.key] ||  me.state.map[field.key],
                                        selectData : me.selectDatas,
                                        onChange(value,dateValue){
                                            me.onChange(field.key, value,dateValue)
                                        }
                                    }
                                    switch(field.type){
                                        case 'text':
                                            return <Text {...fieldProps} value={me.state.map[field.key]} />
                                            break;
                                        case 'number':
                                            return <Number {...fieldProps} />
                                            break;
                                        case 'date':
                                            return <Date {...fieldProps} />
                                            break;
                                        case 'time':
                                            return <TimePicker {...fieldProps} />
                                            break;
                                        case 'date-time':
                                            return <DateTime {...fieldProps} />
                                            break;
                                        case 'radio':
                                            return <Radio {...fieldProps} />
                                            break;
                                        case 'checkbox':
                                            return <Checkbox {...fieldProps} />
                                            break;
                                        case 'select':
                                            return <Select {...fieldProps}/>
                                            break;
                                        case 'dept-select':
                                            return <DeptSelect {...fieldProps} />
                                            break;
                                        case 'user-select':
                                            return <UserSelect {...fieldProps} />
                                            break;


                                        case 'numeral':
                                            return <Number {...fieldProps} />
                                            break;
                                        case 'date_time':
                                            return <DateTime {...fieldProps}/>
                                            break;
                                        case 'priv-select':
                                            return <PrivSelect {...fieldProps} />
                                            break;
                                        case 'dept_selec':
                                            return <DeptSelect {...fieldProps} />
                                            break;
                                        case 'user_selec':
                                            return <UserSelect {...fieldProps} />
                                            break;
                                        case 'role_selec':
                                            return <PrivSelect {...fieldProps} />
                                            break;
                                        case 'mult_selec':
                                            return <MultiSelect {...fieldProps} />
                                            break;
                                        default:
                                            return null
                                    }
                                })()
                            }
                        </div>
                    ))
                }
                <Button type="primary" className="searchfields-confirm" onClick={this.onSearch.bind(this)}>查询</Button>
                </div>
			</div>
        )
    }
}