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

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchVal: "", doSearch: false, logDialogVisible: false, filterConditions: "[]",
      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: ""
      }
    });
  };
  onDropMenuClick = (key, targetid = "") => {
    switch (key) {
      case "log":
        this.setState({
          logDialogVisible: true,
          filterConditions: targetid ? `[{\"connectCondition\":\"AND\",\"columIndex\":\"targetid\",\"type\":\"=\",\"value\":\"${targetid}\"}]` : "[]"
        });
        break;
      default:
        break;
    }
  };

  render() {
    const { logDialogVisible, filterConditions, doSearch, slideparams } = this.state;
    const { taxAgentStore } = this.props;
    const { showOperateBtn } = taxAgentStore;
    const btns = [
      <Button type="primary" onClick={() => this.setState({ slideparams: { ...slideparams, visible: true } })}>
        {getLabel(111, "新建")}
      </Button>,
      <LedgerSearchComp onSearch={() => this.setState({ doSearch: !doSearch })}/>
    ];
    return (
      <WeaTop
        title="薪资账套" className="ledgerOuter" icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
        buttons={showOperateBtn ? btns : btns.slice(-1)}
        showDropIcon onDropMenuClick={this.onDropMenuClick}
        dropMenuDatas={[
          {
            key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
            content: getLabel(545781, "操作日志")
          }
        ]}
      >
        <div className="ledgerWrapper">
          <LedgerTable doSearch={doSearch} onEditLedger={this.handleEditLedger}
                       onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>
          <LedgerSlide
            {...slideparams}
            onCancel={this.handleResetLedger}
            onRefreshList={() => this.setState({ doSearch: !doSearch })}
          />
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction="salarysob" filterConditions={filterConditions}
                     onCancel={() => this.setState({ logDialogVisible: false })}/>
        </div>
      </WeaTop>
    );
  }
}

export default Index;
