import React from "react";
import { Button, Icon } from "antd";
import { WeaHelpfulTip } from "ecCom";
import "./index.less";
import AddCategoryModal from "./step3/AddCategoryModal";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";
import CanMoveItem from "./step3/canMoveItem";
import UserInfoSelected from "./step3/UserInfoSelect";
import PreviewSalaryModal from "./step3/previewSalaryModal";

@inject("ledgerStore")
@observer
export default class SalaryItemForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      addCategoryVisible: false,
      previewVisible: false,
      date: ''
    };
    const { ledgerStore: { empFieldList } } = this.props;
    empFieldList();
  }

  componentWillMount() {
    const { ledgerStore: { getLedgerItemForm } } = this.props;
    getLedgerItemForm();
  }

  handleAddCategorySave(name) {
    const { ledgerStore: { addItemGroup } } = this.props;
    addItemGroup(name);
  }

  handleCanMoveItemChange(dataSource, item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let groups = [...itemGroups];
    groups.map(i => {
      if (i.title == item.title) {
        item.items = dataSource;
      }
    });
    setItemGroups(groups);
    this.setState({date: new Date()})
  }

  // 薪资项目
  handleItemDataSourceChange(dataSource, item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups.map(group => {
      if (group.id == item.id) {
        group.items = dataSource;
      }
    });
    setItemGroups(newItemGroups);
  }

  // 预览点击事件
  handlePreview() {
    this.setState({ previewVisible: true });
  }

  // 修改薪资分类标题回调
  handleItemTitleChange(item, value) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups.map(group => {
      if (group.id == item.id) {
        group.name = value;
      }
    });
    setItemGroups(newItemGroups);
  }

  // 删除分类回调
  handleGroupDelete(item) {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    newItemGroups = newItemGroups.filter(group => group.id !== item.id);
    setItemGroups(newItemGroups);
  }

  // 修改项目组数据顺序
  handleUpgo = (index) => {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    if (index !== 0) {
      newItemGroups[index] = newItemGroups.splice(index - 1, 1, newItemGroups[index])[0];
    } else {
      newItemGroups.push(newItemGroups.shift());
    }
    setItemGroups(_.map(newItemGroups, (it, idx) => ({
      ...it,
      sortedIndex: it.sortedIndex ? idx : undefined
    })));
  };
  handleDowngo = (index) => {
    const { ledgerStore: { itemGroups, setItemGroups } } = this.props;
    let newItemGroups = [...itemGroups];
    if (index !== newItemGroups.length - 1) {
      newItemGroups[index] = newItemGroups.splice(index + 1, 1, newItemGroups[index])[0];
    } else {
      newItemGroups.unshift(newItemGroups.splice(index, 1)[0]);
    }
    setItemGroups(_.map(newItemGroups, (it, idx) => ({
      ...it,
      sortedIndex: it.sortedIndex ? idx : undefined
    })));
  };

  render() {
    const {
      ledgerStore: {
        itemGroups,
        setAddCategoryVisible,
        addCategoryVisible,
        baseInfoRequest
      }
    } = this.props;
    const { canEdit = "true" } = baseInfoRequest;
    const { previewVisible } = this.state;
    return (
      <div className="salaryItemForm">
        <div className="btnBar">
          <div className="btns">
            <Button
              type="primary"
              onClick={() => {
                setAddCategoryVisible(true);
              }}
              disabled={canEdit !== "true"}>
              新增分类
            </Button>
            <Button
              type="primary"
              style={{ marginLeft: "10px" }}
              onClick={() => {
                this.handlePreview();
              }}
              disabled={canEdit !== "true"}>
              预览
            </Button>
          </div>
        </div>

        <div className="userInfoWrapper">
          <div>
            <span>
              <span>员工基本信息</span>
              <WeaHelpfulTip
                style={{ marginLeft: "10px" }}
                width={200}
                title="姓名、部门、个税扣缴义务人为必须项，不可删除"
                placement="topLeft"
              />
            </span>
            <div className="rightBtnsWrapper">
              <i
                className="icon-coms-down2"
                style={{ cursor: "pointer",fontSize: 18 }}
              />
            </div>
          </div>
          <UserInfoSelected/>
        </div>
        {itemGroups &&
          itemGroups.map((item, index) => {
            if (item.items) {
              return (
                <CanMoveItem
                  disabled={canEdit !== "true"}
                  dataSource={toJS(item.items)}
                  onUpgo={this.handleUpgo}
                  onDowngo={this.handleDowngo}
                  onDataSourceChange={dataSource => {
                    this.handleItemDataSourceChange(dataSource, item);
                  }}
                  title={item.name}
                  sortedIndex={index}
                  onGroupDelete={() => {
                    this.handleGroupDelete(item);
                  }}
                  onTitleChange={value => {
                    this.handleItemTitleChange(item, value);
                  }}
                  onChange={dataSource => {
                    this.handleCanMoveItemChange(dataSource, item);
                  }}
                />
              );
            }
            return "";
          })}
        {addCategoryVisible &&
          <AddCategoryModal
            onSave={value => {
              this.handleAddCategorySave(value);
            }}
            visible={addCategoryVisible}
            onCancel={() => {
              setAddCategoryVisible(false);
            }}
          />}

        {previewVisible &&
          <PreviewSalaryModal
            visible={previewVisible}
            onCancel={() => {
              this.setState({ previewVisible: false });
            }}
          />}
      </div>
    );
  }
}