/*
 * Author: 黎永顺
 * name: 薪资核算-线下对比
 * Description:
 * Date: 2023/9/26
 */
import React, { Component } from "react";
import { Button } from "antd";
import { WeaCheckbox, WeaInputSearch, WeaLocaleProvider } from "ecCom";
import SalaryCalcOcList from "./components/salaryCalcOcList";
import SalaryCalcOcImport from "./components/salaryCalcOcImport";
import { convertToUrlString } from "../../../util/url";
import Layout from "../doCalc/layout";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      salaryOcImpDialog: { visible: false, title: "", salaryAcctRecordId: "" },
      form: {
        onlyDiffEmployee: true, onlyDiffSalaryItem: true,
        employeeName: ""
      }, searchBool: false
    };
  }

  handleFiledChange = (key, value) => {
    const { form } = this.state;
    this.setState({
      form: { ...form, [key]: value }
    });
  };

  handleExportClick = () => {
    const { form: { onlyDiffEmployee, onlyDiffSalaryItem } } = this.state;
    const { routeParams: { salaryAcctRecordId } } = this.props;
    const payload = {
      salaryAcctRecordId, onlyDiffEmployee, onlyDiffSalaryItem
    };
    window.open(`/api/bs/hrmsalary/salaryacct/comparisonresult/export?${convertToUrlString(payload)}`, "_blank");
  };
  handleImportClick = () => {
    const { routeParams: { salaryAcctRecordId } } = this.props;
    this.setState({
      salaryOcImpDialog: { visible: true, title: getLabel(24023, "数据导入"), salaryAcctRecordId }
    });
  };

  render() {
    const { form, searchBool, salaryOcImpDialog } = this.state;
    return (
      <Layout {...this.props}>
        <div className="salary-calc-oc">
          <div className="compare-header header-border-bottom">
            <div className="left-search">
              <WeaCheckbox content={getLabel(543283, "只显示有差异的人员")}
                           value={form["onlyDiffEmployee"] ? "1" : "0"}
                           onChange={v => this.handleFiledChange("onlyDiffEmployee", v === "1")}/>
              <WeaCheckbox content={getLabel(543284, "只显示有差异的薪资项目")}
                           value={form["onlyDiffSalaryItem"] ? "1" : "0"}
                           onChange={v => this.handleFiledChange("onlyDiffSalaryItem", v === "1")}/>
            </div>
            <div className="weapp-salary-btn-flex header">
              <Button type="primary" onClick={this.handleImportClick}>{getLabel(32935, "导入")}</Button>
              <Button type="ghost" onClick={this.handleExportClick}>{getLabel(17416, "导出")}</Button>
              <WeaInputSearch placeholder={getLabel(26919, "请输入姓名")} value={form["employeeName"]}
                              onChange={v => this.handleFiledChange("employeeName", v)}
                              onSearch={() => this.setState({ searchBool: !searchBool })}/>
            </div>
          </div>
          <div className="salary-calc-oc-body">
            <SalaryCalcOcList {...this.props} form={form} searchBool={searchBool}/>
            <SalaryCalcOcImport
              {...salaryOcImpDialog}
              onCancel={(isFresh) => this.setState({
                salaryOcImpDialog: { ...salaryOcImpDialog, visible: false },
                searchBool: typeof isFresh === "boolean" ? !searchBool : searchBool
              })}
            />
          </div>
        </div>
      </Layout>
    );
  }
}

export default Index;
