/*
 * Author: 黎永顺
 * name: 福利方案页面重构
 * Description:
 * Date: 2024/2/2
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
import { renderDropMenuDatas, renderReqBtns, tabWelfarePlanList } from "./config";
import WelfarePlanAdvanceSearchPannel from "./components/welfarePlanAdvanceSearchPannel";
import WelfarePlanList from "./components/welfarePlanList";
import LogDialog from "../../../components/logViewModal";
import cs from "classnames";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

@inject("taxAgentStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "SOCIAL_SECURITY", showSearchAd: false, isQuery: false, customQuery: "",
      logDialogVisible: false, filterConditions: "[]"
    };
    this.welfarePlanListRef = null;
  }

  handleReqBtnsCLick = (type, value) => {
    const { selectedKey } = this.state;
    switch (type) {
      case "ADD":
        const { handleOpts } = this.welfarePlanListRef.wrappedInstance || {};
        handleOpts(selectedKey === "CUSTOM" ? "custom-edit" : "edit");
        break;
      case "OPEN":
        this.handleOpenAdvanceSearch();
        break;
      case "SEARCH":
        this.handleAdvanceSearch(value);
        break;
      default:
        break;
    }
  };
  handleOpenAdvanceSearch = () => this.setState({ showSearchAd: true });
  handleAdvanceSearch = (customQuery = "") => this.setState({ isQuery: !this.state.isQuery, customQuery });
  onAdSearch = () => this.setState({ showSearchAd: false, isQuery: !this.state.isQuery });
  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 { taxAgentStore: { showOperateBtn } } = this.props;
    const { logDialogVisible, filterConditions, selectedKey, showSearchAd, isQuery, customQuery } = this.state;
    const tabs = _.map(tabWelfarePlanList, o => ({ ...o, title: getLabel(o.lanId, o.title) }));
    return (
      <div className="salary-welfare-plan-wrapper">
        <WeaReqTop
          title={getLabel(538000, "社保福利方案")} buttonSpace={10} icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D" showDropIcon dropMenuDatas={renderDropMenuDatas(selectedKey, showOperateBtn)}
          onDropMenuClick={this.onDropMenuClick} tabDatas={tabs} selectedKey={selectedKey}
          onChange={selectedKey => this.setState({ selectedKey, showSearchAd: false, customQuery: "" })}
          buttons={renderReqBtns(selectedKey, this.handleReqBtnsCLick, showOperateBtn, customQuery)}
        >
          <div className="salary-welfare-plan-content">
            <div
              className={cs("searchAdvanced-condition-container", { "searchAdvanced-condition-hide": !showSearchAd })}>
              <WelfarePlanAdvanceSearchPannel
                onCancel={() => this.setState({ showSearchAd: false })}
                onAdSearch={this.onAdSearch}
              />
            </div>
            {/*列表*/}
            <WelfarePlanList ref={dom => this.welfarePlanListRef = dom} customQuery={customQuery}
                             selectedKey={selectedKey} isQuery={isQuery}
                             onFilterLog={(type, targetid) => this.onDropMenuClick(type, targetid)}/>
          </div>
          {/*操作日志*/}
          <LogDialog visible={logDialogVisible} logFunction={selectedKey === "CUSTOM" ? "siCategory" : "siScheme"}
                     filterConditions={filterConditions} onCancel={() => this.setState({ logDialogVisible: false })}/>
        </WeaReqTop>
      </div>
    );
  }
}

export default Index;
