/*
  * 汇通建设二开
  * 薪酬送审数据穿透（分页）
  * @Author:    黎永顺
  * @Date:      2024/10/25
  * @Wechat:
  * @Email:     971387674@qq.com
  * @description:
*/
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLoadingGlobal, WeaLocaleProvider, WeaTable, WeaTop } from "ecCom";
import { Button } from "antd";
import * as API from "../../../../apis/custom-apis/huitong";
import { htconditions } from "./conditions";
import { getSearchs } from "../../../../util";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;
const APIFox = {
  submit: API.getXcssDataDetail,
  payment: API.getXczfsqDataDetail,
  submitExp: API.exportXcssDataDetail,
  paymentExp: API.exportXczfsqDataDetail
};

@inject("HTStore")
@observer
class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageInfo: { current: 1, pageSize: 10, total: 0 }, loading: false,
      dataSource: [], columns: [], conditions: []
    };
  }

  componentDidMount() {
    this.setState({
      conditions: _.map(htconditions, item => ({
        ...item, items: _.map(item.items, o => ({ ...o, label: getLabel(o.lanId, o.label) }))
      }))
    }, () => {
      const { HTStore: { queryForm } } = this.props, { conditions } = this.state;
      queryForm.initFormFields(conditions);
      this.getXcssDataDetail();
    });
  }

  getXcssDataDetail = () => {
    const { pageInfo } = this.state, { params: { type, ...payload }, HTStore: { queryForm } } = this.props;
    const { departmentIds, ...query } = queryForm.getFormParams();
    this.setState({ loading: true });
    APIFox[type]({ ...payload, ...pageInfo, ...query, departmentIds: departmentIds ? departmentIds.split(",") : [] })
      .then(({ status, data }) => {
        this.setState({ loading: false });
        if (status) {
          const { pageInfo: pageParams, columns } = data;
          const { list: dataSource, pageNum: current, pageSize, total } = pageParams;
          this.setState({
            dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
            columns: [
              {
                title: getLabel(111, "序号"), dataIndex: "index", width: 60, fixed: "left",
                render: (text, record, index) => (pageInfo.current - 1) * pageInfo.pageSize + index + 1
              },
              ..._.map(columns, o => ({ dataIndex: o.column, title: o.text, width: o.width + "px" }))
            ]
          });
        }
      });
  };
  handleExport = () => {
    const { params: { type, ...payload }, HTStore: { queryForm } } = this.props;
    WeaLoadingGlobal.start();
    const promise = APIFox[`${type}Exp`]({ ...payload, ...queryForm.getFormParams() });
    WeaLoadingGlobal.destroy();
  };

  render() {
    const { dataSource, columns, pageInfo, loading, conditions } = this.state;
    const { params: { type }, HTStore: { queryForm } } = this.props;
    const title = type === "submit" ? getLabel(111, "薪酬送审数据") : getLabel(112, "薪酬支付数据");
    const pagination = {
      ...pageInfo,
      showTotal: total => `${getLabel(18609, "共")} ${total} ${getLabel(18256, "条")}`,
      showQuickJumper: true,
      showSizeChanger: true,
      pageSizeOptions: ["10", "20", "50", "100"],
      onShowSizeChange: (current, pageSize) => {
        this.setState({ pageInfo: { ...pageInfo, current, pageSize } }, () => this.getXcssDataDetail());
      },
      onChange: current => {
        this.setState({ pageInfo: { ...pageInfo, current } }, () => this.getXcssDataDetail());
      }
    };
    const height = !_.isEmpty(columns) ? document.querySelector(".wea-new-top-content").style.height : "500px";
    return (
      <WeaTop title={title} icon={<i className="icon-coms-fa"/>} showDropIcon={false} iconBgcolor="#F14A2D"
              className="custom_data_huitong"
              buttons={[<Button type="primary" onClick={this.handleExport}>{getLabel(111, "导出")}</Button>]}>
        <div className="huitong-body">
          <div className="ht_query">
            {
              getSearchs(queryForm, conditions, 2, false, () => {
                if (!this.handleDebounce) {
                  this.handleDebounce = _.debounce(() => {
                    this.setState({ pageInfo: { ...pageInfo, current: 1 } }, () => this.getXcssDataDetail());
                    this.handleDebounce = null;
                  }, 500);
                }
                this.handleDebounce();
              })
            }
          </div>
          <WeaTable dataSource={dataSource} columns={columns} loading={loading} bordered pagination={pagination}
                    scroll={{ x: 1200, y: `calc(${height} - 166px)` }}/>
        </div>
      </WeaTop>);
  }
}

export default Index;
