/*
 * Author: 黎永顺
 * name: 个税申报表-重构页面
 * Description:
 * Date: 2023/10/12
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaHelpfulTip, WeaLocaleProvider, WeaTop } from "ecCom";
import { Button } from "antd";
import moment from "moment";
import DeclareQuery from "./components/declareQuery";
import DeclareTablelist from "./components/declareTablelist";
import DeclareDialog from "./components/declareDialog";
import LogDialog from "../../components/logViewModal";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Calculate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      queryParams: {
        taxAgentName: "",
        dateRange: [
          moment(new Date()).subtract(1, "year").startOf("year").format("YYYY-MM"),
          moment(new Date()).endOf("year").format("YYYY-MM")
        ]
      }, isRefresh: false,
      declareDaialog: { visible: false, title: "" },
      logDialogVisible: false, filterConditions: "[]"
    };
    this.handleDebounce = null;
  }

  renderCalculateOpts = () => {
    const { taxAgentStore: { showOperateBtn } } = this.props;
    const { queryParams, isRefresh } = this.state;
    let calculateOpts = [
      <Button type="primary" onClick={() => this.setState({
        declareDaialog: {
          visible: true,
          title: <div style={{ display: "flex", alignItems: "center" }}>
            <span style={{ marginRight: 10 }}>{getLabel(15366, "申报")}</span>
            <WeaHelpfulTip
              width={200} placement="topLeft"
              title={getLabel(543617, "提示：一个薪资所属月下一个个税扣缴义务人的所有核算数据都归档后才可以申报")}
            />
          </div>
        }
      })}>{getLabel(543618, "生成申报表")}</Button>,
      <DeclareQuery queryParams={queryParams} onChange={v => this.setState({
        isRefresh: _.keys(v)[0] === "taxAgentName" ? isRefresh : !isRefresh,
        queryParams: { ...queryParams, ...v }
      })} onSearch={() => this.setState({ isRefresh: !isRefresh })}/>
    ];
    return !showOperateBtn ? calculateOpts.slice(1) : calculateOpts;
  };
  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 { queryParams, isRefresh, declareDaialog, logDialogVisible, filterConditions } = this.state;
    return (
      <WeaTop title={getLabel(543353, "个税申报")} icon={<i className="icon-coms-fa"/>} iconBgcolor="#F14A2D"
              buttons={this.renderCalculateOpts()} className="declare-main-layout" showDropIcon
              onDropMenuClick={this.onDropMenuClick} dropMenuDatas={[{
        key: "log", icon: <i className="iconfont icon-caozuorizhi32"/>,
        content: getLabel(545781, "操作日志")
      }
      ]}>
        <div className="declare-body">
          <DeclareTablelist queryParams={queryParams} isRefresh={isRefresh}
                            onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>
          <DeclareDialog {...declareDaialog}
                         onCancel={(bool) => this.setState({
                           declareDaialog: { ...declareDaialog, visible: false },
                           isRefresh: bool === "refresh" ? !isRefresh : isRefresh
                         })}
          />
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction="taxdecla" filterConditions={filterConditions}
                     onCancel={() => this.setState({ logDialogVisible: false })}/>
        </div>
      </WeaTop>
    );
  }
}

export default Calculate;