import React, { Component } from "react";
import {
  Form,
  Upload,
  Modal,
  Input,
  DatePicker,
  Button,
  message,
  Select,
  Table,
  Popconfirm,
  Spin
} from "antd";
import AgreeButton from "./agreeButton.js";
import Rizhi from "./rizhi.js";
import PicturesWall from "./picturesWall";
import moment from "moment";
import { getProcessStatusNew, moneyVerify } from "@/tools.js";
import { shenghePeo, changeColor } from "@/tools.js";
import $ from "jquery/src/ajax";
import ReactToPrint from "react-to-print";
import tongguo from "../../../../../../image/tongguo.png";
import quxiao from "../../../../../../image/quxiao.png";
import ProAndCuiList from "./proAndCuiList.jsx";
import Refund from "./refund.js"
import "./xButton.less"
import ImgList from "../../../../common/imgList";


const { RangePicker } = DatePicker;
const { TextArea } = Input;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};
const formItemLayoutRefund = {
  labelCol: { span: 5 },
  wrapperCol: { span: 11 }
};

const changeType = [
  {
    value: "0",
    key: "退单退款"
  },
  {
    value: "1",
    key: "项目及金额变更"
  },
  {
    value: "2",
    key: "仅项目变更"
  },
  {
    value: "3",
    key: "仅金额变更"
  },
  {
    value: "4",
    key: "重报"
  },
  {
    value: "5",
    key: "赠送"
  }
];

const getChangeType = function (e) {
  if (e || e == 0) {
    let str = e.toString();
    let theType = "";
    changeType.map(function (item) {
      if (item.value == str) {
        theType = item.key;
      }
    });
    return theType;
  }
};

class Itemlist extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    let pageData = this.props.pageData;
    return (
      <div className="clearfix">
        <Form.Item
          label={pageData.labelA}
          {...pageData.formItemLayoutA}
          className="half-item"
        >
          <p style={{ width: 350, wordWrap: "break-word" }}>{pageData.dataA}</p>
        </Form.Item>
        <Form.Item
          label={pageData.labelB}
          {...pageData.formItemLayoutB}
          className="half-item"
        >
          <span>{pageData.dataB}</span>
        </Form.Item>
      </div>
    );
  }
}

class ItemInput extends Component {
  constructor(props) {
    super(props);
    this.state = {
      valueA: "",
      valueB: ""
    };
  }

  componentWillReceiveProps(nextProps) {
    if (!nextProps.reset) {
      this.reset();
    }
  }

  reset() {
    this.setState({
      valueA: "",
      valueB: ""
    });
  }

  render() {
    let pageData = this.props.pageData;
    return (
      <div className="clearfix">
        <Form.Item
          label={pageData.labelA}
          {...pageData.formItemLayoutA}
          className="half-item"
        >
          <Input
            value={this.state.valueA}
            placeholder={"请输入" + pageData.labelA}
            style={{ width: 160 }}
            onChange={e => {
              this.setState({ valueA: e.target.value });
              pageData.onChangeA(e.target.value);
            }}
          />
        </Form.Item>
        <Form.Item
          label={pageData.labelB}
          {...pageData.formItemLayoutB}
          className="half-item"
        >
          {pageData.mark ? (
            <Input
              value={this.state.valueB}
              placeholder={"请输入" + pageData.labelB}
              style={{ width: 160 }}
              onChange={e => {
                this.setState({ valueB: e.target.value });
                pageData.onChangeB(e.target.value);
              }}
            />
          ) : (
              ""
            )}
        </Form.Item>
      </div>
    );
  }
}

class ChangeDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rotateDeg: 0,
      previewVisible: false,
      buttonStatus: true,
      changeType: 2,
      dataSource: [],
      voucherUrl: [],
      loading: false,
      reason: "",
      // 累计回收退票
      refundInvoice: 0,
      // 退票数组
      contactList: [],
      // 退款数据
      refundDataSource: [],
      rejectState: 0,
      // 收款信息
      proceedsData: [],
      proceedsTotal: this.props.proceedsTotal,
      // 开票信息
      invoiceData: [],
      invoiceTotal: this.props.invoiceTotal,
      cost: 10,
      refund: 8,
      // 测试添加退票
      contactList: this.props.contactList,
      // 退款
      refundColumn: [
        {
          title: "退款金额(万元)",
          dataIndex: "refundAmount",
          key: "refundAmount",
        },
        {
          title: "退款时间",
          dataIndex: "refundDate",
          key: "refundDate"
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks"
        },
        {
          title: "操作",
          dataIndex: "delete",
          key: "delete",
          render: (text, record) => {
            return (
              <Popconfirm
                title="是否删除?"
                onConfirm={() => {
                  this.deleteRefund(record)
                }}
                okText="删除"
                cancelText="不删除"
              >
                <Button
                  style={{ display: !this.props.refundStatus ? "block" : "none" }}
                  type="danger">
                  删除
              </Button>
              </Popconfirm>
            )
          }
        }
      ],
      ContactsLists: [
        {
          title: "金额（万元）",
          dataIndex: "amount",
          key: "amount",
          render: (text, record) => {
            return (
              <div>
                实际回收退票（万元）
                <Input
                  value={record.amount}
                  placeholder="请输入金额(必填项)"
                  disabled={record.load}
                  key={record.id}
                  required="required"
                  onChange={e => {
                    record.amount = e.target.value;
                    this.setState({ contactList: this.state.contactList });
                  }}
                  style={{ width: "120px" }}
                />
              </div>
            );
          }
        },
        {
          title: "时间",
          dataIndex: "createTimes",
          key: "createTimes",
          render: (text, record) => {
            return (
              <div>
                {/* <DatePicker
                  showTime
                  placeholder="请输入退票时间"
                  onChange={v => {
                    record.time = v._d;
                    this.setState({ contactList: this.state.contactList });
                  }}
                  onOk={v => {
                    record.time = v._d;
                    this.setState({ contactList: this.state.contactList });
                    console.log(this.state);
                  }}
                /> */}
                {record.createTimes}
              </div>
            );
          }
        },
        {
          title: "操作",
          dataIndex: "dels",
          key: "dels",
          render: (text, record, index) => {
            return (
              <div
                style={{
                  display:
                    (this.props.data.processState == 7 ||
                      this.props.data.processState == 8) &&
                      this.props.data.status == 4
                      ? "none"
                      : "block"
                }}
              >
                <Popconfirm
                  title="是否删除?"
                  onConfirm={() => {
                    this.confirmDelet(record);
                  }}
                  okText="删除"
                  cancelText="不删除"
                >
                  <Button
                    style={{
                      marginRight: "10px",
                      color: "#ffffff",
                      background: "#f00",
                      border: "none",
                    }}
                  >
                    删除
                  </Button>
                </Popconfirm>

                {record.load != true ? (
                  <Button
                    type="primary"
                    onClick={() => {
                      this.contactSave(record);
                    }}
                  >
                    保存
                  </Button>
                ) : (
                    ""
                  )}
              </div>
            );
          }
        }
      ]
    };
    this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
    this.changeButtonStatus = this.changeButtonStatus.bind(this);
    this.reset = this.reset.bind(this);
    this.addcontact = this.addcontact.bind(this);
    this.contactSave = this.contactSave.bind(this);
    this.confirmDelet = this.confirmDelet.bind(this);
    this.finish = this.finish.bind(this);
    this.reload = this.reLoad.bind(this);
    this.downImg = this.downImg.bind(this);
    this.upImg = this.upImg.bind(this);
    this.rotate = this.rotate.bind(this);
    this.moneyOld = this.moneyOld.bind(this);
    this.addRefund = this.addRefund.bind(this);
    this.refundCancel = this.refundCancel.bind(this);
    this.sumitRefund = this.sumitRefund.bind(this);
    this.getVoucherUrl = this.getVoucherUrl.bind(this);
    this.refundGetList = this.refundGetList.bind(this);
    this.deleteRefund = this.deleteRefund.bind(this);
    this.refundExecute = this.refundExecute.bind(this);
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      paymentTimes: nextProps.data.paymentTimes,
      paymentAmount: nextProps.data.paymentAmount,
      invoiceTimes: nextProps.data.invoiceTimes,
      invoiceAmount: nextProps.data.invoiceAmount,
      cwCost: nextProps.data.cwCost,
      refundableAmount: nextProps.data.refundableAmount,
      cwRemarks: nextProps.data.cwRemarks,
      contactList: nextProps.contactList,
      refundInvoice: nextProps.data.refundInvoice
    });
    if (!nextProps.reset) {
      this.reset();
    }
  }

  refundExecute() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/pushRefund",
      data: {
        id: this.props.id,
        refundUrl: this.state.refundUrl
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("提交退款成功！")
          this.refundGetList()
          this.props.onCancel()
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  deleteRefund(record) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/deleteRefund",
      data: {
        id: record.id
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("删除成功！")
          this.refundGetList()
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  sumitRefund() {
    if (this.state.refundMoney == "" || this.state.refundMoney == undefined) {
      message.warning("请填写正确退款金额")
      return
    } else if (this.state.refundRemarks == "" || this.state.refundRemarks == undefined) {
      message.warning("请填写备注")
      return
    } else if (this.state.refundDate == "" || this.state.refundDate == undefined) {
      message.warning("请选择退款时间")
      return
    }
    this.setState({
      loading: true
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/addRefund",
      data: {
        refundAmount: this.state.refundMoney,
        refundDate: this.state.refundDate,
        remarks: this.state.refundRemarks,
        orderNo: this.props.data.orderNo,
        cid: this.props.id,
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          message.success("添加成功！")
          this.refundGetList()
          this.setState({
            addRefundVisible: false
          })
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  refundGetList() {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/orderChange/listRefund",
      data: {
        id: this.props.id
      },
      success: function (data) {
        let theArr = [];
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          this.setState({
            refundDataSource: data.data
          })
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  }

  moneyOld(str, money) {
    if (money) {
      return (
        <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
          {str}(原合同金额{money}万元)
        </span>
      );
    } else {
      return (
        <span style={{ color: "red", fontWeight: 900, fontSize: 16 }}>
          {str}
        </span>
      );
    }
  }

  componentDidMount() {
    window.setTimeout(() => {
      const contactList = this.props.contactList;
      contactList.forEach(item => {
        item.load = true;
      });
      this.setState({
        contactList
      });
    }, 0);
    this.refundGetList()
  }

  addRefund() {
    this.setState({
      addRefundVisible: true,
      refundMoney: undefined,
      refundDate: undefined,
      refundRemarks: undefined,
    })
  }

  refundCancel() {
    this.setState({
      addRefundVisible: false,
      refundMoney: undefined,
      refundDate: undefined,
      refundRemarks: undefined,
    })
  }

  getVoucherUrl(e) {
    this.setState({
      voucherUrl: e
    });
    let url = ""
    e.forEach((item, index) => {
      if (item.response && item.response.data) {
        if (index < e.length - 1) {
          url += item.response.data + ","
        } else {
          url += item.response.data
        }
      }
    })
    this.setState({
      refundUrl: url
    })
  }

  downImg() {
    let num = 0;
    for (let i = 0; i < this.props.pictureUrl.length; i++) {
      if (this.props.pictureUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == this.props.pictureUrl.length - 1) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = this.props.pictureUrl[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  upImg() {
    let num = 0;
    for (let i = 0; i < this.props.pictureUrl.length; i++) {
      if (this.props.pictureUrl[i].url == this.state.previewImage) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = this.props.pictureUrl[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg
    });
  }

  reset() {
    this.setState({
      paymentTimes: null,
      paymentAmount: "",
      invoiceTimes: null,
      invoiceAmount: "",
      cwCost: "",
      refundableAmount: "",
      cwRemarks: ""
    });
  }

  getOrgCodeUrl(e) {
    this.setState({
      orgCodeUrl: e
    });
  }

  // //查看催款节点
  // loaduserss(record) {
  //   this.state.orderList = [];
  //   this.setState({
  //     orderNoss: record ? record.orderNo : this.props.datauser.orderNo
  //   });

  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
  //     data: {
  //       orderNo: record ? record.orderNo : this.props.datauser.orderNo
  //     },
  //     success: function(data) {
  //       let theArr = [];
  //       let thisData = [];
  //       if (!thisData) {
  //         if (data.error && data.error.length) {
  //           message.warning(data.error[0].message);
  //         }
  //         thisData = {};
  //       } else {
  //         for (let i = 0; i < data.data.length; i++) {
  //           thisData = data.data[i];
  //           theArr.push({
  //             key: i,
  //             dunSubject: thisData.dunSubject
  //               ? thisData.dunSubject.toString()
  //               : "", //催款科目
  //             id: thisData.id, //节点Id
  //             money: thisData.money, //催款金额
  //             dunStatus: thisData.dunStatus, //催款状态
  //             orderNo: record ? record.orderNo : this.props.datauser.orderNo
  //           });
  //         }
  //         this.setState({
  //           contactList: theArr
  //         });
  //       }
  //     }.bind(this)
  //   }).always(
  //     function() {
  //       this.setState({
  //         loading: false
  //       });
  //     }.bind(this)
  //   );
  // }

  timestampToTime(timestamp) {
    var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    var Y = date.getFullYear() + "-";
    var M =
      (date.getMonth() + 1 < 10
        ? "0" + (date.getMonth() + 1)
        : date.getMonth() + 1) + "-";
    var D = date.getDate() + " ";
    var h = date.getHours() + ":";
    var m = date.getMinutes() + ":";
    var s = date.getSeconds();
    return Y + M + D + h + m + s;
  }

  reLoad() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url:
        globalConfig.context + "/api/admin/orderChange/listOrderRefundInvoice",
      data: {
        orderNo: this.props.data.orderNo
      },
      success: data => {
        if (!data) return;
        data.data.forEach(item => {
          item.load = true;
        });
        this.setState({
          contactList: data.data
        });
      }
    });
  }

  // 完成订单
  finish() {
    // this.props.onCancel()
    this.setState({
      loading: true
    })
    $.ajax({
      url: globalConfig.context + "/api/admin/orderChange/completeOrderChange",
      method: "get",
      data: {
        orderNo: this.props.data.orderNo,
        type: this.props.data.type,
        id: this.props.data.id
      },
      success: data => {
        if (data.data) {
          message.success("提交成功！");
          // window.location.reload();
          this.setState({
            loading: false
          })
          this.props.onCancel()
        } else if (data.error && data.error.length) {
          message.warning(data.error[0].message)
          this.setState({
            loading: false
          });
        }
      }
    });
  }

  contactSave(index) {
    if (this.state.contactList) {
      let Data = this.state.contactList;
      for (var a = 0; a < Data.length; a++) {
        if (Data[a].amount == "") {
          message.warning("退票金额不能为空");
          // this.refs.signFirstPayment.focus();
          return false;
        }
      }
    }
    // this.setState({
    //   loading: true
    // });
    $.ajax({
      url:
        globalConfig.context + "/api/admin/orderChange/addOrderRefundInvoice",
      method: "post",
      data: {
        orderNo: this.props.data.orderNo,
        amount: index.amount
      }
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("保存成功！");
          let num = 0;
          this.state.contactList.forEach(item => {
            num += +item.amount;
            // if (item.key == index.key) {
            //   item.load = true;
            //   let time = this.timestampToTime(new Date().getTime());
            //   item.createTimes = time;
            // }
          });
          this.setState({
            contactList: this.state.contactList,
            refundInvoice: num
          });
          this.reLoad();
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  //点击新增催款节点
  addcontact() {
    // let key = this.state.contactList.length
    // if(key == 0) {
    //   key
    // }

    this.state.contactList.push({
      key: this.state.contactList.length,
      amount: "",
      createTime: undefined
      // orderNo: this.state.orderNoss,
      // dunTarget: this.state.kehuId
    });
    this.setState({
      contactList: this.state.contactList
    });
  }

  //删除收款节点
  confirmDelet(index) {
    // if (index.id) {
    //   this.state.contactList.splice(index.key, 1);
    //   this.setState({
    //     contactList: this.state.contactList
    //   });
    //   this.contactSave();
    // } else {
    //   this.state.contactList.splice(index.key, 1);
    //   this.setState({
    //     contactList: this.state.contactList
    //   });
    // }
    // if(this.state.contactList.length == 1) {
    //   this.state.contactList = []
    //   this.setState({
    //   contactList: this.state.contactList
    // });
    //   return
    // }
    // let num = index.key
    // if (this.state.contactList[num + 1].key) {
    //   this.state.contactList[num + 1].key = index.key;
    // }
    if (index.key || !index.id) {
      let num = this.state.contactList.findIndex(item => item.key == index.key);
      this.state.contactList.splice(num, 1);
      let total = 0;
      this.state.contactList.forEach(item => {
        total += +item.amount;
      });
      this.setState({
        contactList: this.state.contactList,
        refundInvoice: total
      });
    } else {
      $.ajax({
        url:
          globalConfig.context +
          "/api/admin/orderChange/deleteOrderRefundInvoice",
        method: "post",
        data: {
          id: index.id
        }
      }).done(
        function (data) {
          if (!data.error.length) {
            message.success("删除成功！");
            this.reLoad();
          } else {
            message.warning(data.error[0].message);
          }
        }.bind(this)
      );
    }

    // console.log(this.state.contactList[num + 1].key);
  }

  // loadData() {
  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     async: false,
  //     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)
  //   });
  // }

  //同意拒绝按钮的有无
  changeButtonStatus() {
    this.setState({
      buttonStatus: !this.state.buttonStatus
    });
  }

  onRef(ref) {
    this.fun = ref;
  }

  render() {
    const pageData = [
      {
        labelA: "客户名称",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.userName,
        labelB: "合同编号",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.contractNo
      },
      {
        labelA: "时间",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.createTimes,
        labelB: "发起人",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.applicant
      },
      {
        labelA: "当前进度",
        formItemLayoutA: formItemLayout,
        // 当前是咨询师以及咨询师经理时使用shenhePeo函数，其他流程正常显示
        dataA:
          this.props.data.processState == 2 || this.props.data.processState == 3
            ? shenghePeo(
              this.props.data.processState == 2
                ? this.props.data.consultantExamine
                : this.props.data.managerExamine,
              this.props.data.processState
            )
            : getProcessStatusNew(
              this.props.data.processState,
              this.props.data.status
            ),
        labelB: "变更类型",
        formItemLayoutB: formItemLayout,
        dataB: getChangeType(this.props.data.type)
      },
      {
        labelA: "合同额(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.moneyOld(this.props.data.totalAmount, this.props.money),
        labelB: "已收款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: changeColor(this.props.data.settlementAmount)
      },
      {
        labelA: "欠款(万元)",
        formItemLayoutA: formItemLayout,
        dataA: changeColor(this.props.data.arrears),
        labelB: "申请退款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: changeColor(this.props.data.changeAmount)
      },
      {
        labelA: "变更原因",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.remarks
      }
    ];
    const planData = [
      {
        labelA: "项目进度",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.projectState,
        onChangeA: value => {
          this.setState({
            projectState: value
          });
        },
        labelB: "发生成本费用(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.zxsCost,
        onChangeB: value => {
          this.setState({
            zxsCost: value
          });
        }
      },
      {
        labelA: "备注",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.zxsRemarks,
        onChangeA: value => {
          this.setState({
            zxsRemarks: value
          });
        }
      }
    ];
    const financeData = [
      {
        labelA: "发生成本(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.cwCost ? this.props.data.cwCost : "0",
        onChangeA: value => {
          this.setState({
            cwCost: value
          });
        },
        labelB: "应退金额(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.refundableAmount
          ? this.props.data.refundableAmount
          : "0",
        onChangeB: value => {
          this.setState({
            refundableAmount: value
          });
        },
        mark: true
      }
      // {
      //   labelA: "备注",
      //   formItemLayoutA: formItemLayout,
      //   dataA: this.props.data.cwRemarks,
      //   onChangeA: value => {
      //     this.setState({
      //       reason: value
      //     });
      //   },
      //   mark: false
      // }
    ];
    const buttonData = [
      {
        name: "同意",
        title: "理由",
        placeholder: "请输入理由",
        type: "primary",
        status: 2,
        onChange: value => {
          this.setState({
            remarks: value
          });
        }
      },
      {
        name: "拒绝",
        title: "理由",
        placeholder: "请输入理由",
        type: "danger",
        status: 3,
        onChange: value => {
          this.setState({
            remarks: value
          });
        }
      }
    ];
    const orgCodeUrl = this.props.pictureUrl;

    return (
      <div className="clearfix changeDetail">
        <div
          className="clearfix"
          ref={(e) => {
            this.refs = e;
          }}
        >
          <div
            style={{
              borderRadius: "50%",
              width: 300,
              height: 300,
              position: "absolute",
              top: 230,
              left: 525,
              transform: "rotate(-5deg)",
              zIndex: 1,
              display:
                (this.props.data.processState == 7 ||
                  this.props.data.processState == 8) &&
                this.props.data.status == 4
                  ? "block"
                  : "none",
            }}
          >
            {/* <span
              style={{
                fontSize: 29,
                position: "absolute",
                left: "50%",
                top: "50%",
                transform: "translate(-50%,-50%)",
                color: "red"
              }}
            >
              通过
            </span> */}
            <img src={tongguo} style={{ width: "100%" }} />
          </div>
          <div
            style={{
              borderRadius: "50%",
              width: 300,
              height: 300,
              position: "absolute",
              top: 284,
              left: 586,
              transform: "rotate(-5deg)",
              zIndex: 1,
              display: this.props.data.status == 5 ? "block" : "none",
            }}
          >
            <img src={quxiao} style={{ width: "63%" }} />
          </div>

          <h2 style={{ textAlign: "center", marginBottom: 10, marginTop: 20 }}>
            合同变更记录
          </h2>
          {pageData.map((item, index) => {
            return <Itemlist key={index} pageData={item} />;
          })}
          <Form.Item
            label="变更凭证"
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
          >
            <div style={{paddingTop:'10px',paddingBottom:'10px'}}>
              <ImgList domId={this.props.domId ? this.props.domId : 'hetongbiangenjilu'} fileList={orgCodeUrl} ItemWidth={'96px'}/>
            </div>
            <Modal
              maskClosable={false}
              footer={null}
              width={"50%"}
              visible={this.state.previewVisible}
              onCancel={() => {
                this.setState({ previewVisible: false, rotateDeg: 0 }, () => {
                  this.reset();
                });
              }}
            >
              <img
                alt=""
                style={{
                  width: "100%",
                  transform: `rotate(${this.state.rotateDeg}deg)`,
                }}
                src={this.state.previewImage || ""}
              />
              <Button
                onClick={this.rotate}
                style={{
                  position: "relative",
                  left: "50%",
                  transform: "translateX(-50%)",
                }}
              >
                旋转
              </Button>
              <Button
                onClick={this.upImg}
                style={{
                  position: "absolute",
                  left: -81,
                  top: "50%",
                  transform: "translateY(-50%)",
                }}
              >
                上一张
              </Button>
              <Button
                onClick={this.downImg}
                style={{
                  position: "absolute",
                  right: -81,
                  top: "50%",
                  transform: "translateY(-50%)",
                }}
              >
                下一张
              </Button>
            </Modal>
            <Rizhi changeId={this.props.id} />
          </Form.Item>

          <ul
            style={{
              width: "868px",
              overflow: "hidden",
              paddingLeft: "90px",
              paddingTop: "10px",
              position: "relative",
              bottom: "20px",
              fontSize: "12px",
              color: "rgba(0, 0, 0, 0.65)",
            }}
          >
            {/* <span>操作人：</span> */}
            {this.props.dataSource.map((item, index) => {
              if (item.status == 0) {
                item.status = "发起";
              } else if (item.status == 1) {
                item.status = "审核中";
              } else if (item.status == 2) {
                item.status = "通过";
              } else if (item.status == 3) {
                item.status = "驳回";
              } else if (item.status == 4) {
                item.status = "完成";
              }
              return (
                <li
                  key={index}
                  style={{
                    width: "100%",
                    height: "auto",
                    wordBreak: "break-all",
                    marginBottom: "10px",
                  }}
                >
                  {item.aname + "：" + "（" + item.status + "）" + item.remarks}
                </li>
              );
            })}
          </ul>
          <ProAndCuiList id={this.props.id} />
          <div className="clearfix">
            <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
              收款情况
            </h3>
            <div style={{ marginLeft: "90px" }}>
              <ul style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.65)" }}>
                {(this.props.proceedsData.bill || []).map((item, index) => (
                  <li key={index}>
                    {item.payTime +
                      " " +
                      item.aName +
                      " 收款：" +
                      item.transactionAmount +
                      "万元"}
                  </li>
                ))}
              </ul>

              <div>收款总计:{this.props.proceedsTotal}万元</div>
            </div>
            <br />
            <div style={{ marginLeft: "90px" }}>
              <ul style={{ fontSize: "12px", color: "rgba(0, 0, 0, 0.65)" }}>
                {(this.props.proceedsData.invoice || []).map((item, index) => (
                  <li key={index}>
                    {item.createTime + " " + " 开票：" + item.amount + "万元"}
                  </li>
                ))}
              </ul>
              <div>开票总计:{this.props.invoiceTotal}万元</div>
            </div>

            <p style={{ marginLeft: "90px", color: "red" }}>
              系统预估 产生成本（万元）：
              {this.props.data.estimateCost
                ? this.props.data.estimateCost
                : "0"}{" "}
              &nbsp;应退金额（万元）：
              {this.props.data.estimateRefundable
                ? this.props.data.estimateRefundable
                : "0"}
            </p>
          </div>

          {/* {this.props.data.type === 0 ? (
            <div>
              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                当前项目进度(咨询师经理填写)
              </h3>
              {planData.map((item, index) => {
                return <Itemlist key={index} pageData={item} />;
              })}
            </div>
          ) : (
            ""
          )} */}

          <div
            style={{
              display:
                (this.props.data.processState == 8 ||
                  this.props.data.processState == 7) &&
                (this.props.data.status == 2 || this.props.data.status == 4)
                  ? "block"
                  : "none",
            }}
          >
            <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
              回收退票
            </h3>
            {/* {this.state.processStatus == 0 ? ( */}
            <Button
              type="primary"
              onClick={this.addcontact}
              style={{
                float: "right",
                marginRight: "50px",
                marginBottom: "15px",
                position: "relative",
                zIndex: "999",
                display:
                  (this.props.data.processState == 7 ||
                    this.props.data.processState == 8) &&
                  this.props.data.status == 4
                    ? "none"
                    : "block",
              }}
            >
              添加回收退票
            </Button>
            {/* ) : (
              ""
            )} */}
            <Table
              pagination={false}
              bordered
              columns={this.state.ContactsLists}
              dataSource={this.state.contactList}
              size="small"
            />
          </div>

          {this.props.data.processState != 5 ? (
            <div>
              <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
                当前财务状态(财务填写)
              </h3>
              {/* <div className="clearfix">
                <Form.Item
                  className="half-item"
                  label="收款时间"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <span>{this.props.data.paymentTimes}</span>
                </Form.Item>
                <Form.Item
                  className="half-item"
                  label="收款金额(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <span>{this.props.data.paymentAmount}</span>
                </Form.Item>
              </div>
              <div className="clearfix">
                <Form.Item
                  className="half-item"
                  label="开票时间"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <span>{this.props.data.invoiceTimes}</span>
                </Form.Item>
                <Form.Item
                  className="half-item"
                  label="开票金额(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <span>{this.props.data.invoiceAmount}</span>
                </Form.Item>
              </div> */}
              {financeData.map((item, index) => {
                return <Itemlist key={index} pageData={item} />;
              })}
            </div>
          ) : (
            <div style={{ marginBottom: 10 }}>
              <h3 style={{ marginLeft: 10, fontWeight: 800, marginBottom: 10 }}>
                当前财务状态(财务填写)
              </h3>
              <div className="clearfix">
                {/* <Form.Item
                  className="half-item"
                  label="收款时间"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <DatePicker
                    style={{ width: 160 }}
                    value={
                      this.state.paymentTimes
                        ? moment(this.state.paymentTimes)
                        : null
                    }
                    onChange={(_data, dataString) => {
                      this.setState({
                        paymentTimes: dataString
                      });
                    }}
                  />
                </Form.Item>
                <Form.Item
                  className="half-item"
                  label="收款金额(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <Input
                    style={{ width: 160 }}
                    value={this.state.paymentAmount}
                    placeholder="请输入收款金额"
                    onChange={e => {
                      this.setState({
                        paymentAmount: e.target.value
                      });
                    }}
                  />
                </Form.Item>
              </div>
              <div className="clearfix">
                <Form.Item
                  className="half-item"
                  label="开票时间"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <DatePicker
                    style={{ width: 160 }}
                    value={
                      this.state.invoiceTimes
                        ? moment(this.state.invoiceTimes)
                        : null
                    }
                    onChange={(_data, dataString) => {
                      this.setState({
                        invoiceTimes: dataString
                      });
                    }}
                  />
                </Form.Item>
                <Form.Item
                  className="half-item"
                  label="开票金额(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <Input
                    style={{ width: 160 }}
                    value={this.state.invoiceAmount}
                    placeholder="请输入开票金额"
                    onChange={e => {
                      this.setState({
                        invoiceAmount: e.target.value
                      });
                    }}
                  />
                </Form.Item> */}
                <Form.Item
                  className="half-item"
                  label="发生成本(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <Input
                    style={{ width: 160 }}
                    value={this.state.cwCost}
                    placeholder="请输入发生成本"
                    onChange={(e) => {
                      this.setState({
                        cwCost: e.target.value,
                      });
                    }}
                  />
                </Form.Item>
                <Form.Item
                  className="half-item"
                  label="应退金额(万元)"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 14 }}
                >
                  <Input
                    style={{ width: 160 }}
                    value={this.state.refundableAmount}
                    placeholder="请输入应退金额"
                    onChange={(e) => {
                      this.setState({
                        refundableAmount: e.target.value,
                      });
                    }}
                  />
                </Form.Item>
              </div>
              <div
                style={{
                  marginTop: "10px",
                  display:
                    this.props.processState == this.props.data.processState
                      ? "block"
                      : "none",
                }}
              >
                <Form.Item
                  label="备注"
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 14 }}
                >
                  <Input.TextArea
                    rows={4}
                    value={this.state.reason}
                    placeholder="请输入补充资料/备注"
                    onChange={(e) => {
                      this.setState({
                        reason: e.target.value,
                      });
                    }}
                  />
                </Form.Item>
              </div>
            </div>
          )}
          <ul
            style={{
              margin: "10px 0 0 20px",
              color: "red",
              display:
                (this.props.data.processState == 7 ||
                  this.props.data.processState == 8) &&
                (this.props.data.status == 4 || this.props.data.status == 2)
                  ? "inline-block"
                  : "none",
            }}
          >
            <li>
              {"本次应收退票（万元）：" +
                (this.props.data.refundableAmount == null
                  ? 0
                  : this.props.data.refundableAmount)}
            </li>
            <li>
              {"累计已回收退票（万元）：" +
                (this.state.refundInvoice == null
                  ? 0
                  : this.state.refundInvoice)}
            </li>
          </ul>
          <div
            style={{
              position: "relative",
              display:
                (this.props.data.processState == 7 ||
                  this.props.data.processState == 8) &&
                this.props.data.status == 4 &&
                !this.props.data.refundStatus
                  ? "block"
                  : "none",
              marginTop: 10,
            }}
          >
            <hr
              style={{
                marginTop: 12,
                marginBottom: 10,
                backgroundColor: "black",
                height: 1,
                border: "none",
              }}
            />
            <h3
              style={{
                marginLeft: 20,
                fontWeight: 800,
                marginBottom: 10,
                display: "inline-block",
              }}
            >
              执行退款{" "}
              <span
                style={{ fontSize: 12, fontWeight: "normal", color: "red" }}
              >
                (注：执行退款，系统将从已收款金额中直接减款)
              </span>
            </h3>
            <Button onClick={this.addRefund} style={{ float: "right" }}>
              添加执行退款
            </Button>
            <Table
              pagination={false}
              bordered
              columns={this.state.refundColumn}
              dataSource={this.state.refundDataSource}
              scroll={{ x: "max-content", y: 0 }}
              size="small"
            />
            <div className="clearfix">
              <h3 style={{ marginLeft: 20, fontWeight: 800, marginBottom: 10 }}>
                上传退款凭证
              </h3>
              <div style={{ marginLeft: 20 }}>
                <PicturesWall
                  fileList={this.getVoucherUrl}
                  pictureUrl={this.state.voucherUrl}
                  url="/api/admin/orderChange/uploadRefund"
                  sign="order_change_file"
                />
              </div>
            </div>
            <Button
              type="primary"
              onClick={this.refundExecute}
              style={{
                position: "relative",
                left: "50%",
                transform: "translateX(-50%)",
              }}
            >
              确定执行退款
            </Button>
          </div>
          <div
            style={{
              display:
                (this.props.data.processState == 7 ||
                  this.props.data.processState == 8) &&
                this.props.data.status == 4 &&
                this.props.data.refundStatus
                  ? "block"
                  : "none",
            }}
          >
            <Refund
              data={this.props.data}
              id={this.props.id}
              dataSource={this.state.refundDataSource}
            />
          </div>
        </div>
        {this.props.data.processState == 5 ? (
          this.state.buttonStatus ? (
            <div>
              <div
                className="clearfix"
                style={{ display: "flex", justifyContent: "space-around" }}
              >
                {buttonData.map((item, index) => {
                  return (
                    <AgreeButton
                      data={item}
                      key={index}
                      backData={this.props.data}
                      processState={this.props.processState}
                      visible={this.changeButtonStatus}
                      ajaxData={this.state}
                      loadData={this.props.loadData}
                      rejectState={this.state.rejectState}
                      reason={this.state.reason}
                      onCancel={this.props.onCancel}
                    />
                  );
                })}
              </div>

              <Select
                defaultValue="0"
                style={{
                  width: 120,
                  float: "left",
                  position: "relative",
                  bottom: "28px",
                  right: "-600px",
                }}
                onChange={(val) => {
                  this.setState({ rejectState: val });
                  // console.log(val, this.state.rejectState);
                }}
              >
                <Option
                  value="0"
                  style={{
                    display: this.props.processState >= 1 ? "block" : "none",
                  }}
                >
                  营销员
                </Option>
                <Option
                  value="1"
                  style={{
                    display: this.props.processState >= 2 ? "block" : "none",
                  }}
                >
                  营销管理员
                </Option>
                <Option
                  value="2"
                  style={{
                    display: this.props.processState >= 3 ? "block" : "none",
                  }}
                >
                  咨询师
                </Option>
                <Option
                  value="3"
                  style={{
                    display: this.props.processState >= 4 ? "block" : "none",
                  }}
                >
                  咨询师经理
                </Option>
                <Option
                  value="4"
                  style={{
                    display: this.props.processState >= 5 ? "block" : "none",
                  }}
                >
                  咨询师总监
                </Option>
                <Option
                  value="5"
                  style={{
                    display: this.props.processState >= 6 ? "block" : "none",
                  }}
                >
                  财务专员(退单)
                </Option>
                <Option
                  value="6"
                  style={{
                    display: this.props.processState >= 7 ? "block" : "none",
                  }}
                >
                  财务总监
                </Option>
                <Option
                  value="7"
                  style={{
                    display: this.props.processState >= 8 ? "block" : "none",
                  }}
                >
                  总裁
                </Option>
              </Select>
            </div>
          ) : (
            ""
          )
        ) : (
          ""
        )}

        <Button
          type="primary"
          shape="round"
          size="large"
          style={{
            position: "absolute",
            left: "50%",
            bottom: "0",
            transform: "translateX(-50%)",
            display:
              (this.props.data.processState == 7 ||
                this.props.data.processState == 8) &&
              this.props.data.status == 2
                ? "block"
                : "none",
          }}
          onClick={this.finish}
        >
          完成订单
        </Button>

        <ReactToPrint
          trigger={() => (
            <Button
              type="primary"
              style={{
                float: "right",
                marginTop: 10,
                position: "absolute",
                top: 0,
                right: 30,
                display:
                  (this.props.data.processState == 7 ||
                    this.props.data.processState == 8) &&
                  this.props.data.status == 4
                    ? "block"
                    : "block",
              }}
            >
              打印
            </Button>
          )}
          content={() => this.refs}
        />
        <Modal
          maskClosable={false}
          visible={this.state.addRefundVisible}
          onOk={this.refundCancel}
          onCancel={this.refundCancel}
          width="700px"
          title="添加执行退款"
          footer=""
          className="admin-desc-content"
        >
          <Form
            layout="horizontal"
            onSubmit={this.nextSubmit}
            // id="demand-form"
          >
            <Spin spinning={this.state.loading}>
              <div className="clearfix">
                <FormItem
                  className="half-item"
                  {...formItemLayoutRefund}
                  label="退款金额"
                >
                  <Input
                    style={{ width: "155px" }}
                    placeholder="请输入退款金额"
                    value={this.state.refundMoney}
                    onChange={(e) => {
                      this.setState({
                        refundMoney: e.target.value,
                      });
                    }}
                  />
                </FormItem>

                <FormItem
                  className="half-item"
                  {...formItemLayoutRefund}
                  label="退款时间"
                >
                  <DatePicker
                    value={
                      this.state.refundDate
                        ? moment(this.state.refundDate)
                        : null
                    }
                    onChange={(date, dateString) => {
                      this.setState({
                        refundDate: dateString,
                      });
                    }}
                  />
                </FormItem>

                <FormItem
                  style={{ height: "auto" }}
                  labelCol={{ span: 3 }}
                  wrapperCol={{ span: 19 }}
                  label="备注"
                >
                  <TextArea
                    rows={4}
                    placeholder="请输入备注信息"
                    style={{ width: "95%" }}
                    value={this.state.refundRemarks}
                    onChange={(e) => {
                      this.setState({
                        refundRemarks: e.target.value,
                      });
                    }}
                  />
                </FormItem>
                <FormItem
                  wrapperCol={{ span: 12, offset: 6 }}
                  className="half-middle"
                  style={{ marginTop: 10 }}
                >
                  <Button
                    className="submitSave"
                    type="primary"
                    onClick={this.sumitRefund}
                  >
                    保存
                  </Button>
                  <Button
                    className="submitSave"
                    type="ghost"
                    style={{ marginLeft: 10 }}
                    onClick={this.refundCancel}
                  >
                    取消
                  </Button>
                </FormItem>
              </div>
            </Spin>
          </Form>
        </Modal>
      </div>
    );
  }
}

export { ChangeDetail };