/*
 * Author: 黎永顺
 * Description: 分部编号设置
 * Date: 2022-05-17 14:30:57
 * LastEditTime: 2022-05-18 14:13:24
 */
import React, { Component, Fragment } from "react";
import { Button } from "antd";
import { WeaTop, WeaFormItem, WeaCheckbox, WeaSearchGroup } from "ecCom";
import StartReservedNumberSet from "./components/startReservedNumberSet";
import NumberComposition from "./components/numberComposition";
import { i18n } from "../../public/i18n";
import "./index.less";

const btns = [<Button type="primary">保存</Button>];
const dropMenuDatas = [
  {
    key: "save",
    disabled: false,
    icon: <i className="icon-coms-Preservation" />,
    content: "保存",
    onClick: (key) => alert(`点击了搜索 key = ${key}`),
  },
];
export default class BranchNumSetting extends Component {
  constructor() {
    super();
    this.state = {
      checkVal: "0",
    };
  }

  componentDidMount() {}

  /**
   * name:提示文本
   * return {*}
   */
  helpContent = () => {
    return (
      <div>
        <p>开启后，可根据设置的分部编号规则自动生成分部编号，涉及场景如下：</p>
        <p>1.手动新建和手动编辑分部时可选择重新生成编号和选择预留分部编号；</p>
        <p>2.组织结构导入-添加新分部且分部编号列为空时，会自动生成分部编号；</p>
        <p>3.导入人员-添加时，新创建的分部可自动生成分部编号；</p>
        <p>【注意】开启前请先确认分部编号字段已启用！</p>
      </div>
    );
  };

  render() {
    const { checkVal } = this.state;
    return (
      <div className="branch-wapper">
        <WeaTop
          title={i18n.label.branchNumSetting()}
          icon={<i className="icon-coms-hrm" />}
          iconBgcolor="#217346"
          buttons={btns}
          showDropIcon={true}
          dropMenuDatas={dropMenuDatas}
        />
        <div className="branch-content">
          <div className="switch-wrapper">
            <WeaFormItem
              label="分部编号自动生成"
              labelCol={{ span: 8 }}
              wrapperCol={{ span: 16 }}>
              <WeaCheckbox
                value={checkVal}
                helpfulTip={this.helpContent}
                helpfulTipProps={{ placement: "top" }}
                display="switch"
                id="num-set-switch"
                onChange={(checkVal) => this.setState({ checkVal })}
              />
            </WeaFormItem>
          </div>
          {/* 内容区 */}
          {checkVal === "1" && (
            <Fragment>
              <div className="numberComposition">
                <WeaSearchGroup title={"编号组成"} showGroup>
                  <NumberComposition />
                </WeaSearchGroup>
              </div>
              <div className="startReservedNumberSet">
                <WeaSearchGroup
                  title={"起始编号及预留编号设置"}
                  showGroup
                  center>
                  <StartReservedNumberSet />
                </WeaSearchGroup>
              </div>
            </Fragment>
          )}
        </div>
      </div>
    );
  }
}