import React from "react";
import {
  Spin,
  Button,
  Tabs,
  Table,
  message,
  Modal,
  Input,
  Tag,
  Popconfirm
} from "antd";
import img from "./example.png"
import $ from "jquery/src/ajax";

const ResolutionPro = React.createClass({
  getInitialState() {
    return {
      visible: false,
      proArr: [
        {
          name: "子项目1",
          number: 0
        },
        {
          name: "子项目2",
          number: 0
        },
        {
          name: "子项目3",
          number: 0
        },
      ],
      inputArr: []
    };
  },
  componentWillReceiveProps(nextProps) {
    this.setState({
      visible: nextProps.resolutionVisible
    });
    const arr = [
      {
        name: "子项目1",
        number: 0
      },
      {
        name: "子项目2",
        number: 0
      },
      {
        name: "子项目3",
        number: 0
      }
    ];
    this.setState({
      proArr: arr
    });
  },
  handleOk() {
    const arr = [
      {
        name: "子项目1",
        number: 0
      },
      {
        name: "子项目2",
        number: 0
      },
      {
        name: "子项目3",
        number: 0
      }
    ];
    this.setState({
      visible: false,
      proArr: arr
    });
  },
  addPro() {
    const obj = {
      name: "子项目" + (this.state.proArr.length + 1),
      number: 0
    }
    this.state.proArr.push(obj)
    this.setState({
      proArr: this.state.proArr
    })
  },
  deletePro() {
    if(this.state.proArr.length == 2) {
      message.warning("不能继续删除子项目!")
      return
    }
    this.state.proArr.splice(this.state.proArr.length - 1, 1)
    this.setState({
      proArr: this.state.proArr
    })
  },
  submit() {
    const arr = this.state.proArr
    const numArr = []
    arr.forEach(item => {
      let num = +item.number
      if(num != 0) {
        numArr.push(num);
      }
    });
    let sum = 0
    numArr.forEach( item => {
      sum += item
    })
    if(sum != this.props.number) {
      message.warning("拆分数量总和与原项目数量不匹配,请重新填写数量!")
      return
    }
    let str = numArr.join(",")
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderProject/addSplitProject",
      data: {
        tid: this.props.id,
        splitList: str
      },
      success: function(data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          message.success("拆分成功!")
          this.props.cancel()
          this.props.loadData()
        }
      }.bind(this)
    }).always(
        function() {
          this.setState({
            loading: false
          });
        }.bind(this)
    );
  },
  changeNum() {
    let sum = 0
    this.state.proArr.forEach(item => {
      sum += (+item.number)
    })
    return sum
  },
  render() {
    return (
        <div>
          <Modal
              style={{ position: "relative" }}
              title="拆分项目"
              visible={this.state.visible}
              onCancel={this.props.cancel}
              footer={null}
              destroyOnClose={true}
          >
            <div style={{ marginBottom: 10 }}>
              当前项目名称:{this.props.name}
            </div>
            <div style={{ marginBottom: 10 }}>
              当前项目数量:{this.props.number}
            </div>
            <div style={{ marginBottom: 10 }}>
              选项:
              <Button type="primary" onClick={this.addPro}>
                +增加子项目
              </Button>
              <Button
                  type="primary"
                  style={{ marginLeft: 10 }}
                  onClick={this.deletePro}
              >
                -删除子项目
              </Button>
            </div>
            <div style={{ width: "250px", marginBottom: "10px" }}>
              {this.state.proArr.map((item, index) => {
                return (
                    <div style={{ display: "inline-block" }}>
                      <span style={{ display: "block" }}>{item.name}</span>
                      <Input
                          value={item.number}
                          style={{ width: 40 }}
                          onBlur={e => {
                            if (e.target.value.trim() == "") {
                              this.state.proArr[index].number = 0;
                              this.setState({
                                proArr: this.state.proArr
                              });
                            }
                          }}
                          onChange={e => {
                            const reg = /^[0-9]\d*$/;
                            if (!reg.test(+e.target.value)) {
                              return;
                            }
                            this.state.proArr[index].number = e.target.value;
                            this.setState(
                                {
                                  proArr: this.state.proArr
                                },
                                () => {
                                  console.log(this.state.proArr);
                                }
                            );
                          }}
                      />
                      <span color={"#2db7f5"} style={{ marginLeft: 5 }}>
                    {index == this.state.proArr.length - 1 ? "=" : "+"}
                  </span>
                      <span style={{ marginLeft: 5 }}>
                    {index == this.state.proArr.length - 1
                        ? this.changeNum()
                        : ""}
                  </span>
                    </div>
                );
              })}
            </div>
            <img
                src={img}
                style={{
                  position: "absolute",
                  width: "150px",
                  right: "20px",
                  top: "50%",
                  transform: "translateY(-50%)"
                }}
            />
            <p style={{ color: "red" }}>各子项目相加需等于当前项目数量!</p>
            <Popconfirm
                placement="top"
                title={
                  <span style={{ color: "red", fontWeight: 900 }}>
                系统提示:请确定将当前项目数量按选项,进行拆分,拆分为子项目后,不可修改!!!
              </span>
                }
                onConfirm={this.submit}
                okText="确定"
                cancelText="取消"
            >
              <Button
                  loading={this.state.loading}
                  type="primary"
                  style={{
                    position: "relative",
                    left: "50%",
                    bottom: -20,
                    transform: "translate(-50%, -50%)"
                  }}
              >
                确认拆分
              </Button>
            </Popconfirm>
          </Modal>
        </div>
    );
  }
});

export default ResolutionPro;