/*
 * Author: 黎永顺
 * name: 字段管理
 * Description:
 * Date: 2023/1/18
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { Button, message, Modal } from "antd";
import { WeaInputSearch, WeaTop } from "ecCom";
import FieldTable from "./components/fieldTable";
import FieldSlide from "./components/fieldSlide";
import { deleteSalaryField } from "../../apis/fieldManage";
import "./index.less";

@inject("taxAgentStore")
@observer
class FieldManagement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchVal: "",
      doSearch: false,
      slideparams: {
        visible: false,
        title: "新建字段",
        record: {}
      }
    };
  }

  handleEditField = (record) => {
    const { slideparams } = this.state;
    this.setState({
      slideparams: {
        ...slideparams,
        visible: true,
        title: "编辑字段",
        record: _.pick(record, ["id"])
      }
    });
  };
  handleDeleteField = (filedIds) => {
    Modal.confirm({
      title: "信息确认",
      content: "确认要删除吗?",
      onOk: () => {
        deleteSalaryField(filedIds).then(({ status, errormsg }) => {
          if (status) {
            message.success("删除成功");
            this.setState({ doSearch: !this.state.doSearch });
          } else {
            message.error(errormsg || "删除失败");
          }
        });
      }
    });
  };
  handleResetField = () => {
    const { slideparams } = this.state;
    this.setState({
      slideparams: {
        ...slideparams,
        visible: false,
        title: "新建字段",
        record: {}
      }
    });
  };

  render() {
    const { searchVal, doSearch, slideparams } = this.state;
    const { taxAgentStore } = this.props;
    const { showSalaryItemBtn, showOperateBtn } = taxAgentStore;
    const btns = [
      <Button
        type="primary"
        onClick={() => this.setState({ slideparams: { ...slideparams, visible: true } })}
      >新建</Button>,
      <WeaInputSearch
        value={searchVal} placeholder="请输入字段名称"
        onChange={searchVal => this.setState({ searchVal })}
        onSearch={() => this.setState({ doSearch: !doSearch })}
      />
    ];
    return (
      <WeaTop
        title="字段管理"
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        showDropIcon={false}
        buttons={(showSalaryItemBtn || showOperateBtn) ? btns : btns.slice(-1)}
      >
        <div className="fieldManageWrapper">
          <FieldTable name={searchVal} doSearch={doSearch} onEditLedger={this.handleEditField}
                      onDeleteLedger={(record) => this.handleDeleteField([record.id])}/>
          <FieldSlide
            {...slideparams}
            onChangeRecord={(record) => this.setState({
              slideparams: {
                ...slideparams,
                record: { ...slideparams.record, ...record }
              }
            })}
            onCancel={this.handleResetField}
            onRefreshList={() => this.setState({ doSearch: !doSearch })}
          />
        </div>
      </WeaTop>
    );
  }
}

export default FieldManagement;