/*
 * Author: 黎永顺
 * name: 设置缴纳周期
 * Description:
 * Date: 2023/2/1
 */
import React, { Component } from "react";
import { WeaDialog } from "ecCom";
import { Button, Checkbox } from "antd";
import "./index.less";

const CheckboxGroup = Checkbox.Group;

class PaymentPeriodModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      allSelect: false,
      monthList: []
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.setState({
        monthList: _.filter(_.map(nextProps.cycleSetting.split(""), (item, index) => {
          return item === "1" ? (index + 1).toString() : "";
        }), child => !!child)
      }, () => {
        this.setState({
          allSelect: this.state.monthList.length === 12
        });
      });
    }
  }

  handleChangeALl = (e) => {
    this.setState({ allSelect: e.target.checked }, () => {
      if (this.state.allSelect) {
        this.setState({
          monthList: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12"]
        }, () => this.props.onSetPaymentPeriod(this.state.monthList));
      } else {
        this.setState({
          monthList: []
        }, () => this.props.onSetPaymentPeriod(this.state.monthList));
      }
    });
  };
  handleChangeMonth = (monthList) => {
    this.setState({ monthList }, () => {
      this.props.onSetPaymentPeriod(this.state.monthList);
      this.setState({
        allSelect: this.state.monthList.length === 12
      });
    });
  };

  render() {
    const { onCancel, visible } = this.props;
    const { monthList, allSelect } = this.state;
    const buttons = [
      <Button type="primary" onClick={onCancel}>保存</Button>,
      <Button type="ghost" onClick={() => this.setState({ monthList: [], allSelect: false })}>重置</Button>
    ];
    const options = [
      { label: "一月", value: "1" },
      { label: "二月", value: "2" },
      { label: "三月", value: "3" },
      { label: "四月", value: "4" },
      { label: "五月", value: "5" },
      { label: "六月", value: "6" },
      { label: "七月", value: "7" },
      { label: "八月", value: "8" },
      { label: "九月", value: "9" },
      { label: "十月", value: "10" },
      { label: "十一月", value: "11" },
      { label: "十二月", value: "12" }
    ];
    return (
      <WeaDialog
        onCancel={onCancel}
        title="设置缴纳周期"
        visible={visible}
        style={{ width: 450 }}
        buttons={buttons}
        initLoadCss
        className="paymentPeriodWrapper"
      >
        <div className="paymentPeriodContent">
          <div className="paymentPeriodAll">
            <Checkbox checked={allSelect} onChange={this.handleChangeALl}>全选</Checkbox>
          </div>
          <CheckboxGroup options={options} value={monthList} onChange={this.handleChangeMonth}/>
        </div>
      </WeaDialog>
    );
  }
}

export default PaymentPeriodModal;