import React from "react";
import { Row, Col, Switch, Select } from "antd";
import { WeaInput, WeaSelect } from "ecCom";
import { inject, observer } from "mobx-react";
import RequiredLabelTip from "../../../components/requiredLabelTip";
import "./index.less";
const { Option } = Select;

@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: 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 } = this.state;
    const {
      salarySob,
      salarySobOption,
      name,
      description,
      emailStatus,
      sendEmail,
      sendEmailOptions,
      msgStatus
    } = request;
    return (
      <div className="baseInformForm">
        <div className="formItemWrapper">
          <div className="itemTitle">基础信息</div>
          <div className="formWrapper">
            <Row className="formItem">
              <Col span={8}>
                薪资账套<RequiredLabelTip />
              </Col>
              <Col span={16}>
                {this.state.inited &&
                  <Select
                    defaultValue={salarySob ? salarySob : ""}
                    value={salarySob ? salarySob : ""}
                    style={{ width: "200px" }}
                    className="wea-select"
                    notFoundContent="暂无数据"
                    onChange={value => this.hanldeChange({ salarySob: value })}>
                    {this.state.options.map(item =>
                      <Option value={item.key} key={item.key}>
                        {item.showname}
                      </Option>
                    )}
                  </Select>}
              </Col>
            </Row>
            <Row className="formItem">
              <Col span={8}>
                工资单模板名称<RequiredLabelTip />
              </Col>
              <Col span={16}>
                <WeaInput
                  value={name}
                  onChange={value => this.hanldeChange({ name: value })}
                />
              </Col>
            </Row>
            <Row className="formItem">
              <Col span={8}>备注</Col>
              <Col span={16}>
                <WeaInput
                  value={description}
                  onChange={value => this.hanldeChange({ description: value })}
                />
              </Col>
            </Row>
          </div>
        </div>
        {/* 发送位置先隐藏 */}
        {/* <div  className="formItemWrapper">
                    <span className="itemTitle">发送位置</span>
                    <div className="formWrapper">
                        <Row className="formItem">
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>邮件</Col>
                                    <Col span={16}>
                                        <Switch value={emailStatus} onChange={(value) => {this.hanldeChange({emailStatus: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>发送地址</Col>
                                    <Col span={16}>
                                        <WeaSelect style={{width: '200px'}} value={sendEmail} onChange={(value) => {this.hanldeChange({sendEmail: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                        <Row className="formItem">
                            <Col span={12}>
                                <Row>
                                    <Col span={8}>消息中心</Col>
                                    <Col span={16}>
                                        <Switch checked={msgStatus} onChange={(value)=>{this.hanldeChange({msgStatus: value})}}/>
                                    </Col>
                                </Row>
                            </Col>
                        </Row>
                    </div>
                </div> */}
      </div>
    );
  }
}