/*
 * Author: 黎永顺
 * name: 智能算薪-流量使用记录
 * Description:
 * Date: 2023/8/28
 */
import React, { Component } from "react";
import { inject, observer } from "mobx-react";
import { WeaLocaleProvider, WeaTable } from "ecCom";
import { trafficUsageConditions } from "./constants";
import { getSearchs } from "../../../util";
import moment from "moment";
import { apiflowRecordList } from "../../../apis/intelligentCalculateSalarySettings";

const getLabel = WeaLocaleProvider.getLabel;

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

  componentDidMount() {
    const { taxAgentStore: { fetchTaxAgentOption }, intelligentStore: { form } } = this.props;
    fetchTaxAgentOption().then(({ data }) => {
      this.setState({
        conditions: _.map(trafficUsageConditions, item => {
          return {
            ...item,
            items: _.map(item.items, o => {
              if (o.conditionType === "SELECT" && o.domkey[0] === "taxAgentId") {
                return {
                  ...o,
                  options: [
                    { key: "", showname: getLabel(111, "全部(个税扣缴义务人)") },
                    ..._.map(data, (i) => ({ key: i.id, showname: i.content }))
                  ]
                };
              } else if (o.conditionType === "SELECT" && o.domkey[0] !== "taxAgentId") {
                return {
                  ...o,
                  options: _.map(o.options, it => ({ ...it, showname: getLabel(it.lanId, it.showname) }))
                };
              }
              return { ...o };
            })
          };
        })
      }, () => {
        form.initFormFields(this.state.conditions);
        form.updateFields({
          ["startDate__endDate"]: {
            value: [moment().startOf("month").format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
          }
        });
        this.apiflowRecordList();
      });
    });
  }

  apiflowRecordList = () => {
    const { pageInfo } = this.state;
    const { intelligentStore: { form } } = this.props;
    const payload = { ...form.getFormParams(), ...pageInfo };
    this.setState({ loading: true });
    apiflowRecordList(payload).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { columns, list: dataSource, pageNum: current, pageSize, total } = data;
        this.setState({
          dataSource, pageInfo: { ...pageInfo, current, pageSize, total },
          columns: _.map(columns, item => {
            const { dataIndex } = item;
            let width = "";
            switch (dataIndex) {
              case "indexNum":
              case "taxAgentName":
              case "employeeName":
              case "businessTypeName":
              case "creator":
              case "result":
                width = "10%";
                break;
              case "idCardNo":
                width = "20%";
                break;
              default:
                break;
            }
            return { ...item, width };
          })
        });
      }
    }).catch(() => this.setState({ loading: false }));
  };

  render() {
    const { intelligentStore: { form } } = this.props;
    const { conditions, loading, pageInfo, dataSource, columns } = this.state;
    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.apiflowRecordList());
      },
      onChange: current => {
        this.setState({
          pageInfo: { ...pageInfo, current }
        }, () => this.apiflowRecordList());
      }
    };
    return (
      <div className="trafficUsageRecords-layout">
        <div className="head">{getSearchs(form, conditions, 4, false, this.apiflowRecordList)}</div>
        <WeaTable
          columns={columns} dataSource={dataSource}
          pagination={pagination} loading={loading}
          scroll={{ y: `calc(100vh - 226px)` }}
        />
      </div>
    );
  }
}

export default TrafficUsageRecords;
