/*
 * @Author: yuananting
 * @Date: 2021-02-25 10:30:52
 * @LastEditors: yuananting
 * @LastEditTime: 2021-02-25 10:44:46
 * @Description: 助学工具-题库-题目管理主页面头部搜索
 * @Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
import React, { Component } from "react";
import "./QuestionManageFilter.less";
import { Row, Input, Select, Tooltip } from "antd";
const { Search } = Input;

const DEFAULT_QUERY = {
  questionName: null, // 题目名称
  questionType: null, // 题型
};

class QuestionManageFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      query: { ...DEFAULT_QUERY }, // 查询条件
      questionTypeList: [], // 题型列表
    };
  }

  render() {
    const {
      query: { questionName, questionType },
      questionTypeList,
    } = this.state;

    return (
      <div className="question-manage-filter">
        <Row type="flex" justify="space-between" align="top">
          <div className="search-condition">
            <div className="search-condition__item">
              <span className="search-label">题目：</span>
              <Search
                value={questionName}
                placeholder="搜索题目名称"
                style={{ width: "calc(100% - 84px)" }}
                onChange={(value) => {
                  console.log(value);
                }}
              />
            </div>

            <div className="search-condition__item">
              <span className="search-label">题型：</span>
              <Select
                value={questionType}
                placeholder="请选择题目类型"
                style={{ width: "calc(100% - 70px)" }}
                showSearch
                allowClear
                filterOption={(input, option) => option}
                onChange={(value) => {
                  console.log(value);
                }}
              >
                {_.map(questionTypeList, (item, index) => {
                  return (
                    <Select.Option value={item.id} key={item.id}>
                      {item}
                    </Select.Option>
                  );
                })}
              </Select>
            </div>
          </div>

          <div className="reset-fold-area">
            <Tooltip title="清空筛选">
              <span
                className="resetBtn iconfont icon"
                onClick={this.handleReset}
              >
                &#xe61b;{" "}
              </span>
            </Tooltip>
          </div>
        </Row>
      </div>
    );
  }
}

export default QuestionManageFilter;
