/*
 * Author: 黎永顺
 * name: 薪资账套
 * Description:
 * Date: 2022/12/6
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaInputSearch, WeaTop } from "ecCom";
import { Button } from "antd";
import LedgerTable from "./components/ledgerTable";
import LedgerSlide from "./components/ledgerSlide";
import "./index.less";

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchVal: "",
      doSearch: false,
      slideparams: {
        visible: false,
        title: "新建账套",
        editId: ""
      }
    };
  }

  componentDidMount() {
    const { taxAgentStore } = this.props;
    const { fetchTaxAgentOption } = taxAgentStore;
    fetchTaxAgentOption();
  }

  handleEditLedger = (record) => {
    const { slideparams } = this.state;
    const { id } = record;
    this.setState({ slideparams: { ...slideparams, visible: true, title: "编辑账套", editId: id } });
  };
  handleResetLedger = () => {
    const { slideparams } = this.state;
    this.setState({
      slideparams: {
        ...slideparams,
        visible: false,
        title: "新建账套",
        editId: ""
      }
    });
  };

  render() {
    const { searchVal, doSearch, slideparams } = this.state;
    const { taxAgentStore } = this.props;
    const { 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="薪资账套" className="ledgerOuter"
        icon={<i className="icon-coms-fa"/>}
        iconBgcolor="#F14A2D"
        showDropIcon={false}
        buttons={showOperateBtn ? btns : btns.slice(-1)}
      >
        <div className="ledgerWrapper">
          <LedgerTable name={searchVal} doSearch={doSearch} onEditLedger={this.handleEditLedger}/>
          <LedgerSlide
            {...slideparams}
            onCancel={this.handleResetLedger}
            onRefreshList={() => this.setState({ doSearch: !doSearch })}
          />
        </div>
      </WeaTop>
    );
  }
}

export default Index;