/*
 * Author: 黎永顺
 * name: 薪资项目-员工基本信息
 * Description:
 * Date: 2022/12/13
 */
import React, { Component } from "react";
import { WeaHelpfulTip, WeaSearchGroup, WeaSelect, WeaSortable } from "ecCom";
import { Button, Icon } from "antd";
import { empFieldList } from "../../../apis/ledger";

class LedgerSalaryItemBaseInfo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      empFieldListOptions: []
    };
  }

  componentDidMount() {
    this.empFieldList();
  }

  empFieldList = () => {
    empFieldList().then(({ status, data }) => {
      if (status) {
        const dataFilter = _.filter(data, it => !["taxAgentName", "username", "departmentName"].includes(it.id));
        this.setState({
          empFieldListOptions: _.map(dataFilter, it => ({ key: it.id, showname: it.name }))
        });
      }
    });
  };

  handleAddEmpList = (key, showname) => {
    const { dataSource, onChangeSortableList } = this.props;
    const obj = {
      canDelete: true,
      fieldId: key,
      fieldName: showname,
      id: dataSource.length,
      salarySobId: "",
      sortedIndex: dataSource.length
    };
    onChangeSortableList([...dataSource, obj]);
  };
  handleDeleteEmplist = (item) => {
    const { dataSource, onChangeSortableList } = this.props;
    onChangeSortableList(_.xorWith(dataSource, [item], _.isEqual));
  };

  render() {
    const { dataSource, onChangeSortableList, onPreview } = this.props;
    const { empFieldListOptions } = this.state;
    return (
      <WeaSearchGroup needTigger={false} showGroup title={<TitleComp onPreview={onPreview}/>}>
        <div className="userInfoWrapper">
          <WeaSortable
            datas={dataSource}
            draggableType="icon"
            onChange={onChangeSortableList}
            renderNodeItem={(item) => {
              const { fieldName, canDelete } = item;
              return <div style={{ display: "inline-block", paddingLeft: "10px", paddingRight: "10px" }}>
                <span className="selectedItem" onBlur>{fieldName}</span>
                {
                  canDelete &&
                  <Icon
                    style={{ cursor: "pointer", marginLeft: "5px", fontWeight: "600" }}
                    type="cross"
                    onClick={() => this.handleDeleteEmplist(item)}
                  />
                }
              </div>;
            }}
            className="wea-sortable-grid-item"
          />
          <WeaSelect
            showSearch
            options={empFieldListOptions}
            style={{ width: 150 }}
            onChange={this.handleAddEmpList}
          />
        </div>
      </WeaSearchGroup>
    );
  }
}

export default LedgerSalaryItemBaseInfo;
const TitleComp = (props) => {
  const { onPreview } = props;
  return <div className="titleWrapper">
    <div className="titleLeft">
      <span>员工基本信息</span>
      <WeaHelpfulTip
        width={300}
        title="姓名、部门、个税扣缴义务人为必须项，不可删除"
        placement="topLeft"
      />
    </div>
    <Button type="ghost" onClick={onPreview}>预览</Button>
  </div>;
};