import React, { Component } from "react";
import { Alert, Button, Input, message, Modal, Spin, Form } from "antd";
import $ from "jquery/src/ajax";
const FormItem = Form.Item;
const confirm = Modal.confirm;

class PublicSupplement extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      loading: false,
      supplement: "",
      nextPlan:""
    };
    this.addSupplement = this.addSupplement.bind(this);
  }

  addSupplement(e) {
    this.props.closeModel()
    e.stopPropagation();
    if (!this.state.supplement) {
      message.info("本次公出目标总结不能为空");
      return;
    }
    if (!this.state.nextPlan) {
        message.info("下一步公出计划不能为空");
        return;
      }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/addSupplement",
      data: {
        id: this.props.infor.prid,
        supplement:
          (this.props.infor.supplement ? this.props.infor.supplement + '/' : "") +
          this.state.supplement,
        nextPlan: (this.props.infor.nextPlan ? this.props.infor.nextPlan + '/' : "") +
        this.state.nextPlan,
      },
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("发布成功");
          this.setState({
            loading: false,
            visible: false,
            supplement: "",
            nextPlan:""
          });
          this.props.onCancel && this.props.onCancel();
          this.props.closeModel()
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  render() {
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    return (
      <div>
        <Button
          size="small"
          type="primary"
          onClick={(e) => {
            e.stopPropagation();
            this.setState({
              visible: true,
            });
          }}
        >
          补写公出补充
        </Button>
        <Modal
          className="customeDetails"
          title="本次公出目标总结、下一步公出计划"
          width="500px"
          visible={this.state.visible}
          onOk={() => {
            this.setState({
              visible: false,
            });
          }}
          onCancel={() => {
            this.setState({
              visible: false,
            });
          }}
          footer=""
        >
          <Spin spinning={this.state.loading}>
            <div
              style={{
                display: "flex",
                flexFlow: "column",
              }}
            >
              <Form>
                <FormItem
                  {...formItemLayout}
                  label="本次公出目标总结"
                  hasFeedback
                >
                  <Input
                    value={this.state.supplement}
                    style={{ height: "50px" }}
                    placeholder="本次公出目标总结：针对今天面谈已经达到的初步目标，需要注意的事项等"
                    type={"textarea"}
                    onChange={(e) => {
                      this.setState({
                        supplement: e.target.value,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  {...formItemLayout}
                  label="下一次公出计划"
                  hasFeedback
                >
                  <Input
                    value={this.state.nextPlan}
                    style={{ height: "50px" }}
                    placeholder="计划什么时候再次面谈？计划面谈什么内容或者计划达成什么目标？预计什么时候达成合作？"
                    type={"textarea"}
                    onChange={(e) => {
                      this.setState({
                        nextPlan: e.target.value,
                      });
                    }}
                  />
                </FormItem>
              </Form>
              {/* <div>
                <Input
                  value={this.state.supplement}
                  style={{ height: "50px" }}
                  placeholder="本次公出目标总结：针对今天面谈已经达到的初步目标，需要注意的事项等"
                  type={"textarea"}
                  onChange={(e) => {
                    this.setState({
                      supplement: e.target.value,
                    });
                  }}
                />
              </div>
              <Input
                value={this.state.supplement}
                style={{ height: "50px" }}
                placeholder="下一步公出计划：计划什么时候再次面谈？计划面谈什么内容或者计划达成什么目标？预计什么时候达成合作？"
                type={"textarea"}
                onChange={(e) => {
                  this.setState({
                    supplement: e.target.value,
                  });
                }}
              /> */}
              <div
                style={{
                  paddingTop: "5px",
                  color: "#F00",
                  paddingBottom: "15px",
                  fontSize: "10px",
                }}
              >
                面谈总结，沟通完后记录今天交流的情况。计划下一次什么时候再面谈？该如何面谈？该如何跟进？
              </div>
              <Button
                type="primary"
                style={{ marginTop: "10px", marginBottom: "10px" }}
                onClick={(e) => {
                  let _this = this;
                  confirm({
                    title: "确定要提交公出补充吗?",
                    content: "公出补充提交成功后无法删除",
                    onOk() {
                      _this.addSupplement(e);
                    },
                    onCancel() {},
                  });
                }}
              >
                保存
              </Button>
            </div>
          </Spin>
        </Modal>
      </div>
    );
  }
}

export default PublicSupplement;