import React from "react";
import { Button, Col, Row } from "antd";
import { WeaDialog, WeaError, WeaInput } from "ecCom";

export default class AddCategoryModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: this.props.title ? this.props.title : ""
    };
  }

  render() {
    return (
      <WeaDialog
        title={this.props.title && this.props.title !== "" ? "修改分类" : "新增分类"}
        buttons={[<Button type="primary" onClick={() => {
          if (!this.state.name) {
            this.refs.weaError.showError();
            return;
          }
          this.props.onSave(this.state.name);
        }}>保存</Button>]} style={{ width: 600 }}
        visible={this.props.visible}
        onCancel={() => {
          this.props.onCancel();
        }}
      >
        <div style={{ padding: "20px" }}>
          <Row style={{ display: "flex", alignItems: "center" }}>
            <Col span={6}>分类名称</Col>
            <Col span={18}>
              <WeaError
                tipPosition="bottom"
                ref="weaError"
                error="请填写分类名称"
                style={{ width: "100%" }}>
                <WeaInput
                  style={{ width: "100%" }}
                  viewAttr={3}
                  value={this.state.name}
                  onChange={(value) => {
                    if (value === "") {
                      this.refs.weaError.showError();
                      return;
                    }
                    this.setState({ name: value });
                  }}/>
              </WeaError>
            </Col>
          </Row>
        </div>
      </WeaDialog>
    );
  }
}