/*
 * Author: 黎永顺
 * Description:
 * Date: 2022-05-19 15:18:09
 * LastEditTime: 2022-06-29 10:06:13
 */
import React from "react";
import { WeaCheckbox, WeaDialog, WeaInputSearch } from "ecCom";
import { Button } from "antd";
import "./index.less";

export default class SelectItemModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchValue: ""
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (
      nextProps.visible !== this.props.visible &&
      !nextProps.visible
    ) this.setState({ searchValue: "" });
  }

  render() {
    const { searchValue } = this.state;
    const {
      title, onSearchItemSet, onShowOnlyChecked, children,
      onMoreOpts, onSave, ...extra
    } = this.props;
    const btns = [<Button type="primary" onClick={onSave}>保存</Button>];
    const moreBtn = {
      datas: [
        {
          key: "recovery",
          content: "恢复默认设置",
          icon: <i className="icon-coms-Flow-setting"/>,
          onClick: key => onMoreOpts(key)
        },
        {
          key: "setting",
          content: "设为默认设置",
          icon: <i className="icon-coms-Flow-setting"/>,
          onClick: key => onMoreOpts(key)
        }
      ]
    };
    const titleComp = <div className="setHeaderWrapper">
      <span>{title}</span>
      <WeaInputSearch value={searchValue} onChange={searchValue => this.setState({ searchValue })}
                      placeholder="请输入关键字" style={{ width: 200 }}
                      onSearch={onSearchItemSet}
      />
    </div>;
    const bottomLeft = <WeaCheckbox content="只显示已选中字段" onChange={onShowOnlyChecked}/>;
    return (
      <WeaDialog {...extra} hasScroll title={titleComp}
                 buttons={btns} moreBtn={moreBtn}
                 initLoadCss className="setWrapper"
                 bottomLeft={bottomLeft}
                 style={{
                   width: 800,
                   height: 606.6,
                   minHeight: 200,
                   minWidth: 380,
                   maxHeight: "90%",
                   maxWidth: "90%",
                   overflow: "hidden",
                   transform: "translate(0px, 0px)"
                 }}
      >
        {children}
      </WeaDialog>
    );
  }
}