import React, { Component } from "react";
import { Button, Col, Row } from "antd";
import { WeaBrowser, WeaFormItem, WeaHelpfulTip, WeaInput, WeaLocaleProvider, WeaSearchGroup, WeaTab } from "ecCom";
import { getQueryString } from "../../../../util/url";

const getLabel = WeaLocaleProvider.getLabel;

class RegTop extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      workcode: "",
      departmentIds: "",
      subCompanyIds: "",
      showSearchAd: false
    };
  }

  renderTopBtns = () => {
    const { name } = this.state;
    const { onChange, selectKey, type: regtopType } = this.props;
    const type = getQueryString("type");
    let dom = [
      <WeaHelpfulTip
        title={
          <div>
            <div>提示：</div>
            <div>个人合计=社保个人合计+公积金个人合计+其他福利个人合计</div>
            <div>单位合计=社保单位合计+公积金单位合计+其他福利单位合计</div>
            <div>社保合计=社保个人合计+社保单位合计</div>
            <div>公积金合计=公积金个人合计+公积金单位合计</div>
            <div>其他福利合计=其他福利个人合计+其他福利单位合计</div>
            <div>合计=社保合计+公积金合计+其他福利合计</div>
          </div>
        }
        placement="bottomRight"
        width={250}
      />,
      <Button type="primary" onClick={() => onChange("export")}>导出全部</Button>
    ];
    if (!type) {
      const [dom1, ...extra] = dom;
      const domBtn = regtopType === "regression" ?
        [<Button type="primary" onClick={() => onChange("add")}>添加</Button>] :
        [
          <Button type="primary" onClick={() => onChange("add")}>{getLabel(384113, "添加")}</Button>,
          <Button type="primary" onClick={() => onChange("import")}>{getLabel(32935, "导入")}</Button>
        ];
      dom = [
        dom1,
        <Button type="primary" disabled={_.isEmpty(selectKey)} onClick={() => onChange("delete")}>
          删除
        </Button>, ...domBtn, ...extra
      ];
    }
    return dom;
  };
  getSearchs = () => {
    return <WeaSearchGroup needTigger showGroup title="其他条件">
      <Row>
        <Col span={12}><WeaFormItem label="工号" labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <WeaInput
            value={this.state.workcode}
            onChange={v => this.setState({ workcode: v })}
          />
        </WeaFormItem></Col>
        <Col span={12}><WeaFormItem label={getLabel(27511, "部门")} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <WeaBrowser
            isSingle={false} value={this.state.departmentIds} type={57}
            onChange={v => this.setState({ departmentIds: v })}/>
        </WeaFormItem></Col>
        <Col span={12}><WeaFormItem label={getLabel(33553, "分部")} labelCol={{ span: 4 }} wrapperCol={{ span: 18 }}>
          <WeaBrowser
            isSingle={false} value={this.state.subCompanyIds} type={164}
            onChange={v => this.setState({ subCompanyIds: v })}/>
        </WeaFormItem></Col>
      </Row>
    </WeaSearchGroup>;
  };

  render() {
    const { showSearchAd } = this.state;
    const { billMonth, onChange } = this.props;
    return (
      <WeaTab
        datas={[
          {
            title: `账单月份: ${billMonth}`,
            viewcondition: "1"
          }
        ]}
        keyParam="viewcondition" selectedKey="" advanceHeight={200} searchsAd={this.getSearchs()}
        searchType={["base", "advanced"]} showSearchAd={showSearchAd}
        setShowSearchAd={bool => this.setState({ showSearchAd: bool })}
        onSearchChange={name => this.setState({ name })}
        buttons={this.renderTopBtns()} onSearch={() => onChange("search")} onAdSearch={() => onChange("search")}
        onAdReset={() => this.setState({ workcode: "" })} searchsBasePlaceHolder="请输入员工姓名"
      />
      // <WeaTop
      //   title={<span><span style={{ paddingRight: 10 }}>账单月份</span><span>{billMonth}</span></span>}
      //   buttons={this.renderTopBtns()}
      // />
    );
  }
}

export default RegTop;
