import React, { PureComponent } from "react";
import { connect } from "dva";
import {
  Button,
  Form,
  Col,
  Row,
  Input,
  Select,
  Checkbox,
  Radio,
  DatePicker,
  Icon
} from "antd";
import styles from "./index.less";
import AddListCard from "../AddListCard/index.js";

class SearchForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      expand: true
    };
    this.clickMoreHandle = this.clickMoreHandle.bind(this);
    this.getData = this.getData.bind(this);
  }
  // 组件渲染时
  componentDidMount() {
    setTimeout(() => {
      const oDiv = document.getElementById("searchFormWrap");
      const height = oDiv.offsetHeight;
      if (height > 48) {
        this.setState({ expand: false });
      }
    }, 0);
    this.getData();
  }
  getData(page = { current: 0, pageSize: 10 }) {
    const { dispatch, searchFormConfig } = this.props;
    const { searchFormArray } = this.props.searchFormConfig;
    const { getData } = this.addListCard;
    const data = getData();
    const searchConditions = {};
    for (let i = 0; i < searchFormArray.length; i++) {
      const { field } = searchFormArray[i];
      const filedValue = data[field][`value`];
      if (searchFormArray[i].type == "Input") {
        searchConditions[`search_LIKE_${field}`] = filedValue;
      } else if (searchFormArray[i].type == "Checkbox.Group") {
        searchConditions[`search_EQ_${field}`] = filedValue
          ? filedValue.join("")
          : "";
      } else {
        searchConditions[`search_EQ_${field}`] = filedValue;
      }
    }
    searchConditions.page = page.current ? page.current : 0;
    searchConditions.size = page.pageSize ? page.pageSize : 10;
    dispatch({
      type: searchFormConfig.url,
      payload: searchConditions
    });
  }

  clickMoreHandle() {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  }
  // 重置
  handleReset() {
    const { handleReset } = this.addListCard;
    handleReset();
  }
  render() {
    const searchBotton = () => (
      <div>
        <Button
          type="primary"
          className={styles.searchBotton}
          style={{ marginRight: "10px" }}
          onClick={this.getData}
        >
          搜索
        </Button>
        <Button
          className={styles.searchBotton}
          onClick={this.handleReset.bind(this)}
        >
          清空
        </Button>
        <a className={styles.searchMore} onClick={this.clickMoreHandle}>
          更多<Icon type={this.state.expand ? "down" : "up"} />
        </a>
      </div>
    );
    return (
      <div className={styles.searchFormWrap} id="searchFormWrap">
        <div
          className={
            this.state.expand ? styles.searchFormLeft : styles.searchFormLeft2
          }
        >
          <AddListCard
            addListCardConfig={this.props.searchFormConfig}
            ref={c => {
              this.addListCard = c;
            }}
          />
        </div>
        <div className={styles.searchFormRight}>{searchBotton()}</div>
      </div>
    );
  }
}
export default SearchForm;
