import React, { Component } from 'react';
import PropTypes from 'prop-types';
import GridButton from './../../btns/GridButton';
import TableFilter from './TableFilter';
import './style/filter.scss';

class AmosFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      filter: {}
    };
  }

  getFilter = (dataIndex,value) => {
    let filter = this.state.filter;
    filter[dataIndex] = value;
    let res = {};
    let list = Object.keys(filter);
    list.map(e=>{
      let varName = filter[e];
      if(varName&&varName !== '全部'){
        res[e] = varName;
      }
    });
    this.setState({filter: res},this.props.changeFilters(res));
  }

  confirmClick = (value) => {
    this.props.closeFilter();
    this.getFilter();
  }

  cancelClick = () => {
    this.props.closeFilter();
  }


  render() {
    let columns = this.props.filterSearchModel.filter(e=>e.query==true);
    let columnsFilter = [];
    let flag = false;
    columns.map((e)=>{
      if(e.primary){
        if(flag){
          columnsFilter.push(e);
        }else{
          flag = true;
        }
      }else{
        columnsFilter.push(e);
      }
    });
    return (
      <div className='all-filter-content'>
        <div className='top-filter-content'>
          <TableFilter columns={columnsFilter} changeFilters={this.getFilter} />
        </div>
        <hr />
        <div className='bottom-filter-oper'>
          <GridButton text='确定' onClick={this.confirmClick} />
          <GridButton className='grid-cancel-btn' text='取消' onClick={this.cancelClick} />
        </div>
      </div>
    );
  }
}

AmosFilter.propTypes = {
  filterSearchModel: PropTypes.array,//表格列模型，默认值空数组
  changeFilters: PropTypes.func,//表格过滤条件变化方法，用于回调获取表格搜索条件
  closeFilter: PropTypes.func
};

export default AmosFilter;
