/*
 * Author: 黎永顺
 * name: 我的薪资福利-移动端列表
 * Description:
 * Date: 2023/11/10
 */
import React, { Component } from "react";
import { WeaLocaleProvider, WeaTab } from "ecCom";
import moment from "moment";
import MobileDatePicker from "./components/mobileDatePicker";
import PayrollList from "./components/payrollList";
import { mySalaryBillList } from "../../apis/mySalaryBenefits";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [], loading: false, pageInfo: { current: 1, pageSize: 10, total: 0 },
      salaryYearMonth: [
        moment(new Date()).subtract(1, 'year').startOf("year").format("YYYY-MM"),
        moment().endOf("year").format("YYYY-MM")],
      isMore: true //是否还有更多数据
    };
  }

  componentDidMount() {
    this.getMySalaryBillList();
    const mySalaryMobile = document.getElementById("mySalaryMobile");
    mySalaryMobile.addEventListener("scroll", this.handleScroll, true);
  }

  handleScroll = () => {
    this.isTouchBottom(this.handleLoadMore);
  };

  componentWillUnmount() {
    const mySalaryMobile = document.getElementById("mySalaryMobile");
    mySalaryMobile.removeEventListener("scroll", this.handleScroll, true);
  }

  getMySalaryBillList = (type) => {
    const { salaryYearMonth, pageInfo } = this.state;
    this.setState({ loading: true });
    mySalaryBillList({ salaryYearMonth, ...pageInfo }).then(({ status, data }) => {
      this.setState({ loading: false });
      if (status) {
        const { datas: dataSource, pageInfo: pageResult } = data;
        const { pageNum: current, pageSize, total } = pageResult;
        this.setState({
          dataSource: type ? dataSource : [...this.state.dataSource, ...dataSource],
          pageInfo: { ...pageInfo, current, pageSize, total }
        }, () => this.setState({ isMore: this.state.dataSource.length < total }));
      }
    }).catch(() => this.setState({ loading: false }));
  };
  handleLoadMore = () => {
    const { pageInfo, isMore } = this.state;
    if (!isMore) return;
    const { current } = pageInfo;
    this.setState({
      pageInfo: { ...pageInfo, current: current + 1 }
    }, () => this.getMySalaryBillList());
  };
  isTouchBottom = (handler) => {
    const div = document.getElementById("mySalaryMobile");
    if ((div.scrollHeight - div.scrollTop) === div.clientHeight) handler();
  };
  handleChange = (type, val) => {
    const { salaryYearMonth } = this.state;
    const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
    this.setState({
      pageInfo: { ...this.state.pageInfo, current: 1 },
      salaryYearMonth: type === "salaryStartYearMonth" ? [val, salaryEndYearMonth] : [salaryStartYearMonth, val]
    }, () => this.getMySalaryBillList(true));
  };

  render() {
    const { salaryYearMonth, dataSource, isMore, loading } = this.state;
    const [salaryStartYearMonth, salaryEndYearMonth] = salaryYearMonth;
    return (
      <div id="mySalaryMobile" className="salary-mobile-list-wrapper">
        <div className="salary-mobile-list-tab">
          <WeaTab
            datas={[{ title: getLabel(111, "工资单"), viewcondition: "Payroll" }]}
            keyParam="viewcondition" selectedKey="Payroll"
          />
        </div>
        <div className="searchWrapper">
          <MobileDatePicker value={salaryStartYearMonth}
                            onChange={(v) => this.handleChange("salaryStartYearMonth", v)}/>
          <span className="to">{getLabel(15322, "至")}</span>
          <MobileDatePicker value={salaryEndYearMonth} onChange={(v) => this.handleChange("salaryEndYearMonth", v)}/>
        </div>
        <PayrollList dataSource={dataSource} isMore={isMore} loading={loading}/>
      </div>
    );
  }
}

export default Index;
