/*
 * 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, WeaTools } from "ecCom";
import { getTabList } from "../../../apis/standingBook";
import NormalIndex from "./components/normal";
import OverViewIndex from "./components/overView";
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: "", tabList: [], welfareRecord: { ...WeaTools.getUrlParams() } };
  }

  componentDidMount() {
    this.getTabList();
  }

  getTabList = () => {
    const order = [
      getLabel(111, "正常缴纳"), getLabel(111, "补缴"), getLabel(111, "退差"), getLabel(111, "补差"), getLabel(111, "总览")
    ];
    const payload = _.pick(this.state.welfareRecord, ["billMonth", "paymentOrganization"]);
    getTabList(payload).then(({ data }) => {
      const { tabList, remarks, billMonth } = data;
      this.setState({
        selectedKey: _.find(tabList, o => o.content === getLabel(111, "正常缴纳")).id,
        tabList: tabList.filter(item => item.content !== getLabel(111, "异动清单")).sort((a, b) => (order.indexOf(a.content) - order.indexOf(b.content))),
        welfareRecord: { ...this.state.welfareRecord, remarks, billMonth }
      });
    });
  };

  render() {
    const { selectedKey, tabList, welfareRecord } = this.state;
    const tabDatas = _.map(tabList, o => ({ key: o.id, title: o.content }));
    const params = { ...welfareRecord, selectedKey };
    return (
      <div className="standingBookDetailWapper">
        <WeaReqTop
          title={getLabel(538002, "社保福利台账")} icon={<i className="icon-coms-fa"/>}
          iconBgcolor="#F14A2D" showDropIcon={false} tabDatas={tabDatas} selectedKey={selectedKey}
          onChange={selectedKey => this.setState({ selectedKey, welfareRecord: { ...welfareRecord, selectedKey } })}>
          {
            (selectedKey === "1" || selectedKey === "3") && <NormalIndex {...params} {...this.props}/>
          }
          {/*退差*/}
          {selectedKey === "5" && <Regression {...params} {...this.props}/>}
          {/*补差*/}
          {selectedKey === "6" && <MakeupDifference {...params} {...this.props}/>}
          {/*总览*/}
          {selectedKey === "4" && <OverViewIndex {...params} {...this.props}/>}
        </WeaReqTop>
      </div>
    );
  }
}

export default StandingBookDetail;

