/*
 * Author: 黎永顺
 * name: 移动端页面-日期选择组件
 * Description:
 * Date: 2023/11/10
 */
import React, { Component } from "react";
import { WeaLocaleProvider } from "ecCom";
import moment from "moment";
import { Picker, Popup } from "spring-picker";
import "spring-picker/lib/style.css";

const getLabel = WeaLocaleProvider.getLabel;

class Index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      salaryYearMonth: { year: "", month: "" }
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    const { value } = nextProps;
    const [year, month] = value.split("-");
    this.setState({
      salaryYearMonth: { year, month }
    });
  }

  handleChangeYear = (year) => {
    this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, year } });
  };
  handleChangeMonth = (month) => {

    this.setState({ salaryYearMonth: { ...this.state.salaryYearMonth, month: parseInt(month).toString() } });
  };
  handleCancel = () => {
    this.setState({ visible: false });
  };
  handleConfirm = () => {
    const { year, month } = this.state.salaryYearMonth;
    this.setState({ visible: false }, () => {
      this.props.onChange(moment(new Date(`${year}- ${month}`)).format("YYYY-MM"));
    });
  };

  render() {
    const { value } = this.props;
    const { visible } = this.state;
    const [year, month] = value.split("-");
    return (
      <div className="ui-picker-address">
        <span className="date" onClick={() => this.setState({ visible: true })}>{value}</span>
        <Popup visible={visible} onCancel={this.handleCancel} onConfirm={this.handleConfirm}>
          <Picker
            onChange={this.handleChangeYear}
            data={{
              list: YearFn(Number(moment().subtract(100, "year").format("YYYY")), Number(moment().add(100, "year").format("YYYY"))),
              defaultValue: year,
              displayValue(name) {
                return name;
              }
            }}
          />
          <Picker
            onChange={this.handleChangeMonth}
            data={{
              list: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
              defaultValue: `${parseInt(month)}月`,
              displayValue(name) {
                return name;
              }
            }}
          />
        </Popup>
      </div>
    );
  }
}

export default Index;
const YearFn = (lowEnd, highEnd) => {
  let list = [];
  for (let i = lowEnd; i <= highEnd; i++) {
    list.push(i.toString());
  }
  return list;
};
