import React from "react";
import { Button, Col, Row, Switch } from "antd";
import { inject, observer } from "mobx-react";
import { WeaDialog, WeaInput, WeaSelect } from "ecCom";
import "./index.less";

@inject("attendanceStore")
@observer
export default class ItemMangeFormModal extends React.Component {
  componentWillMount() {
    const { attendanceStore: { currentItem, currentItemOperate } } = this.props;
    if (currentItemOperate == "add") {
      this.state = {
        request: {
          fieldName: "",
          fieldType: "1",
          enableStatus: 0,
          description: ""
        }
      };
    } else {
      this.state = {
        request: currentItem
      };
    }
  }

  handleChange(params) {
    const { request } = this.state;
    let result = { ...request, ...params };
    this.setState({ request: result });
  }

  convertFieldType = (fileTypeStr) => {
    if (fileTypeStr == "数值") {
      return "1";
    } else if (fileTypeStr == "文本") {
      return "2";
    } else if (fileTypeStr == "1" || fileTypeStr == "2") {
      return fileTypeStr;
    }
    return "";
  };

  render() {
    const options = [
      {
        key: "1",
        selected: true,
        showname: "数值"
      },
      {
        key: "2",
        selected: false,
        showname: "文本"
      }
    ];
    const { request } = this.state;
    const { fieldName, fieldType, enableStatus, description } = request;
    let fileTypeKey = this.convertFieldType(fieldType);
    const { attendanceStore: { currentItemOperate } } = this.props;
    return (
      <WeaDialog style={{ width: 600 }} visible={this.props.visible} onCancel={this.props.onCancel}
                 title="新建考勤自定义字段"
                 initLoadCss
                 className="itemManageModalWrapper"
                 buttons={[
                   <Button type="primary" onClick={() => {
                     currentItemOperate == "add" ? this.props.onSave(this.state.request) :
                       this.props.onUpdate(this.state.request);
                   }
                   }>保存</Button>
                 ]}>
        <div style={{ padding: "16px 120px" }}>
          <Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
            <Col span={8}>
              字段名称
            </Col>
            <Col span={16}>
              <WeaInput viewAttr={3} style={{ width: "200px" }} value={fieldName} onChange={(v) => {
                this.handleChange({ fieldName: v });
              }}/>
            </Col>
          </Row>
          <Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
            <Col span={8}>
              类型
            </Col>
            <Col span={16}>
              <WeaSelect style={{ width: "200px" }} options={options} value={fileTypeKey}
                         onChange={(v) => this.handleChange({ fieldType: v })}
              />
            </Col>
          </Row>
          <Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
            <Col span={8}>
              是否启用
            </Col>
            <Col span={16}>
              <Switch checked={enableStatus == 1} onChange={(value) => {
                let enableStatus = 0;
                if (value) {
                  enableStatus = 1;
                }
                this.handleChange({ enableStatus });
              }}/>
            </Col>
          </Row>
          <Row gutter={[10, 10]} style={{ marginBottom: "10px" }}>
            <Col span={8}>
              备注
            </Col>
            <Col span={16}>
              <WeaInput style={{ width: "200px" }} value={description} onChange={(v) => {
                this.handleChange({ description: v });
              }}/>
            </Col>
          </Row>
        </div>

      </WeaDialog>
    );
  }
}