import React from 'react';
import {
 DatePicker, Radio, Button, Select, Modal,
} from 'antd';
import PropTypes from 'prop-types';
import { PERFORMANCE, FILTER_TIME, ERROR_TYPE } from '../../common/constants';
// import localUtils from '../../common/utils';
import SelectProjects from './index';

class Filter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        date: [],
        time: Object.keys(FILTER_TIME)[0],
        type: '',
        field: '',
        token: '',
        // isMonitor: props.isMonitor,
        // isError: props.isError,
    };
    this.onSubmit = this.onSubmit.bind(this);
    this.changeDate = this.changeDate.bind(this);
    this.changeTime = this.changeTime.bind(this);
    this.changeField = this.changeField.bind(this);
    this.changeProject = this.changeProject.bind(this);
    this.changeType = this.changeType.bind(this);
  }

  onSubmit() {
    const {
        date, field, token, type,
    } = this.state;
    const { isMonitor, isError, submit } = this.props;
    if (token.length === 0) {
      Modal.error({ content: '请选择项目' });
      return;
    }
    if (type.length === 0 && isError) {
        Modal.error({ content: '请选择错误类别' });
        return;
    }
    if (field.length === 0 && isMonitor) {
      Modal.error({ content: '请选择字段' });
      return;
    }
    if (date.length === 0) {
      Modal.error({ content: '请选择日期' });
      return;
    }
    submit(this.state);
  }

  changeDate(dates, date) {
    this.setState({ date });
  }

  changeType(type) {
    this.setState({ type });
  }

  changeField(field) {
    this.setState({ field });
  }

  changeTime(e) {
    this.setState({ time: e.target.value });
  }

  changeProject(token) {
    this.setState({ token });
  }

  render() {
    const { RangePicker } = DatePicker;
    const { Option } = Select;
    const { isShowTime, isMonitor, isError } = this.props;

    let SelectTime = '';
    if (isShowTime) {
      SelectTime = (
        <Radio.Group defaultValue="1" buttonStyle="solid" onChange={this.changeTime} className="ui-mr20">
          {
                Object.keys(FILTER_TIME).map((value) => <Radio.Button value={value} key={value}>{FILTER_TIME[value]}</Radio.Button>)
            }
        </Radio.Group>
        );
    }

    let SelectField = '';
    if (isMonitor) {
        SelectField = (
          <Select defaultValue="选择性能字段" style={{ width: 160 }} onChange={this.changeField} className="ui-mr20">
            {
            Object.keys(PERFORMANCE).map((value) => <Option value={value} key={value}>{PERFORMANCE[value]}</Option>)
            }
          </Select>
        );
    }

    let SelectType = '';
    if (isError) {
        SelectType = (
          <Select defaultValue="选择错误类别" style={{ width: 160 }} onChange={this.changeType} className="ui-mr20">
            {
            Object.keys(ERROR_TYPE).map((value) => <Option value={value} key={value}>{ERROR_TYPE[value]}</Option>)
            }
          </Select>
        );
    }

    return (
      <>
        <div className="ui-mb20">
          <SelectProjects change={this.changeProject} />
          {SelectField}
          {SelectType}
        </div>
        <div className="ui-mb20">
          <RangePicker onChange={this.changeDate} className="ui-mr20" showTime={{ format: 'HH:mm' }} format="YYYY-MM-DD HH:mm" />
          {SelectTime}
          <Button onClick={this.onSubmit} type="primary">查询</Button>
        </div>
      </>
    );
  }
}

Filter.propTypes = {
    submit: PropTypes.func.isRequired,
    isShowTime: PropTypes.bool.isRequired,
    isMonitor: PropTypes.bool,
    isError: PropTypes.bool,
};
Filter.defaultProps = {
    isMonitor: false,
    isError: false,
};

export default Filter;