/*
 * Author: 黎永顺
 * name: 社保福利台账-核算-导入表头设置
 * Description:
 * Date: 2024/3/5
 */
import React, { Component } from "react";
import { Button, Col, Row } from "antd";
import { WeaCheckbox, WeaDialog, WeaLocaleProvider } from "ecCom";
import "./index.less";

const getLabel = WeaLocaleProvider.getLabel;

class ImportHeaderSetDialog 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 });
    } else {
      this.setState({ itemsCheckeds: [], showOnlyChecked: false });
    }
  }

  handleShowOnlyChecked = (showOnlyChecked) => this.setState({ showOnlyChecked: !!Number(showOnlyChecked) });
  handleSelectAll = (checked) => {
    const { itemsByGroup } = this.props;
    if (checked === "1") {
      this.setState({ itemsCheckeds: _.map(itemsByGroup, it => it.fieldId) });
    } else {
      this.setState({ itemsCheckeds: [] });
    }
  };

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

export default ImportHeaderSetDialog;