import React, { Component } from "react";
import { Form, Upload, Modal, Input, DatePicker } from "antd";
import AgreeButton from "./agreeButton.js";
import Rizhi from "./rizhi.js";
import moment from "moment";
import { getProcessStatusNew } from "@/tools.js";

const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};

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"
        >
          <span>{pageData.dataA}</span>
        </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 = {
      previewVisible: false,
      buttonStatus: true,
      changeType: 2
    };
    this.getOrgCodeUrl = this.getOrgCodeUrl.bind(this);
    this.changeButtonStatus = this.changeButtonStatus.bind(this);
    this.reset = this.reset.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
    });
    if (!nextProps.reset) {
      this.reset();
    }
  }

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

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

  //同意拒绝按钮的有无
  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,
        dataA:
          this.props.data.status !== 4
            ? getProcessStatusNew(this.props.data.processState) + "审核中"
            : getProcessStatusNew(this.props.data.processState) + "已完成",
        labelB: "变更类型",
        formItemLayoutB: formItemLayout,
        dataB: getChangeType(this.props.data.type)
      },
      {
        labelA: "合同额(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.totalAmount,
        labelB: "已收款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.settlementAmount
      },
      {
        labelA: "欠款(万元)",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.arrears,
        labelB: "申请退款(万元)",
        formItemLayoutB: formItemLayout,
        dataB: 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,
        onChangeA: value => {
          this.setState({
            cwCost: value
          });
        },
        labelB: "应退金额(万元)",
        formItemLayoutB: formItemLayout,
        dataB: this.props.data.refundableAmount,
        onChangeB: value => {
          this.setState({
            refundableAmount: value
          });
        },
        mark: true
      },
      {
        labelA: "补充资料/备注",
        formItemLayoutA: formItemLayout,
        dataA: this.props.data.cwRemarks,
        onChangeA: value => {
          this.setState({
            cwRemarks: 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>
        {pageData.map((item, index) => {
          return <Itemlist key={index} pageData={item} />;
        })}
        <Form.Item
          label="变更凭证"
          labelCol={{ span: 4 }}
          wrapperCol={{ span: 18 }}
        >
          <Upload
            className="demandDetailShow-upload"
            listType="picture-card"
            fileList={orgCodeUrl}
            onPreview={file => {
              this.setState({
                previewImage: file.url || file.thumbUrl,
                previewVisible: true
              });
            }}
          />
          <Modal
            maskClosable={false}
            footer={null}
            visible={this.state.previewVisible}
            onCancel={() => {
              this.setState({ previewVisible: false }, () => {
                this.foo.reset();
              });
            }}
          >
            <img
              alt=""
              style={{ width: "100%" }}
              src={this.state.previewImage || ""}
            />
          </Modal>
          <Rizhi changeId={this.props.data.id} />
        </Form.Item>
        {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>
        ) : (
          ""
        )}
        {(this.props.data.processState > 5 &&
          this.props.data.processState <= 8) ||
        (this.props.data.processState === 9 && this.props.data.status === 4) ? (
          <div>
            <h3 style={{ marginLeft: 10, 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>
              <Form.Item
                label="补充资料/备注"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
              >
                <Input.TextArea
                  rows={4}
                  value={this.state.cwRemarks}
                  placeholder="请输入补充资料/备注"
                  onChange={e => {
                    this.setState({
                      cwRemarks: e.target.value
                    });
                  }}
                />
              </Form.Item>
            </div>
          </div>
        )}
        {!(
          (this.props.data.processState > 5 &&
            this.props.data.processState <= 8) ||
          (this.props.data.processState === 9 && this.props.data.status === 4)
        ) ? (
          this.state.buttonStatus ? (
            <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}
                  />
                );
              })}
            </div>
          ) : (
            ""
          )
        ) : (
          ""
        )}
      </div>
    );
  }
}

export { ChangeDetail };