/*
 * Author: 黎永顺
 * Description: 台账详情
 * Date: 2022-04-19 16:57:29
 * LastEditTime: 2022-04-20 21:01:57
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaReqTop } from "ecCom";
import NormalIndex from "./components/normal";
import OverViewIndex from "./components/overView";
import AbnormalListIndex from "./components/abnormalList";
import Regression from "./components/regression";
import MakeupDifference from "./components/makeupDifference";

const { getLabel } = WeaLocaleProvider;

@inject("standingBookStore")
@observer
class StandingBookDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedKey: "1",
      tabList: [],
      remarks: "",
      billMonth: ""
    };
    this.type = "";
    this.paymentOrganization = "";
  }

  componentDidMount() {
    this.getTabList();
  }

  getTabList = (payload = {}) => {
    const { getTabList } = this.props.standingBookStore;
    const billMonth = this.props.location.query.billMonth;
    this.paymentOrganization = this.props.location.query.paymentOrganization;
    this.type = this.props.location.query.type;
    getTabList({ billMonth, paymentOrganization: this.paymentOrganization }).then(({ data }) => {
      const { tabList, remarks, billMonth } = data;
      let newTabList = tabList.filter(item => item.id != "2");
      newTabList.push(newTabList.splice(_.findIndex(newTabList, it => it.id === "4"), 1)[0]);
      this.setState({
        selectedKey: newTabList[0].id,
        tabList: _.map(newTabList, it => ({ title: it.content, key: it.id })),
        remarks, billMonth
      });
    });
  };

  render() {
    const { selectedKey, tabList, remarks, billMonth } = this.state;
    return (
      <div className="standingBookDetailWapper">
        <WeaReqTop
          title={getLabel(538002, "社保福利台账")} icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D" showDropIcon={false} tabDatas={tabList} selectedKey={selectedKey}
          onChange={selectedKey => this.setState({ selectedKey })}
        >
          {
            (selectedKey === "1" || selectedKey === "3") &&
            <NormalIndex selectedKey={selectedKey} remarks={remarks} billMonth={billMonth} type={this.type}
                         paymentOrganization={this.paymentOrganization} location={this.props.location}/>
          }
          {
            selectedKey === "2" &&
            <AbnormalListIndex billMonth={billMonth} type={this.type} paymentOrganization={this.paymentOrganization}/>
          }
          {
            selectedKey === "4" &&
            <OverViewIndex billMonth={billMonth} type={this.type} paymentOrganization={this.paymentOrganization}/>
          }
          {
            selectedKey === "5" && <Regression/>
          }
          {
            selectedKey === "6" && <MakeupDifference/>
          }
        </WeaReqTop>
      </div>
    );
  }
}

export default StandingBookDetail;

