import React, { Component } from "react";
import {
  Form,
  Select,
  Input,
  Button,
  message,
  Spin,
  Tag,
  Table,
  Col,
  Popconfirm,
  Modal,
  AutoComplete,
  DatePicker
} from "antd";
import $ from "jquery/src/ajax";
import moment from "moment";
import ResolutionDetail from "@/resolutionDetail";
import PicturesWall from "./picturesWall";
import Rizhi from "./rizhi";
import {
  cuiJieDian,
  orderTypes,
  customerType,
  jiedian,
  tepi,
  boutique
} from "@/dataDic.js";
import { moneyVerify } from "@/tools.js"
const FormItem = Form.Item;
const confirm = Modal.confirm;
const Option = AutoComplete.Option;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};
class ChangeApply extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      voucherUrl: [],
      dataSource: [],
      cuiDataSource: [],
      loading: false,
      changeCuiList: [
        {
          title: "变更状态",
          dataIndex: "type",
          key: "type",
          render: (text) => {
            let str = "";
            let color = "";
            if (text == 1) {
              str = "增";
              color = "#87d068";
            } else if (text == 2) {
              str = "改";
              color = "#108ee9";
            } else if (text == 3) {
              str = "删";
              color = "#f50";
            }
            return (
              <Tag
                color={color}
                style={{ display: text == 0 ? "none" : "inline-block" }}
              >
                {str}
              </Tag>
            );
          },
        },
        {
          title: "项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          render: (text, record, index) => {
            let dataArr = this.state.proDataSource || [];
            if (text) {
              if (record.ctid) {
                return <span>{text + "-" + record.ctid}</span>;
              } else {
                let tid = record.tid;
                let ctid = "";
                dataArr.forEach((item, index) => {
                  if (item.tid == tid) {
                    ctid = item.id;
                  }
                });
                return <span>{text + "-" + ctid}</span>;
              }
            }
            return (
              <Select
                placeholder="请选择名称"
                style={{ width: "150px" }}
                disabled={this.state.getLoad && record.sortName ? true : false}
                onChange={(e) => {
                  let num = e.lastIndexOf("-");
                  let ctid = e.substr(num + 1);
                  record.sortName = e.substring(0, num);
                  dataArr.forEach((item) => {
                    if (
                      item.commodityName == record.sortName &&
                      ctid == item.id
                    ) {
                      record.cname = item.cname;
                      record.ctid = item.id;
                      record.isSave = true;
                      record.sort = item.cSort;
                      cuiJieDian.forEach((item) => {
                        if (item.value == record.sort) {
                          record.arr = item.children;
                          let yearFlag = true;
                          if (record.sort == 6) {
                            yearFlag = false;
                          }
                          this.setState({
                            getLoad: true,
                            yearFlag,
                          });
                        }
                      });
                    }
                  });
                }}
              >
                {dataArr.map((item, index) => {
                  if (item.type == 3) {
                    return (
                      <Select.Option
                        key={item.id}
                        value={item.commodityName + "-" + item.id}
                        disabled
                      >
                        {item.commodityName + "-" + item.id}
                      </Select.Option>
                    );
                  } else {
                    return (
                      <Select.Option
                        key={item.id}
                        value={item.commodityName + "-" + item.id}
                      >
                        {item.commodityName + "-" + item.id}
                      </Select.Option>
                    );
                  }
                })}
              </Select>
            );
          },
        },
        {
          title: "项目分类",
          dataIndex: "projectType",
          key: "projectType",
          render: (text, record) => {
            if (text) {
              let arr = this.state.proDataSource || [];
              let str = "";
              for (let i = 0; i < arr.length; i++) {
                if (this.state.proDataSource[i].cSort == text) {
                  str = this.state.proDataSource[i].cname;
                  return <span>{str}</span>;
                }
              }
            }
            if (this.state.getLoad) {
              return (
                <Select
                  style={{ width: "150px" }}
                  placeholder="请选择分类"
                  value={record.cname}
                >
                  <Select.Option key={record.sort} value={record.cname}>
                    {record.cname}
                  </Select.Option>
                </Select>
              );
            } else {
              return (
                <Select style={{ width: "150px" }} placeholder="请选择分类">
                  <Select.Option key={record.sort} value={record.cname}>
                    {record.cname}
                  </Select.Option>
                </Select>
              );
            }
          },
        },
        {
          title: "催款科目",
          dataIndex: "dunTypeName",
          key: "dunTypeName",
          render: (text, record) => {
            if (text) {
              return <span>{text}</span>;
            }
            if (this.state.getLoad) {
              let arr = record.arr || [];
              return (
                <div>
                  <Select
                    style={{ width: "150px", marginRight: 5 }}
                    placeholder="请选择分类"
                    onChange={(e) => {
                      record.dunType = e;
                      if (record.dunType != 0) {
                        record.customizeTimes = "";
                        record.customizeName = "";
                      }
                      if (e != 1) {
                        this.setState({
                          timeFlag: true,
                        });
                      } else {
                        this.setState({
                          timeFlag: false,
                        });
                      }
                      if (e == 1 && record.sort == 6) {
                        this.setState({
                          yearFlag: true,
                        });
                      } else if (e != 1 && record.sort == 6) {
                        this.setState({
                          yearFlag: false,
                        });
                      }
                      if (record.sort == 3 && e == 3) {
                        this.setState({
                          boFlag: true,
                        });
                      } else {
                        this.setState({
                          boFlag: false,
                        });
                      }
                    }}
                  >
                    {arr.map((item) => {
                      record;
                      return (
                        <Select.Option key={item.value} value={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                    <Select.Option key={0} value={0}>
                      自定义
                    </Select.Option>
                  </Select>
                  {record.dunType == 0 ? (
                    <Input
                      value={record.customizeName}
                      placeholder="请输入自定义名称"
                      required="required"
                      onChange={(e) => {
                        record.customizeName = e.target.value;
                        this.setState({
                          contactList: this.state.contactList,
                        });
                      }}
                      style={{ width: "120px" }}
                    />
                  ) : (
                    ""
                  )}
                </div>
              );
            } else {
              return (
                <Select style={{ width: "150px" }} placeholder="请选择分类">
                  <Select.Option key={0} value={"请选择上一项"}></Select.Option>
                </Select>
              );
            }
          },
        },
        {
          title: "收款时间(特批需选择时间)",
          dataIndex: "waitDay",
          key: "waitDay",
          render: (text, record) => {
            if (record.dunTypeName) {
              if (record.customizeTimes) {
                return record.customizeTimes;
              }
              if (text == 0) {
                var str = "当天";
              } else if (!text) {
                var str = "";
              } else {
                var str = text + "天";
              }
              return <span>{str}</span>;
            }
            return (
              <div>
                {record.dunType == 0 ? (
                  <DatePicker
                    style={{ width: 150 }}
                    disabledDate={(e) => {
                      let time = moment(e).valueOf();
                      let today = Date.parse(new Date());
                      if (time <= today) {
                        return true;
                      }
                    }}
                    onChange={(e, t) => {
                      record.customizeTimes = t;
                    }}
                  />
                ) : (
                  <Select
                    placeholder="请选择时间"
                    style={{ width: "160px" }}
                    disabled={
                      this.state.approval != 0 && !this.state.timeFlag
                        ? false
                        : true
                    }
                    onChange={(e) => {
                      record.waitDay = e;
                    }}
                  >
                    <Select.Option key={0}>当天</Select.Option>
                    <Select.Option key={3}>3天</Select.Option>
                    <Select.Option key={5}>5天</Select.Option>
                    <Select.Option key={7}>7天</Select.Option>
                    <Select.Option key={15}>15天</Select.Option>
                  </Select>
                )}
              </div>
            );
          },
        },
        {
          title: "金额(万元)",
          dataIndex: "money",
          key: "money",
          render: (text, record) => {
            if (record.dunTypeName) {
              if (record.appropriationRatio && !record.money) {
                return <span>{record.appropriationRatio}(拨款比例)</span>;
              } else if (record.appropriationRatio && record.money) {
                return (
                  <span>
                    {text}(比例:{record.appropriationRatio})
                  </span>
                );
              } else {
                return <span>{text}</span>;
              }
            }
            if (this.state.boFlag) {
              return (
                <div>
                  <div style={{ width: 70, float: "left", marginRight: 5 }}>
                    <Select
                      placeholder="选择"
                      defaultValue={"金额"}
                      onChange={(e) => {
                        record.boStatus = e;
                      }}
                    >
                      <Select.Option key={true}>比例</Select.Option>
                      <Select.Option key={false}>金额</Select.Option>
                    </Select>
                  </div>
                  <div style={{ float: "right" }}>
                    <Input
                      value={record.money}
                      placeholder="请根据左侧类型填写"
                      key={record.id}
                      required="required"
                      onChange={(e) => {
                        record.money = e.target.value;
                        this.setState({
                          contactList: this.state.contactList,
                        });
                      }}
                      style={{ width: "120px" }}
                    />
                  </div>
                </div>
              );
            } else {
              return (
                <div>
                  <Input
                    value={record.money}
                    placeholder="请输入金额(必填项)"
                    key={record.id}
                    required="required"
                    onChange={(e) => {
                      record.money = e.target.value;
                      this.setState({ contactList: this.state.contactList });
                    }}
                    style={{ width: "120px" }}
                  />
                </div>
              );
            }
          },
        },
        {
          title: "服务年限",
          dataIndex: "startDate",
          key: "startDate",
          render: (text, record) => {
            if (record.dunTypeName) {
              return <span>{text}</span>;
            }
            return (
              <Select
                placeholder="请选择年限"
                style={{ width: "150px" }}
                disabled={this.state.yearFlag ? true : false}
                onChange={(e) => {
                  record.effectiveCount = e;
                }}
              >
                {/* <Select.Option key={null}>无</Select.Option> */}
                <Select.Option key={1}>一年</Select.Option>
                <Select.Option key={3}>两年</Select.Option>
                <Select.Option key={5}>三年</Select.Option>
                <Select.Option key={7}>四年</Select.Option>
                <Select.Option key={9}>五年</Select.Option>
              </Select>
            );
          },
        },
        {
          title: "催款状态",
          dataIndex: "status",
          key: "status",
          render: (text) => {
            return <span>{text == 1 ? "已启动" : "未启动"}</span>;
          },
        },
        {
          title: "操作",
          dataIndex: "dels",
          key: "dels",
          render: (text, record, index) => {
            return (
              <div>
                <Popconfirm
                  title="是否删除?"
                  onConfirm={() => {
                    this.changeDeleteCui(record);
                  }}
                  okText="删除"
                  cancelText="不删除"
                >
                  <Button
                    disabled={this.state.listCuiFlag}
                    style={{
                      marginRight: "10px",
                      display: this.state.displayList ? "none" : "block",
                    }}
                  >
                    删除
                  </Button>
                </Popconfirm>
                {record.isSave ? (
                  <Button
                    type="primary"
                    style={{ marginTop: 5 }}
                    onClick={(e) => {
                      this.changeSaveCui(record);
                    }}
                  >
                    保存
                  </Button>
                ) : (
                  ""
                )}
              </div>
            );
          },
        },
      ],
      resVisible: false,
      proColumns: [
        {
          title: "变更状态",
          dataIndex: "type",
          key: "type",
          render: (text, record) => {
            let str = "";
            let color = "";
            if (text == 1) {
              str = "增";
              color = "#87d068";
            } else if (text == 2) {
              str = "改";
              color = "#108ee9";
            } else if (text == 3) {
              str = "删";
              color = "#f50";
            }
            return (
              <span>
                <Tag
                  color={color}
                  style={{ display: text == 0 ? "none" : "inline-block" }}
                >
                  {str}
                </Tag>
                {record.splitStatus == 1 ? (
                  <Tag
                    color="#108ee9"
                  >
                    父项目
                  </Tag>
                ) : (
                  ""
                )}
                {record.splitStatus == 2 ? (
                  <Tag
                    color="#108ee9"
                  >
                    子项目
                  </Tag>
                ) : (
                  ""
                )}
              </span>
            );
          },
        },
        {
          title: "业务项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          render: (text, record) => {
            return text + "-" + record.id;
          },
        },
        {
          title: "项目类别",
          dataIndex: "cname",
          key: "cname",
        },
        {
          title: "项目数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity",
        },
        {
          title: "金额(万元)",
          dataIndex: "commodityPrice",
          key: "commodityPrice",
          render: (text, record) => {
            if (record.splitStatus == 2) {
              return "/";
            } else {
              return text;
            }
          },
        },
        {
          title: "主要项目",
          dataIndex: "main",
          key: "main",
          render: (text) => {
            return text ? "是" : "否";
          },
        },
        {
          title: "项目负责人",
          dataIndex: "receiverName",
          key: "receiverName",
        },
        {
          title: "项目说明",
          dataIndex: "taskComment",
          key: "taskComment",
          render: (text) => {
            return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
          },
        },
        {
          title: "操作",
          dataIndex: "ABC",
          key: "ABC",
          render: (text, record) => {
            return (
              <div>
                <Button
                  onClick={(e) => {
                    e.stopPropagation();
                    this.showConfirm(this.changeDeletePro, record);
                  }}
                  disabled={this.state.listFlag}
                  style={{
                    display: this.state.displayList ? "none" : "block",
                  }}
                >
                  删除
                </Button>
              </div>
            );
          },
        },
      ],
    };
    this.departmentList = this.departmentList.bind(this);
    this.changeApply = this.changeApply.bind(this);
    this.getVoucherUrl = this.getVoucherUrl.bind(this);
    this.proList = this.proList.bind(this);
    this.cuiList = this.cuiList.bind(this);
    this.showConfirm = this.showConfirm.bind(this);
    this.showConfirmChange = this.showConfirmChange.bind(this);
    this.changeAddPro = this.changeAddPro.bind(this);
    this.changeProSubmit = this.changeProSubmit.bind(this);
    this.changeDeletePro = this.changeDeletePro.bind(this);
    this.changeAddCui = this.changeAddCui.bind(this);
    this.changeDeleteCui = this.changeDeleteCui.bind(this);
    this.changeSaveCui = this.changeSaveCui.bind(this);
    this.submitChange = this.submitChange.bind(this);
    this.editCui = this.editCui.bind(this);
    this.editPro = this.editPro.bind(this);
    this.submitEditCui = this.submitEditCui.bind(this);
    this.submitEditPro = this.submitEditPro.bind(this);
    this.nextCancel = this.nextCancel.bind(this);
    this.customerChange = this.customerChange.bind(this);
    this.selectAuto = this.selectAuto.bind(this);
    this.supervisor = this.supervisor.bind(this);
    this.httpChange = this.httpChange.bind(this);
    this.showRes = this.showRes.bind(this);
    this.resCancel = this.resCancel.bind(this);
    this.deleteChange = this.deleteChange.bind(this);
    this.not = this.not.bind(this);
  }

  componentDidMount() {
  }
  nextCancel() {
    this.setState({
      addnextVisible: false,
      changeVisible: false
    });
  }

  showConfirm(fn, record) {
    confirm({
      title: "确定删除此项目吗?",
      content: (
        <span style={{ color: "red" }}>
          删除后会将该项目下的所有催款节点自动清除!!!
        </span>
      ),
      onOk() {
        fn(record);
      },
      onCancel() { }
    });
  }
  showConfirmChange(fn, record) {
    confirm({
      title: "确定取消本次变更吗?",
      content: (
        <span style={{ color: "red" }}>
          取消后本次变更将作废!!!
        </span>
      ),
      onOk() {
        fn();
      },
      onCancel() { }
    });
  }

  //服务值改变时请求客户名称
  httpChange(e) {
    this.state.gid = "";
    if (e.length >= 1) {
      this.supervisor(e, false);
    }
    this.setState({
      commodityName: e
    });
  }

  //客户名称自动补全
  customerChange(e) {
    if (this.state.customType) {
      this.state.autoId = "";
      if (e.length >= 2) {
        this.supervisor(e, true);
      }
      this.setState({
        customerName: e
      });
    } else {
      this.setState({
        customerName: ""
      });
      message.warning("客户所属类型必须指定");
    }
  }

  //上级主管输入框失去焦点是判断客户是否存在
  selectAuto(value) {
    let kid = [];
    let fwList = this.state.customerArr;
    fwList.map(function (item) {
      if (value == item.bname) {
        kid = item;
      }
    });
    this.setState({
      commodityName: value,
      gid: kid.id,
      //commodityPrice:kid.price==0?kid.price.toString():kid.price,
      commodityFirstPayment:
        kid.firstPayment == 0 ? kid.firstPayment.toString() : kid.firstPayment
    });
  }

  //加载(自动补全)
  supervisor(e, state) {
    //客户名称与服务名称自动补全
    let api = state
      ? "/api/admin/customer/getCustomerByName"
      : "/api/admin/order/getBusinessProjectByName";
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: state
        ? {
          name: e,
          type: this.state.customType
        }
        : {
          businessName: e
        },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          states: state,
          customerArr: thedata
        });
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  //变更申请
  changeApply() {
    if (moneyVerify(this.state.data.totalAmount)) {
      return false;
    }
    if (moneyVerify(this.state.data.changeAmount)) {
      return false;
    }
    if (
      this.state.data.type == 0 ||
      this.state.data.type == 1 ||
      this.state.data.type == 3
    ) {
      if (this.state.data.settlementAmount < this.state.data.changeAmount) {
        message.warning("退款金额大于已收款金额");
        return;
      }
    }
    this.setState({
      loading: true
    })
    let theorgCodeUrl = [];
    if (this.state.voucherUrl.length) {
      let picArr = [];
      this.state.voucherUrl.map(function (item) {
        if (item.response && item.response.data && item.response.data.length) {
          picArr.push(item.response.data);
        }
      });
      theorgCodeUrl = picArr.join(",");
    }
    Object.assign(this.state.data, {
      id: this.props.orderData.id, //订单编号
      changeType: 0,
      voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : "",
      consultantExamine: [],
      managerExamine: []
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/updateOrderChange",
      data: this.state.data
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("变更成功!");
          this.props.onCancel();
          this.setState({
            loading: false
          });
        } else {
          message.warning(data.error[0].message);
          this.setState({
            loading: false
          });
        }
      }.bind(this)
    );
  }

  // componentDidMount() {
  //   window.setTimeout(() => {
  //     this.loadDataChange();
  //   }, 10);
  // }

  // loadDataChange() {
  //   console.log(this.props);

  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + "/api/admin/orderChange/orderChangeLogList",
  //     data: {
  //       changeId: this.props.data.id
  //     },
  //     success: function(data) {
  //       if (data.error.length || data.data.list == "") {
  //         if (data.error && data.error.length) {
  //           message.warning(data.error[0].message);
  //         }
  //       } else {
  //         this.setState({
  //           dataSource: data.data
  //         });
  //       }
  //     }.bind(this)
  //   });
  // }

   // 拆分详细
  showRes(record) {
    this.setState({
      resVisible: true,
      resRecord: record
    })
  }
  resCancel() {
    this.setState({
      resVisible: false
    })
  }

  cuiList(id) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/selectChangeDun",
      data: {
        id: id || this.state.data.id
      },
      success: function (data) {
        this.setState({
          cuiDataSource: data.data,
          loading: false,
        });
        if (data.data && data.data.length) {
          if (id) {
            this.setState({
              listCuiFlag: true,
            });
          }
          this.setState({
            cuiDataSource: data.data,
          });
          this.setState({
            loading: false,
          });
        } else if (data.error && data.error.length) {
          message.warning(data.error[0].message);
          this.setState({
            loading: false,
          });
        }
      }.bind(this)
    });
  }
  proList(id) {
    this.setState({
      loading: true
    })
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/selectChangeTask",
      data: {
        id: id || this.state.data.id
      },
      success: function (data) {
        this.setState({
          loading:false
        })
        if (data.data && data.data.length) {
          if (id) {
            this.setState({
              listFlag: true
            });
          }
          data.data.forEach(item => {
            item.key = item.id
          })
          this.setState({
            proDataSource: data.data
          });
          this.setState({
            loading: false,
          });
        }else if(data.error && data.error.length) {
          message.warning(data.error[0].message)
          this.setState({
            loading: false,
          });
        }
      }.bind(this)
    });
  }

  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    });
  }

  getVoucherUrl(e) {
    this.setState({
      voucherUrl: e
    });
  }

  changeAddPro() {
    this.setState({
      changeVisible: true,
      gid: "",
      customerArr: [],
      commodityName: "",
      commodityQuantity: "",
      commodityId: "",
      taskComment: "",
      main: undefined,
      commodityPrice: ""
    });
  }
  changeProSubmit() {
    if (this.state.gid == undefined || !this.state.gid) {
      message.warning("服务名称不匹配!");
      return false;
    }
    if (!this.state.commodityPrice) {
      message.warning("请输入金额!");
      this.refs.commodityPrice.focus();
      return false;
    }
    let reg = /^([0]|[1-9][0-9]*)$/;
    if (
      !this.state.commodityQuantity ||
      !reg.test(this.state.commodityQuantity)
    ) {
      message.warning("请输入正确商品数量!");
      this.refs.commodityQuantity.focus();
      return false;
    }
    if (!this.state.main) {
      message.warning("请选择是否为主要项目!");
      this.refs.commodityQuantity.focus();
      return false;
    }
    this.setState({
      loading: true
    });
    let type = 0;
    if (this.state.typeChange == 4 || this.state.typeChange == 5) {
      type = 1;
    }
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/addChangeTask",
      data: {
        commodityId: this.state.gid, //商品ID
        orderNo: this.state.data.orderNo, //订单编号
        commodityName: this.state.commodityName, //商品名称
        commodityQuantity: this.state.commodityQuantity, //商品数量
        commodityPrice: this.state.commodityPrice, //签单总价
        taskComment: this.state.taskComment, //服务说明
        main: this.state.main, //是否为主要项目
        cid: this.state.data.id, //变更ID
        type
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("保存成功");
          this.nextCancel();
          this.proList();
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }
  changeDeletePro(record) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/updateChangeTask",
      data: {
        id: record.id,
        type: 3,
        tid: record.tid,
        splitStatus: record.splitStatus
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("删除成功");
          this.proList();
          this.cuiList();
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }
  //点击新增变更催款节点
  changeAddCui() {
    this.state.cuiDataSource.push({
      key: this.state.cuiDataSource.length,
      money: "",
      dunSubject: undefined,
      orderNo: this.state.data.orderNo,
      dunTarget: this.state.kehuId
    });
    this.setState({
      cuiDataSource: this.state.cuiDataSource,
      cuiFlag: true
    });
  }
  //删除变更收款节点
  changeDeleteCui(index) {
    if (index.id) {
      this.state.cuiDataSource.splice(index.id, 1);
      this.setState({
        contactListNew: this.state.cuiDataSource,
        cuiFlag: false,
        addFlag: false,
        boFlag: false
      });
      $.ajax({
        url: globalConfig.context + "/api/admin/orderChange/updateChangeDun",
        method: "post",
        data: {
          id: index.id,
          type: 3,
          tid: index.tid,
          did: index.did
        }
      }).done(
        function (data) {
          this.setState({
            loading: false
          });
          if (!data.error.length) {
            message.success("删除成功!");
            this.setState({
              cuiFlag: false
            });
            this.cuiList();
          } else {
            message.warning(data.error[0].message);
          }
        }.bind(this)
      );
    } else {
      this.state.cuiDataSource.splice(index.key, 1);
      this.setState({
        cuiDataSource: this.state.cuiDataSource,
        cuiFlag: false,
        addFlag: false,
        boFlag: false
      });
    }
  }
  changeSaveCui(record) {

    if (record.boStatus == "false") {
      record.boStatus = false;
    } else if (record.boStatus == "true") {
      record.boStatus = true;
    }
    if (!this.state.yearFlag) {
      if (!record.effectiveCount) {
        message.warning("请选择服务年限");
        return;
      }
    } else {
      record.effectiveCount = "";
    }
    if (record.money == "") {
      message.warning("请填写金额");
      return;
    }
    if (record.boStatus) {
      if (
        typeof +record.money == "number" &&
        +record.money >= 0 &&
        +record.money <= 1
      ) {
        record.appropriationRatio = record.money;
      } else {
        message.warning("金额比例填写错误,比例范围0~1");
        return;
      }
    }
    if (!record.dunType && record.dunType != 0) {
      message.warning("请选择对应科目");
      return;
    }
    if (record.dunType != 1) {
      record.waitDay = "";
    }
    this.setState({
      loading: true
    });
    if (record.boStatus) {
      $.ajax({
        url: globalConfig.context + "/api/admin/orderChange/addChangeDun",
        method: "post",
        data: {
          orderNo: record.orderNo,
          ctid: record.ctid,
          projectType: record.sort,
          dunType: record.dunType,
          appropriationRatio: record.appropriationRatio,
          waitDay: record.waitDay,
          effectiveCount: record.effectiveCount,
          cid: this.state.data.id, //变更ID
          ustomizeTimes:
              record.dunType == 0 ? record.customizeTimes : undefined,
            customizeName:
              record.dunType == 0 ? record.customizeName : undefined,
        }
      }).done(
        function (data) {
          this.setState({
            loading: false,
          });
          if (!data.error.length) {
            message.success("保存成功!");
            this.setState({
              cuiFlag: false,
              boFlag: false,
              addFlag: false,
            });
            this.cuiList();
          } else {
            message.warning(data.error[0].message);
          }
        }.bind(this)
      );
    } else {
      $.ajax({
        url: globalConfig.context + "/api/admin/orderChange/addChangeDun",
        method: "post",
        data: {
          orderNo: record.orderNo,
          ctid: record.ctid,
          projectType: record.sort,
          dunType: record.dunType,
          money: record.money,
          waitDay: record.waitDay,
          effectiveCount: record.effectiveCount,
          cid: this.state.data.id, //变更ID
            customizeTimes:
              record.dunType == 0 ? record.customizeTimes : undefined,
            customizeName:
              record.dunType == 0 ? record.customizeName : undefined,
        }
      }).done(
        function (data) {
          this.setState({
            loading: false,
          });
          if (!data.error.length) {
            message.success("保存成功!");
            this.setState({
              cuiFlag: false,
              boFlag: false,
              addFlag: false,
            });
            this.cuiList();
          } else {
            message.warning(data.error[0].message);
          }
        }.bind(this)
      );
    }
  }
  submitChange() {
    if (
      this.state.typeChange == undefined ||
      (this.state.typeChange == "" && this.state.typeChange != 0)
    ) {
      message.warning("请选择变更类型");
      return false;
    }
     if (
       this.state.typeChange == 0 ||
       this.state.typeChange == 1 ||
       this.state.typeChange == 3
     ) {
       if (this.state.settlementAmount < this.state.changeAmount) {
         message.warning("退款金额大于已收款金额");
         return;
       }
     }
    if (this.state.processStatus != 5 || this.state.processStatus != 6) {
      message.warning("当前订单流程不能发起变更!");
      return false;
    }
    if (this.state.changeAmount === "") {
      message.warning("申请退款金额不能为空!");
      return false;
    }
    if (this.state.remarksC.trim() == "") {
      message.warning("请正确填写变更原因");
      return false;
    }
    if (this.state.startRemarks.trim() == "") {
      message.warning("请正确填写备注信息");
      return false;
    }
    let theorgCodeUrl = [];
    if (this.state.voucherUrl.length) {
      let picArr = [];
      this.state.voucherUrl.map(function (item) {
        if (item.response && item.response.data && item.response.data.length) {
          picArr.push(item.response.data);
        }
      });
      theorgCodeUrl = picArr.join(",");
    }
    this.setState({
      loading: true
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/orderChange/updateOrderChange",
      method: "post",
      data: {
        id: this.state.changeId,
        changeType: 0,
        orderNo: this.state.orderNo, //订单编号
        processState: 0,
        startRemarks: this.state.startRemarks,
        remarks: this.state.remarksC,
        voucherUrl: theorgCodeUrl.length ? theorgCodeUrl : "",
        totalAmount: this.state.totalAmount,
        settlementAmount: this.state.settlementAmount,
        changeAmount: this.state.changeAmount,
        applicant: this.state.salesmanName,
        depName: this.state.depName,
        type: this.state.typeChange
      }
    }).done(
      function (data) {
        if (!data.error.length) {
          this.setState({
            loading: false
          });
          message.success("发起变更成功");
          this.handleCancelclose();
        } else {
          message.warning(data.error[0].message);
          this.setState({
            loading: false
          });
        }
      }.bind(this)
    );
  }
  editCui(record) {
    this.setState({
      editCuiVisible: true,
      editCuiMoney: record.money,
      editCuiTid: record.tid,
      editCuiId: record.id
    });
  }
  editPro(record) {
    this.setState({
      editProVisible: true,
      editSplitStatus: record.splitStatus,
      editProMoney: record.commodityPrice,
      editProCommodityQuantity: record.commodityQuantity,
      editProTid: record.tid,
      editProId: record.id
    });
  }
  submitEditCui() {
    this.setState({
      loading: true
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/orderChange/updateChangeDun",
      method: "post",
      data: {
        id: this.state.editCuiId,
        type: this.state.editCuiTid ? 2 : 1,
        money: this.state.editCuiMoney,
        tid: this.state.editCuiTid,
      }
    }).done(
      function (data) {
        this.setState({
          loading: false
        });
        if (!data.error.length) {
          message.success("修改成功!");
          this.cuiList();
          this.proList()
          this.setState({
            editCuiVisible: false
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }
  submitEditPro() {
    this.setState({
      loading: true
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/orderChange/updateChangeTask",
      method: "post",
      data: {
        id: this.state.editProId,
        type: this.state.editProTid ? 2 : 1,
        commodityPrice: this.state.editProMoney,
        commodityQuantity: this.state.editProCommodityQuantity,
        tid: this.state.editProTid
      }
    }).done(
      function (data) {
        this.setState({
          loading: false
        });
        if (!data.error.length) {
          message.success("修改成功!");
          this.proList();
          this.cuiList()
          this.setState({
            editProVisible: false
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }
  componentWillMount() {
    this.departmentList();

    this.state.data = this.props.orderData;
    this.state.data.oldPrice = this.props.orderData.totalAmount;
    this.setState({
      data: this.state.data,
      voucherUrl: this.props.voucherUrl
    });

    this.proList();
    this.cuiList();
    let e = this.props.orderData.type;
    if (e == 1) {
      this.setState({
        hetongFlag: false,
        listFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: false,
        displayList: false
      });
    } else if (e == 2) {
      this.setState({
        hetongFlag: true,
        listFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: true,
        displayList: false
      });
    } else if (e == 3) {
      this.setState({
        listFlag: false,
        hetongFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: false,
        displayList: true
      });
    } else if (e == 4) {
      this.setState({
        listFlag: false,
        listCuiFlag: false,
        hetongFlag: false,
        tuiKuanFlag: true,
        displayList: false
      });
    } else if (e == 5) {
      this.setState({
        listFlag: false,
        listCuiFlag: false,
        hetongFlag: true,
        tuiKuanFlag: true,
        displayList: false
      });
    } else {
      this.setState({
        listFlag: true,
        hetongFlag: true,
        listCuiFlag: true,
        tuiKuanFlag: false,
        displayList: false
      });
    }
  }
  componentWillReceiveProps(nextProps) {
      
    this.state.data = nextProps.orderData;
    this.state.data.oldPrice = nextProps.orderData.totalAmount;
    this.setState({
      data: this.state.data,
      voucherUrl: nextProps.voucherUrl
    });

    this.proList();
    this.cuiList();
    let e = nextProps.orderData.type;
    if (e == 1) {
      this.setState({
        hetongFlag: false,
        listFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: false,
        displayList: false
      });
    } else if (e == 2) {
      this.setState({
        hetongFlag: true,
        listFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: true,
        displayList: false
      });
    } else if (e == 3) {
      this.setState({
        listFlag: false,
        hetongFlag: false,
        listCuiFlag: false,
        tuiKuanFlag: false,
        displayList: true
      });
    } else if (e == 4) {
      this.setState({
        listFlag: false,
        listCuiFlag: false,
        hetongFlag: false,
        tuiKuanFlag: true,
        displayList: false
      });
    } else if (e == 5) {
      this.setState({
        listFlag: false,
        listCuiFlag: false,
        hetongFlag: true,
        tuiKuanFlag: true,
        displayList: false
      });
    } else {
      this.setState({
        listFlag: true,
        hetongFlag: true,
        listCuiFlag: true,
        tuiKuanFlag: false,
        displayList: false
      });
    }
    // }
  }

  // componentWillMount() {
  //   this.departmentList();
  // }
  not() {

  }
  deleteChange() {
    this.setState({
      loading: true,
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/orderChange/cancelOrderChange",
      method: "post",
      data: {
        id: this.state.data.id,
        status: this.state.data.status,
        processState: this.state.data.processState,
        orderNo: this.state.data.orderNo
      },
    }).done(
      function (data) {
        this.setState({
          loading: false,
        });
        if (!data.error.length) {
          message.success("取消成功!");
          this.props.onCancel()
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  render() {
    const expandedRowRender = e => {
      const data = e.list;
      data.forEach((item) => {
        item.key = item.id
      })
      
      let columns = [];
      if (e.list instanceof Array && e.list.length) {
        columns = [
          {
            title: "变更状态",
            dataIndex: "type",
            key: "type",
            render: (text, record) => {
              let str = "";
              let color = "";
              if (text == 1) {
                str = "增";
                color = "#87d068";
              } else if (text == 2) {
                str = "改";
                color = "#108ee9";
              } else if (text == 3) {
                str = "删";
                color = "#f50";
              }
              return (
                <span>
                  <Tag
                    color={color}
                    style={{ display: text == 0 ? "none" : "inline-block" }}
                  >
                    {str}
                  </Tag>
                  {record.splitStatus == 1 ? (
                    <Tag
                      color="#108ee9"
                      // onClick={e => {
                      //   e.stopPropagation();
                      //   this.showRes(record);
                      // }}
                    >
                      父项目
                    </Tag>
                  ) : (
                    ""
                  )}
                  {record.splitStatus == 2 ? (
                    <Tag
                      color="#108ee9"
                      // onClick={e => {
                      //   e.stopPropagation();
                      //   this.showRes(record);
                      // }}
                    >
                      子项目
                    </Tag>
                  ) : (
                    ""
                  )}
                </span>
              );
            },
          },
          {
            title: "业务项目名称",
            dataIndex: "commodityName",
            key: "commodityName",
            render: (text, record) => {
              return text + "-" + record.id;
            },
          },
          {
            title: "项目类别",
            dataIndex: "cname",
            key: "cname",
          },
          {
            title: "项目数量",
            dataIndex: "commodityQuantity",
            key: "commodityQuantity",
          },
          {
            title: "金额(万元)",
            dataIndex: "commodityPrice",
            key: "commodityPrice",
            render: (text, record) => {
              if (record.splitStatus == 2) {
                return "/";
              } else {
                return text;
              }
            },
          },
          {
            title: "主要项目",
            dataIndex: "main",
            key: "main",
            render: (text) => {
              return text ? "是" : "否";
            },
          },
          {
            title: "项目负责人",
            dataIndex: "receiverName",
            key: "receiverName",
          },
          {
            title: "项目说明",
            dataIndex: "taskComment",
            key: "taskComment",
            render: (text) => {
              return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
            },
          },
          {
            title: "操作",
            dataIndex: "ABC",
            key: "ABC",
            render: (text, record) => {
              return (
                <div>
                  <Button
                    onClick={(e) => {
                      e.stopPropagation();
                      this.showConfirm(this.changeDeletePro, record);
                    }}
                    disabled={this.state.listFlag}
                    style={{
                      display: this.state.displayList ? "none" : "block",
                    }}
                  >
                    删除
                  </Button>
                </div>
              );
            },
          },
        ];
        return (
          <Table
            columns={columns}
            dataSource={data}
            scroll={{ x: "max-content", y: 0 }}
            pagination={false}
            onRowDoubleClick={this.state.listFlag ? this.not : this.editPro}
          />
        );
      } else {
        columns = [];
        return (
          <p style={{ fontWeight: "bold", color: "red", textAlign: "center" }}>
            此项目暂未拆分
          </p>
        );
      }
    };
    const { TextArea } = Input;
    const data = this.state.data;
    // let departmentArr = this.state.departmentArr || [];
    const dataSources = this.state.customerArr || [];
    const cuiDataList = this.state.contactList || [];
    let departmentArr = this.state.departmentArr || [];
    const options = this.state.states
      ? dataSources.map(group => (
        <Select.Option key={group.id} value={group.name}>
          {group.name}
        </Select.Option>
      ))
      : dataSources.map((group, index) => (
        <Select.Option key={index} value={group.bname}>
          {group.bname}
        </Select.Option>
      ));
    return (
      <div>
        <Spin spinning={this.state.loading}>
          {this.state.resVisible ? (
            <ResolutionDetail
              cancel={this.resCancel}
              detail={this.state.resRecord}
              visible={this.state.resVisible}
              id={this.state.resRecord.orderNo}
            />
          ) : (
            ""
          )}
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="客户名称"
            >
              <span>{data.userName}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="合同编号"
            >
              <span>{data.contractNo}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="申请变更部门"
            >
              <span>{this.state.data.depName}</span>
            </FormItem>
            <FormItem className="half-item" {...formItemLayout} label="申请人">
              {/* <Input
              placeholder="请输入申请人"
              ref="signTotalAmount"
              value={data.applicant}
              onChange={e => {
                let data = this.state.data;
                data.applicant = e.target.value;
                this.setState({ data });
              }}
              style={{ width: "240px" }}
            /> */}
              <span>{data.applicant}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="变更类型"
            >
              <Select
                placeholder="选择合同变更类型"
                style={{ width: 200 }}
                disabled={this.state.changeFlag}
                onChange={(e) => {
                  let data = this.state.data;
                  data.type = e;
                  this.setState({ data, changeFlag: true });
                  if (e == 1) {
                    this.setState({
                      hetongFlag: false,
                      listFlag: false,
                      listCuiFlag: false,
                      tuiKuanFlag: false,
                      displayList: false,
                    });
                  } else if (e == 2) {
                    this.setState({
                      hetongFlag: true,
                      listFlag: false,
                      listCuiFlag: false,
                      tuiKuanFlag: true,
                      displayList: false,
                    });
                  } else if (e == 3) {
                    this.setState({
                      listFlag: false,
                      hetongFlag: false,
                      listCuiFlag: false,
                      tuiKuanFlag: false,
                      displayList: true,
                    });
                  } else if (e == 4) {
                    this.setState({
                      listFlag: false,
                      listCuiFlag: false,
                      hetongFlag: false,
                      tuiKuanFlag: true,
                      displayList: false,
                    });
                  } else if (e == 5) {
                    this.setState({
                      listFlag: false,
                      listCuiFlag: false,
                      hetongFlag: true,
                      tuiKuanFlag: true,
                      displayList: false,
                    });
                  } else {
                    this.setState({
                      listFlag: true,
                      hetongFlag: true,
                      listCuiFlag: true,
                      tuiKuanFlag: false,
                      displayList: false,
                    });
                  }
                }}
                value={data.type}
              >
                <Option value={0}>退单退款</Option>
                <Option value={1}>项目及金额变更</Option>
                <Option value={2}>仅项目变更</Option>
                <Option value={3}>仅金额变更</Option>
                <Option value={4}>重报</Option>
                <Option value={5}>赠送</Option>
              </Select>
              <Button
                style={{ marginLeft: 10 }}
                onClick={(e) => {
                  this.state.data.startRemarks = "";
                  this.state.data.remarks = "";
                  this.state.data.changeAmount = "0";
                  this.state.data.depNameChange = undefined;
                  this.state.data.typeChange = undefined;
                  this.state.data.totalAmount = this.state.data.oldPrice;
                  this.setState({
                    listFlag: false,
                    hetongFlag: false,
                    listCuiFlag: false,
                    tuiKuanFlag: false,
                    displayList: false,
                    startRemarks: "",
                    data: this.state.data,
                    changeFlag: false,
                    voucherUrl: [],
                    // changeAmount: "0",
                    // applicant: undefined,
                    // depNameChange: undefined,
                    // typeChange: [],
                    // changeFlag: false
                  });
                }}
              >
                重置
              </Button>
              {this.state.data.status == 3 ? (
                <Button
                  type="danger"
                  style={{
                    float: "right",
                    backgroundColor: "red",
                    color: "white",
                    position: "absolute",
                    right: 0,
                    height: 50,
                    borderRadius: 20,
                  }}
                  onClick={(e) => {
                    e.stopPropagation();
                    this.showConfirmChange(this.deleteChange);
                  }}
                >
                  取消本次变更
                </Button>
              ) : (
                ""
              )}
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="合同额(万元)"
            >
              <Input
                placeholder="请输入合同额"
                ref="signTotalAmount"
                disabled={this.state.hetongFlag}
                value={data.totalAmount}
                onChange={(e) => {
                  let data = this.state.data;
                  data.totalAmount = e.target.value;
                  this.setState({ data });
                }}
                style={{ width: "240px" }}
              />
            </FormItem>
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="已收款(万元)"
            >
              {/* <Input
              placeholder="请输入已收款"
              ref="signTotalAmount"
              value={data.settlementAmount}
              onChange={e => {
                let data = this.state.data;
                data.settlementAmount = e.target.value;
                this.setState({ data });
              }}
              style={{ width: "240px" }}
            /> */}
              <span>
                {this.state.data.settlementAmount}&nbsp;&nbsp;&nbsp;&nbsp;
                <span style={{ color: "red" }}>
                  (注:已收款与现实收款不符,请与财务专员联系)
                </span>
              </span>
            </FormItem>
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="申请退款(万元)"
            >
              <Input
                placeholder="请输入申请退款"
                ref="signTotalAmount"
                disabled={this.state.tuiKuanFlag}
                value={data.changeAmount}
                onChange={(e) => {
                  let data = this.state.data;
                  data.changeAmount = e.target.value;
                  this.setState({ data });
                }}
                style={{ width: "240px" }}
              />
            </FormItem>
          </div>
          <div>
            <div>
              <span
                style={{
                  marginLeft: "50px",
                  fontSize: "20px",
                }}
              >
                项目业务
              </span>
              <span style={{ color: "red" }}>
                (注:项目删除后,此项目的全部节点、全部工时,全部被删除,请谨慎删除!双击可修改对应金额数量!)
              </span>
              <Button
                type="primary"
                onClick={this.changeAddPro}
                disabled={this.state.listFlag}
                style={{
                  float: "right",
                  marginRight: "50px",
                  marginBottom: "15px",
                  display: this.state.displayList ? "none" : "block",
                }}
              >
                添加项目明细
              </Button>
            </div>
            <div className="patent-table" style={{ marginBottom: 10 }}>
              {/* <Spin spinning={this.state.loading}> */}
              <Table
                columns={this.state.proColumns}
                dataSource={this.state.proDataSource}
                scroll={{ x: "max-content", y: 0 }}
                expandedRowRender={expandedRowRender}
                pagination={false}
                onRowDoubleClick={this.state.listFlag ? this.not : this.editPro}
                bordered
                size="small"
              />
              {/* </Spin> */}
            </div>
            <div>
              <span
                style={{
                  marginLeft: "50px",
                  fontSize: "20px",
                }}
              >
                催款节点
              </span>
              <span style={{ color: "red" }}>
                (注:节点删除后,无论节点是否触发,均会删除,请谨慎删除!双击可修改对应金额!)
              </span>
              <Button
                type="primary"
                onClick={(e) => {
                  this.changeAddCui();
                }}
                disabled={this.state.listCuiFlag}
                style={{
                  float: "right",
                  marginRight: "50px",
                  marginBottom: "15px",
                  display: this.state.displayList ? "none" : "block",
                }}
              >
                添加催款节点
              </Button>
            </div>
            <div className="clearfix">
              {/* <Spin spinning={this.state.loading}> */}
              <Form layout="horizontal">
                <Table
                  pagination={false}
                  columns={this.state.changeCuiList}
                  dataSource={this.state.cuiDataSource}
                  scroll={{ x: "max-content", y: 0 }}
                  onRowDoubleClick={
                    this.state.listCuiFlag ? this.not : this.editCui
                  }
                  bordered
                  size="small"
                />
                <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
              </Form>
              {/* </Spin> */}
            </div>
          </div>
          <div className="clearfix">
            <FormItem
              style={{ height: "auto" }}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="变更原因"
            >
              <TextArea
                rows={4}
                placeholder="因企业政府补助费用与营销员签单承诺费用不一"
                ref="signTotalAmount"
                style={{ width: "95%" }}
                value={data.remarks}
                onChange={(e) => {
                  let data = this.state.data;
                  data.remarks = e.target.value;
                  this.setState({ data });
                }}
              />
            </FormItem>
          </div>

          {/* 备注 */}
          <div className="clearfix">
            <FormItem
              style={{ height: "auto" }}
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="备注"
            >
              <TextArea
                rows={4}
                placeholder="请输入备注信息"
                ref="signTotalAmount"
                style={{ width: "95%" }}
                value={data.startRemarks}
                onChange={(e) => {
                  let data = this.state.data;
                  data.startRemarks = e.target.value;
                  this.setState({ data });
                }}
              />
            </FormItem>
          </div>

          <div className="clearfix">
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 18 }}
              label="变更凭证"
            >
              <PicturesWall
                fileList={this.getVoucherUrl}
                pictureUrl={this.state.voucherUrl}
                url="/api/admin/orderChange/uploadFile"
                sign="order_change_file"
              />
              <Rizhi changeId={data.id} />
              <p>图片建议:要清晰。</p>
            </FormItem>
          </div>

          {/* <ul
          style={{
            width: "868px",
            overflow: "hidden",
            paddingLeft: "90px",
            marginBottom: "20px"
          }}
        >
          {this.state.dataSource.map((item, index) => (
            <li
              key={index}
              style={{
                width: "100%",
                height: "auto",
                wordBreak: "break-all",
                color: "black",
                marginBottom: "10px"
              }}
            >{`${item.aname}: ${item.remarks}`}</li>
          ))}
        </ul> */}

          <div className="clearfix">
            <Button
              type="primary"
              style={{ float: "right", marginRight: 40 }}
              onClick={this.changeApply}
            >
              发起变更申请
            </Button>
          </div>
          <Modal
            title="修改项目金额及数量"
            visible={this.state.editProVisible}
            onOk={this.submitEditPro}
            width={300}
            okText={"保存"}
            onCancel={() => {
              this.setState({
                editProVisible: false,
              });
            }}
          >
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                label="项目金额"
                style={{
                  display: this.state.editSplitStatus == 2 ? "none" : "block",
                }}
              >
                <Input
                  placeholder="请输入金额"
                  rows={4}
                  value={this.state.editProMoney}
                  onChange={(e) => {
                    this.setState({ editProMoney: e.target.value });
                  }}
                />
              </FormItem>
              <FormItem
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                label="项目数量"
              >
                <Input
                  placeholder="请输入数量"
                  rows={4}
                  value={this.state.editProCommodityQuantity}
                  onChange={(e) => {
                    this.setState({ editProCommodityQuantity: e.target.value });
                  }}
                />
              </FormItem>
            </div>
          </Modal>
          <Modal
            title="修改催款节点金额"
            visible={this.state.editCuiVisible}
            onOk={this.submitEditCui}
            okText={"保存"}
            width={300}
            onCancel={(e) => {
              this.setState({
                editCuiVisible: false,
              });
            }}
          >
            <div className="clearfix">
              <FormItem
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 14 }}
                label="催款金额"
              >
                <Input
                  placeholder="请输入金额"
                  rows={4}
                  value={this.state.editCuiMoney}
                  onChange={(e) => {
                    this.setState({ editCuiMoney: e.target.value });
                  }}
                />
              </FormItem>
            </div>
          </Modal>
          <Modal
            maskClosable={false}
            visible={this.state.changeVisible}
            onOk={this.nextCancel}
            onCancel={this.nextCancel}
            width="800px"
            title={"添加变更项目"}
            footer=""
            className="admin-desc-content"
          >
            <Form
              layout="horizontal"
              // id="demand-form"
            >
              {/* <Spin spinning={this.state.loading}> */}
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="服务名称"
                >
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    dropdownStyle={{ width: 200 }}
                    style={{ width: "200px" }}
                    dataSource={options}
                    placeholder="输入服务名称"
                    value={this.state.commodityName}
                    onChange={this.httpChange}
                    filterOption={true}
                    onSelect={this.selectAuto}
                  >
                    <Input />
                  </AutoComplete>
                  <span className="mandatory">*</span>
                </FormItem>

                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="服务数量"
                >
                  <Input
                    placeholder="请输入服务数量"
                    value={this.state.commodityQuantity}
                    style={{ width: "200px" }}
                    onChange={(e) => {
                      this.setState({ commodityQuantity: e.target.value });
                    }}
                    ref="commodityQuantity"
                  />
                  <span className="mandatory">*</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="实签价格(万元)"
                >
                  <Input
                    placeholder="请输入实签价格"
                    value={this.state.commodityPrice}
                    style={{ width: "200px" }}
                    onChange={(e) => {
                      this.setState({ commodityPrice: e.target.value });
                    }}
                    ref="commodityPrice"
                  />
                  <span className="mandatory">*</span>
                </FormItem>
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  label="主要业务"
                >
                  <Select
                    placeholder="选择是否为主要业务"
                    style={{ width: "200px" }}
                    value={this.state.main}
                    onChange={(e) => {
                      this.setState({ main: e });
                    }}
                  >
                    {boutique.map(function (item) {
                      return (
                        <Select.Option key={item.value}>
                          {item.key}
                        </Select.Option>
                      );
                    })}
                  </Select>
                  <span className="mandatory">*</span>
                </FormItem>
                <div className="clearfix">
                  <FormItem
                    labelCol={{ span: 4 }}
                    wrapperCol={{ span: 16 }}
                    label="服务说明"
                  >
                    <Input
                      type="textarea"
                      placeholder="请输入服务说明"
                      value={this.state.taskComment}
                      onChange={(e) => {
                        this.setState({ taskComment: e.target.value });
                      }}
                    />
                  </FormItem>
                </div>
                <FormItem
                  wrapperCol={{ span: 12, offset: 4 }}
                  className="half-middle"
                >
                  <Button
                    className="submitSave"
                    type="primary"
                    onClick={this.changeProSubmit}
                  >
                    保存
                  </Button>
                  <Button
                    className="submitSave"
                    type="ghost"
                    onClick={this.nextCancel}
                  >
                    取消
                  </Button>
                </FormItem>
              </div>
              {/* </Spin> */}
            </Form>
          </Modal>
        </Spin>
      </div>
    );
  }
}

export default ChangeApply;