import React from "react";
import { WeaFormItem, WeaInput, WeaSearchGroup, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import { toJS } from "mobx";

@inject("payrollStore")
@observer
export default class BaseInformForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inited: false,
      options: [],
      request: {}
    };
  }

  componentWillMount() {
    const { payrollStore } = this.props;
    const { getPayrollBaseForm } = payrollStore;
    getPayrollBaseForm(this.props.id).then(data => {
      this.setState(
        {
          options: _.isEmpty(toJS(data.salarySobOptions)) ? [{ key: "", showname: "" }] : [{
            key: "",
            showname: ""
          }, ...toJS(data.salarySobOptions)],
          request: data.templateBaseData
        },
        () => {
          this.setState({
            inited: true
          });
        }
      );
    });
  }

  hanldeChange(params) {
    let request = { ...this.state.request, ...params };
    this.setState({
      request
    });
    this.props.onChange && this.props.onChange(request);
  }

  render() {
    const { request, options } = this.state;
    const { salarySob, name, description } = request;
    return (
      <WeaSearchGroup title="基础信息" items={[]} needTigger showGroup center>
        <WeaFormItem
          label="薪资账套"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          {
            this.state.inited &&
            <WeaSelect
              viewAttr={3}
              options={options}
              value={salarySob ? salarySob : ""}
              style={{ width: "200px" }}
              onChange={value => this.hanldeChange({ salarySob: value })}/>
          }
        </WeaFormItem>
        <WeaFormItem
          label="工资单模板名称"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaInput
            value={name}
            viewAttr={3}
            onChange={value => this.hanldeChange({ name: value })}
          />
        </WeaFormItem>
        <WeaFormItem
          label="备注"
          labelCol={{ span: 6 }}
          wrapperCol={{ span: 18 }}
        >
          <WeaInput
            value={description}
            onChange={value => this.hanldeChange({ description: value })}
          />
        </WeaFormItem>
      </WeaSearchGroup>
    );
  }
}