import React from "react";
import { Button } from 'antd';
import { WeaTable } from "ecCom";
import { slideStep4Columns } from "./columns";
import "./index.less";
import RuleEditModal from "./step4/RuleEditModal";
import { inject, observer } from "mobx-react";
import { toJS } from 'mobx';

@inject("ledgerStore")
@observer
export default class CalRulesForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      slideStep4Columns: slideStep4Columns.map(item => {
        item = { ...item };
        if (item.key == "cz") {
          item.render = (text, record) => {
            return (
              <a onClick={() => {
                this.handleDeleteItem(record);
              }}>删除</a>
            );
          };
        }
        return item;
      })
    };
  }

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

  handleSave(params) {
    const { ledgerStore: { sobItemRuleDataSource, setSobItemRuleDataSource } } = this.props;
    let dataSource = [...sobItemRuleDataSource];
    dataSource.push(params);
    setSobItemRuleDataSource(dataSource);
  }

  handleDeleteItem(record) {
    const { ledgerStore: { sobItemRuleDataSource, setSobItemRuleDataSource } } = this.props;
    let dataSource = [...sobItemRuleDataSource];
    setSobItemRuleDataSource(dataSource.filter(item => item.salaryItemId != record.key));
  }

  convertAdjustmentType(index) {
    let nameList = {
      1: '取调薪前薪资',
      2: '取调薪后薪资',
      3: '平均值',
      4: '分段计薪',
    };
    return nameList[Number(index)];
  }

  getSalaryItemName(salaryItemId) {
    const { ledgerStore: { ruleOptionList } } = this.props;
    let result = "";
    ruleOptionList.map(item => {
      if (item.key == salaryItemId) {
        result = item.showname;
      }
    });
    return result;
  }

  convertDataSource(dataSoruce) {
    let result = [...dataSoruce];
    return result.map(item => {
      let resultStr = "";
      resultStr += `${item.dayOfMonth}号（含）之前调薪，${this.convertAdjustmentType(item.beforeAdjustmentType)}；${item.dayOfMonth}号之后调薪，${this.convertAdjustmentType(item.afterAdjustmentType)}`;
      return {
        key: item.salaryItemId,
        salaryItemId: item.salaryItemId,
        salaryItemName: item.salaryItemName ? item.salaryItemName : this.getSalaryItemName(item.salaryItemId),
        rule: resultStr
      };
    });
  }

  render() {
    const { ledgerStore: { sobItemRuleDataSource, baseInfoRequest } } = this.props;
    const { canEdit = "true" } = baseInfoRequest;
    let datas = this.convertDataSource(sobItemRuleDataSource);
    return (
      <div className="calRulesForm">
        <div className="headerIcon">
          {
            canEdit === "true" &&
            <Button
              type="primary"
              size="small"
              style={{ marginRight: 10 }}
              onClick={() => {
                this.setState({ modalVisible: true });
              }}
            ><span className="icon-coms-Add-to-hot" title="添加"></span></Button>
          }
        </div>
        <div className="tableWrapper">
          <WeaTable dataSource={datas} columns={this.state.slideStep4Columns} pagination={false}/>
        </div>

        {
          this.state.modalVisible && <RuleEditModal
            visible={this.state.modalVisible}
            onCancel={() => this.setState({ modalVisible: false })}
            onSave={(params) => {
              this.handleSave(params);
            }}
          />
        }
      </div>
    );
  }
}