import React, { Component } from "react";
import { Form, Select, Input, Button, message } from "antd";
import $ from "jquery/src/ajax";
import PicturesWall from "./picturesWall";
import Rizhi from "./rizhi";

const FormItem = Form.Item;
const formItemLayout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 14 }
};
class ChangeApply extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      voucherUrl: [],
      dataSource: []
    };
    this.departmentList = this.departmentList.bind(this);
    this.changeApply = this.changeApply.bind(this);
    this.getVoucherUrl = this.getVoucherUrl.bind(this);
  }


  componentDidMount() {
    // console.log("看一下",this.props);
    
  }

  //变更申请
  changeApply() {
    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) {
        this.setState({
          loading: false
        });
        if (!data.error.length) {
          message.success("变更成功!");
          this.props.onCancel();
        } else {
          message.warning(data.error[0].message);
        }
      }.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)
  //   });
  // }

  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
    });
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      data: nextProps.orderData,
      voucherUrl: nextProps.voucherUrl
    });
  }

  componentWillMount() {
    this.departmentList();
  }

  render() {
    const { TextArea } = Input;
    const data = this.state.data;
    let departmentArr = this.state.departmentArr || [];
    return (
      <div>
        <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="申请变更部门"
          >
            <Select
              placeholder="请输入变更部门"
              style={{ width: 240 }}
              value={data.depName}
              onChange={e => {
                let data = this.state.data;
                data.depName = e;
                this.setState({ data });
              }}
            >
              {departmentArr.map(function(item) {
                return (
                  <Select.Option key={item.id} value={item.name}>
                    {item.name}
                  </Select.Option>
                );
              })}
            </Select>
          </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" }}
            />
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            label="变更类型"
          >
            <Select
              placeholder="选择合同变更类型"
              style={{ width: 200 }}
              onChange={e => {
                let data = this.state.data;
                data.type = e;
                this.setState({ data });
              }}
              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>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            label="合同额(万元)"
          >
            <Input
              placeholder="请输入合同额"
              ref="signTotalAmount"
              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" }}
            />
          </FormItem>
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            label="申请退款(万元)"
          >
            <Input
              placeholder="请输入申请退款"
              ref="signTotalAmount"
              value={data.changeAmount}
              onChange={e => {
                let data = this.state.data;
                data.changeAmount = e.target.value;
                this.setState({ data });
              }}
              style={{ width: "240px" }}
            />
          </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.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>
      </div>
    );
  }
}

export default ChangeApply;