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

const getLabel = WeaLocaleProvider.getLabel;
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}>{getLabel(537558, "保存")}</Button>];
    const moreBtn = {
      datas: [
        {
          key: "recovery",
          content: getLabel(385270, "恢复默认设置"),
          icon: <i className="icon-coms-Flow-setting"/>,
          onClick: key => onMoreOpts(key)
        },
        {
          key: "setting",
          content: getLabel(543377, "设为默认设置"),
          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={getLabel(500351, "请输入关键字")} style={{ width: 200 }}
                      onSearch={onSearchItemSet}
      />
    </div>;
    const bottomLeft = <WeaCheckbox content={getLabel(543378, "只显示已选中字段")} 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>
    );
  }
}