import React from "react";
import { Icon, Modal } from "antd";
import { WeaSearchGroup } from "ecCom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import "./index.less";


@inject("payrollStore")
@observer
export default class TemplateSettingForm extends React.Component {

  handleDownClick = (index) => {
    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
    let downItem = replenishSalaryTemplateSalaryItemSet[index + 1];
    let thisItem = replenishSalaryTemplateSalaryItemSet[index];
    let resultSet = [...replenishSalaryTemplateSalaryItemSet];
    resultSet[index] = downItem;
    resultSet[index + 1] = thisItem;
    setReplenishSalaryTemplateSalaryItemSet(resultSet);
  };

  handleUpClick = (index) => {
    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
    let upItem = replenishSalaryTemplateSalaryItemSet[index - 1];
    let thisItem = replenishSalaryTemplateSalaryItemSet[index];
    let resultSet = [...replenishSalaryTemplateSalaryItemSet];
    resultSet[index] = upItem;
    resultSet[index - 1] = thisItem;
    setReplenishSalaryTemplateSalaryItemSet(resultSet);
  };

  handleDeleteItem = (group, item) => {
    const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
    let resultSalaryItemSet = [...replenishSalaryTemplateSalaryItemSet];
    resultSalaryItemSet.map(sourceGroup => {
      if (sourceGroup.id === group.id) {
        sourceGroup.items.map((sourceItem, index) => {
          if (sourceItem.id === item.id) {
            sourceGroup.items.splice(index, 1);
          }
        });
      }
    });
    setReplenishSalaryTemplateSalaryItemSet(resultSalaryItemSet);
  };

  handleDeleteClick = (index) => {
    Modal.confirm({
      title: "信息确认",
      content: "确认删除",
      onOk: () => {
        const { payrollStore: { replenishSalaryTemplateSalaryItemSet, setReplenishSalaryTemplateSalaryItemSet } } = this.props;
        let resultSalaryItemSet = [...replenishSalaryTemplateSalaryItemSet];
        resultSalaryItemSet.splice(index, 1);
        setReplenishSalaryTemplateSalaryItemSet(resultSalaryItemSet);
      },
      onCancel: () => {
      }
    });
  };

  render() {
    const { payrollStore } = this.props;
    const { replenishSalaryTemplateSalaryItemSet } = payrollStore;
    return (
      <div className="showSettingForm">
        <WeaSearchGroup title="薪资项目设置" items={[]} needTigger showGroup>
          {
            !_.isEmpty(toJS(replenishSalaryTemplateSalaryItemSet)) &&
            replenishSalaryTemplateSalaryItemSet.map((group, index) => (
              <div className="configItemWrapper">
                <div className="configTitle">{group.groupName}
                  {
                    index < replenishSalaryTemplateSalaryItemSet.length - 1 &&
                    <Icon
                      type="caret-down"
                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
                      onClick={() => {
                        this.handleDownClick(index);
                      }}
                    />
                  }
                  {
                    index > 0 &&
                    <Icon
                      type="caret-up"
                      style={{ marginLeft: "10px", cursor: "pointer", color: "#666" }}
                      onClick={() => {
                        this.handleUpClick(index);
                      }}
                    />
                  }
                  <i
                    className="icon-coms-Delete"
                    style={{ cursor: "pointer", color: "#666", marginLeft: "10px" }}
                    onClick={() => {
                      this.handleDeleteClick(index);
                    }}
                  />
                </div>
                <div className="configContent">
                  {group.items.map(item => (
                    <span className="editItem">{item.name}
                      <Icon
                        type="cross" style={{ cursor: "pointer" }}
                        onClick={() => {
                          this.handleDeleteItem(group, item);
                        }}
                      />
                    </span>
                  ))}
                </div>
              </div>
            ))
          }
        </WeaSearchGroup>
      </div>
    );
  }
}