/*
 * Author: 黎永顺
 * name: 表头字段添加
 * Description:
 * Date: 2023/5/17
 */
import React, { Component } from "react";
import { Button, Col, Row } from "antd";
import { WeaCheckbox, WeaDialog, WeaLocaleProvider, WeaSearchGroup } from "ecCom";
import "./index.less";

const { getLabel } = WeaLocaleProvider;

class AddHeaderFieldsModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      itemsCheckeds: [],
      showOnlyChecked: false
    };
  }

  componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.visible !== this.props.visible && nextProps.visible) {
      this.setState({
        itemsCheckeds: nextProps.selectItems ? _.map(nextProps.selectItems.split(","), it => Number(it)) : []
      });
    }
  }

  handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) });
  handleSelectGroupAll = (groupId, checked) => {
    const { itemsCheckeds } = this.state;
    const { itemsByGroup } = this.props;
    _.map(itemsByGroup, item => {
      if (item.salarySobItemGroupId === groupId) {
        if (!!Number(checked)) {
          this.setState({
            itemsCheckeds: [...itemsCheckeds, ..._.map(item.salaryItems, child => child.salaryItemId)]
          });
        } else {
          this.setState({
            itemsCheckeds: _.differenceWith(itemsCheckeds, _.map(item.salaryItems, child => child.salaryItemId), _.isEqual)
          });
        }
      }
    });
  };

  render() {
    const { showOnlyChecked, itemsCheckeds } = this.state;
    const { itemsByGroup } = this.props;
    let dataSource = _.map(itemsByGroup, item => {
      return {
        ...item,
        salaryItems: _.map(item.salaryItems, child => {
          return { ...child, checked: itemsCheckeds.includes(child.salaryItemId) };
        })
      };
    });
    if (showOnlyChecked) {
      dataSource = _.map(dataSource, item => {
        return { ...item, salaryItems: _.filter(item.salaryItems, it => !!it.checked) };
      });
    }
    return (
      <WeaDialog
        {...this.props} hasScroll initLoadCss
        scalable title={getLabel(111, "添加表头字段")}
        style={{ width: 700, height: 484 }} className="addHeaderFieldsWrapper"
        buttons={[
          <Button type="primary" onClick={() => this.props.onAdd(itemsCheckeds)}>{getLabel(111, "添加")}</Button>,
          <Button type="ghost" onClick={this.props.onCancel}>{getLabel(111, "取消")}</Button>
        ]}
        bottomLeft={<WeaCheckbox content={getLabel(111, "只显示已选中字段")}
                                 onChange={this.handleShowOnlyChecked}/>}
      >
        {
          _.map(dataSource, item => {
            const { salarySobItemGroupName, salaryItems, salarySobItemGroupId } = item;
            const value = _.every(salaryItems, it => !!it.checked) ? "1" : "0";
            return <WeaSearchGroup showGroup needTigger
                                   title={<WeaCheckbox content={salarySobItemGroupName} value={value}
                                                       onChange={(val) => this.handleSelectGroupAll(salarySobItemGroupId, val)}/>}>
              <Row gutter={16}>
                {
                  !_.isEmpty(salaryItems) ?
                    _.map(salaryItems, it => {
                      const { salaryItemId, salaryItemName, checked } = it;
                      return <Col span={8} style={{ marginBottom: 16 }}>
                        <WeaCheckbox content={salaryItemName} value={checked ? "1" : "0"}
                                     onChange={() => this.setState({ itemsCheckeds: _.xorWith(itemsCheckeds, [salaryItemId], _.isEqual) })}/>
                      </Col>;
                    }) : <Col span={24} style={{ minHeight: 20, padding: "5%", textAlign: "center" }}>暂无数据</Col>
                }
              </Row>
            </WeaSearchGroup>;
          })
        }
      </WeaDialog>
    );
  }
}

export default AddHeaderFieldsModal;