import React, { Component } from "react";
import { Button, Col, DatePicker, Form, Input, message, Modal, Select, Spin, Table, Tag, Tooltip } from "antd";
import { getApprovedState, getLiquidationStatus, getProcessStatus, getProjectName, splitUrl } from "../../../../tools";
import moment from "moment";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import PicturesWall from "../../../order/orderNew/changeComponent/picturesWall";
import ImgList from "../../../../common/imgList";
import OrderCoor from "../../../order/orderNew/changeComponent/orderCoor";
import ContentUrl from "../../../order/orderNew/contentUrl";
import $ from "jquery";

const FormItem = Form.Item;

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

class OrderInfor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      contactList: [],

      columns: [
        {
          title: "业务项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          render: (text, record) => {
            return <span>
              {text}<span style={{ color: "red" }}>{record.patentTypeName}</span>{"-" + record.id}
              <div>
                {record.cSort == 6 && record.projectType == 1 && <span>(含{record.htMember == 1 ? '高新会员&' : ''}{record.additionalDeduction == 1 ? '加计扣除&' : ''}{record.rdAwardsubsidy == 1 ? '研发奖补' : ''})</span>}
                  {record.cSort == 6 && record.projectType == 3 && <span>(仅提供单边会员服务)</span>}
                {record.cSort == 6 && record.projectType == 2 && <span>(仅填报表，仅咨询，不出备查资料)</span>}
                {record.cSort == 3 && <span>{record.technologyProjectType==0?'(简易项目)':record.technologyProjectType==1?'(市区级)':record.technologyProjectType==2?'(省级)':record.technologyProjectType==3?'(国家级)':''}</span>}
                {record.cSort == 8 ? (record.type != 2 && record.patentType == 1) ? <span>（变更）</span> : <span>{record.ordinaryRisk == 0 ? '(普通申请)' : record.ordinaryRisk == 1 ? '(风险代理)' : ''}</span> : ""}
                {record.type == 2 && <span>({record.days == 0 ? '普通' : record.days == 1 ? '加急' : ''}{record.scheme == 0 ? '&无方案' : record.scheme == 1 ? '&有方案' : ''})</span>}
              </div>
            </span>
          }
        },
        {
          title: "项目类别",
          dataIndex: "cname",
          key: "cname",
        },
        {
          title: "项目数量",
          dataIndex: "commodityQuantity",
          key: "commodityQuantity",
          render: (text, record) => {
            if (record.splitStatus == 1) {
              return (
                <span>
                  {text}{" "}
                  <Tag
                    color="#108ee9"
                    onClick={(e) => {
                      e.stopPropagation();
                      this.showRes(record);
                    }}
                  >
                    已拆
                  </Tag>
                </span>
              );
            } else {
              return text;
            }
          },
        },
        {
          title: "金额(万元)",
          dataIndex: "commodityPrice",
          key: "commodityPrice",
        },
        {
          title: "负责人",
          dataIndex: "contacts",
          key: "contacts",
        },
        {
          title: "负责人电话",
          dataIndex: "contactsMobile",
          key: "contactsMobile",
        },
        {
          title: "项目状态",
          dataIndex: "projectStatus",
          key: "projectStatus",
          render: (text) => {
            return getProjectName(text);
          },
        },
        {
          title: "主要项目",
          dataIndex: "main",
          key: "main",
          render: (text) => {
            return text ? "是" : "否";
          },
        },
        {
          title: "总年限",
          dataIndex: "yearSum",
          key: "yearSum",
          render: (text, record) => {
            return (
              <div>{["", "一年", "二年", "三年", "四年", "五年"][text]}</div>
            );
          }
        },
        {
          title: "年限",
          dataIndex: "serviceLife",
          key: "serviceLife",
          render: (text, record) => {
            return (
              <div>{!!text && JSON.parse(text).toString()}</div>
            );
          }
        },
        {
          title: "本次派单",
          dataIndex: "serviceYear",
          key: "serviceYear",
          render: (text, record) => {
            return (
              <div>{!text ? "" : text}</div>
            );
          }
        },
        {
          title: "项目说明",
          dataIndex: "taskComment",
          key: "taskComment",
          render: (text) => {
            return (
              <Tooltip title={text}>
                <div style={{
                  maxWidth: '100px',
                  overflow: 'hidden',
                  textOverflow: "ellipsis",
                  whiteSpace: 'nowrap',
                }}>{text}</div>
              </Tooltip>
            );
          },
        },
      ]
    }
    this.loaduser = this.loaduser.bind(this);
    this.jiedian = this.jiedian.bind(this);
    this.loadData = this.loadData.bind(this);
  }

  componentDidMount() {
    this.loaduser();
    this.jiedian();
    this.loadData();
  }

  //查看项目列表
  loadData(record) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
      data: {
        orderNo: this.props.orderNo
      },
      success: function (data) {
        let theArr = [];
        if (!data.data) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            thisdata.key = i;
            thisdata.sort = thisdata.cSort;
            thisdata.declarationBatch = thisdata.declarationBatch || undefined;//申报批次
            thisdata.ifCertificationFee = isNaN(parseInt(thisdata.ifCertificationFee)) ? undefined : thisdata.ifCertificationFee;//是否包含申报批次
            theArr.push(thisdata);
          }
        }
        this.setState({
          dataSource: theArr,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  loaduser() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
      data: {
        orderNo: this.props.orderNo,
      },
      success: function (data) {
        let thisData = data.data;
        if (!thisData) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thisData = {};
        }
        if (thisData.approval == 2) {
          thisData.approval = "特批通过";
        } else if (thisData.approval == 3) {
          thisData.approval = "特批驳回";
        }
        this.setState({
          id: thisData.id,
          kehuId: thisData.buyerId,
          orderNo: thisData.orderNo, //订单编号
          orderType: thisData.orderType, //订单类型
          firstAmount: thisData.firstAmount, //首付金额
          totalAmount: thisData.totalAmount, //总金额
          settlementAmount: thisData.settlementAmount, //结算金额
          liquidationStatus: thisData.liquidationStatus, //清算状态
          examineName: thisData.examineName,
          processStatus: thisData.processStatus, //流程状态
          orderRemarks: thisData.orderRemarks, //订单备注
          contractNo: thisData.contractNo, //合同编号
          contacts: thisData.contacts, //联系人
          contactMobile: thisData.contactMobile, //联系人电话
          legalPerson: thisData.legalPerson, //法人
          legalPersonTel: thisData.legalPersonTel, //法人电话
          orgCodeUrl: thisData.contractPictureUrl
            ? splitUrl(
              thisData.contractPictureUrl,
              ",",
              globalConfig.avatarHost + "/upload"
            )
            : [], //图片地址
          replenishUrl: thisData.agreementUrl
            ? splitUrl(
              thisData.agreementUrl,
              ",",
              globalConfig.avatarHost + "/upload"
            )
            : [], //图片地址
          contentUrl: thisData.serviceContent
            ? splitUrl(
              thisData.serviceContent,
              ",",
              globalConfig.avatarHost + "/upload"
            )
            : [], //图片地址
          signDate: thisData.signDate, //签单时间
          userName: thisData.userName, //客户名称
          salesmanName: thisData.salesmanName, //营销员名称
          salesmanMobile: thisData.salesmanMobile, //营销员电话
          oldSalesmanName: thisData.oldSalesmanName, //营销员名称
          oldSalesmanMobile: thisData.oldSalesmanMobile, //营销员电话
          financeName: thisData.financeName, //财务名称
          financeMobile: thisData.financeMobile, //财务电话
          nowFinanceMobile: thisData.nowFinanceMobile,
          nowFinance: thisData.nowFinance,
          approval:
            thisData.approval == 0
              ? thisData.approval.toString()
              : thisData.approval,
          organizationSearch: thisData.orderDep,
          depName: thisData.depName,
          status: thisData.status,
          outsource: thisData.outsource,
          deleteSign: thisData.deleteSign,
          orderUid: thisData.uid,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  jiedian() {
    this.setState({
      loadData: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
      data: {
        orderNo: this.props.orderNo,
      },
      success: function (data) {
        let theArr = [];
        let thisData = [];
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } 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: thisData.orderNo,
            });
          }
          this.setState({
            contactList: theArr,
          });
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  render() {
    const formItemList = [
      {
        label: "企业联系人",
        content: <span>{this.state.contacts}</span>,
      },
      {
        label: "客户名称",
        content: <span>
          {this.state.userName}
          <EnterpriseNameChange
            type='journal'
            style={{ marginLeft: 10 }}
            enterpriseId={this.state.orderUid} />
        </span>,
      },
      {
        label: "联系人电话",
        content: <span>{this.state.contactMobile}</span>,
      },
      {
        label: "企业法人",
        content: <span>{this.state.legalPerson}</span>,
      },
      {
        label: "法人电话",
        content: <span>{this.state.legalPersonTel}</span>,
      },
    ];
    return (
      <Modal
        maskClosable={false}
        visible={this.props.visible}
        onOk={this.props.onCancel}
        onCancel={this.props.onCancel}
        width={800}
        title='订单详情'
        footer=""
        className="admin-desc-content"
      >
        <div className="clearfix">
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="合同编号"
            >
              {<span>{this.state.contractNo}</span>}
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="订单编号"
            >
              <span>{this.state.orderNo}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="流程状态"
            >
              <span>
                {getProcessStatus(this.state.processStatus, this.state.examineName, this.state.approval)}
              </span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="结算状态"
            >
              <span>
                {getLiquidationStatus(
                  this.state.liquidationStatus
                )}
              </span>
            </FormItem>
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="特批立项"
              >
                <span>
                  {getApprovedState(this.state.approval)}
                </span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="合同签订时间"
              >
                <span>{this.state.signDate}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="订单部门"
              >
                <span>{this.state.depName}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="是否外包"
              >
                <span>
                  {this.state.outsource == 0 ? "否" : "是"}
                </span>
              </FormItem>
            </div>
          </div>
          <h3
            style={{
              marginLeft: 10,
              fontWeight: 800,
              marginBottom: 10,
            }}
          >
            收款项目
          </h3>
          {this.state.processStatus === 0 ? (
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="签单金额(万元)"
              >
                <Input
                  placeholder="签单金额"
                  ref="totalAmountRef"
                  value={this.state.totalAmount}
                  onChange={(e) => {
                    this.setState({
                      totalAmount: e.target.value,
                    });
                  }}
                  style={{ width: "240px" }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="首付金额(万元)"
              >
                <Input
                  placeholder="请输入实签首款金额"
                  ref="firstAmountRef"
                  value={this.state.firstAmount}
                  onChange={(e) => {
                    this.setState({
                      firstAmount: e.target.value,
                    });
                  }}
                  style={{ width: "240px" }}
                />
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="已收款项"
              >
                <span>
                  {this.state.settlementAmount + "万元"}
                </span>
              </FormItem>
            </div>
          ) : (
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="签单金额(万元)"
              >
                <span>{this.state.totalAmount}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="首付金额(万元)"
              >
                <span>{this.state.firstAmount}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="已收款项"
              >
                <span>
                  {this.state.settlementAmount + "万元"}
                </span>
              </FormItem>
            </div>
          )}
          <h3
            style={{
              marginLeft: 10,
              fontWeight: 800,
              marginBottom: 10,
            }}
          >
            联系信息
          </h3>
          <div className="clearfix">
            {formItemList.map((data, index) => {
              return (
                <FormItem
                  className="half-item"
                  {...formItemLayout}
                  key={index}
                  label={data.label}
                >
                  {data.content}
                </FormItem>
              );
            })}
          </div>
          <div className="clearfix">
            <div>
              <FormItem
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                label="合同扫描件"
              >
                <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                  {this.state.orgCodeUrl && this.state.visible && this.state.activeKey === '1' ? <ImgList domId={'addService3'} fileList={this.state.orgCodeUrl} ItemWidth={'96px'} /> : <div />}
                </div>
                <Modal
                  maskClosable={false}
                  footer={null}
                  width={"50%"}
                  visible={this.state.previewVisible}
                  onCancel={() => {
                    this.setState({
                      previewVisible: false,
                      rotateDeg: 0,
                    });
                  }}
                >
                  <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>
                <Button
                  style={{
                    float: "right",
                    marginRight: "140px",
                    marginTop: "20px",
                  }}
                  onClick={this.getOrderLog}
                >
                  查看订单日志
                </Button>
              </FormItem>
              <FormItem
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 18 }}
                label="补充协议"
              >
                {/*<Upload*/}
                {/*  className="demandDetailShow-upload"*/}
                {/*  listType="picture-card"*/}
                {/*  fileList={this.state.replenishUrl}*/}
                {/*  onPreview={(file) => {*/}
                {/*    this.setState({*/}
                {/*      previewImage: file.url || file.thumbUrl,*/}
                {/*      previewVisibles: true,*/}
                {/*    });*/}
                {/*  }}*/}
                {/*/>*/}
                <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                  {
                    this.state.visible && this.state.activeKey === '1' && this.state.replenishUrl ?
                      <ImgList domId={'addService4'} fileList={this.state.replenishUrl} ItemWidth={'96px'} /> :
                      <div />
                  }
                </div>
                <Modal
                  maskClosable={false}
                  footer={null}
                  width={"50%"}
                  visible={this.state.previewVisibles}
                  onCancel={() => {
                    this.setState({
                      previewVisibles: false,
                      rotateDeg: 0,
                    });
                  }}
                >
                  <img
                    alt=""
                    style={{
                      width: "100%",
                      transform: `rotate(${this.state.rotateDeg}deg)`,
                    }}
                    src={this.state.previewImage || ""}
                  />
                  <Button
                    onClick={this.rotates}
                    style={{
                      position: "relative",
                      left: "50%",
                      transform: "translateX(-50%)",
                    }}
                  >
                    旋转
                  </Button>
                  <Button
                    onClick={this.upImgs}
                    style={{
                      position: "absolute",
                      left: -81,
                      top: "50%",
                      transform: "translateY(-50%)",
                    }}
                  >
                    上一张
                  </Button>
                  <Button
                    onClick={this.downImgs}
                    style={{
                      position: "absolute",
                      right: -81,
                      top: "50%",
                      transform: "translateY(-50%)",
                    }}
                  >
                    下一张
                  </Button>
                </Modal>
              </FormItem>
            </div>
          </div>
          <ContentUrl
            processStatus={2}
            domId={"inforContents"}
            contentUrl={this.state.contentUrl}
            imgId={"inforContentsImg"}
          />
          <div className="clearfix">
            <FormItem
              labelCol={{ span: 4 }}
              wrapperCol={{ span: 16 }}
              label="订单留言"
            >
              <p
                style={{ width: 500, wordWrap: "break-word" }}
              >
                {this.state.orderRemarks}
              </p>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="订单负责人"
            >
              <span>{this.state.salesmanName}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="订单负责人电话"
            >
              <span>{this.state.salesmanMobile}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="当前财务负责人"
            >
              <span>{this.state.nowFinance}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              label="当前财务负责人电话"
            >
              <span>{this.state.nowFinanceMobile}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              {...formItemLayout}
              style={{ opacity: ".5" }}
              label="原订单负责人"
            >
              <span>{this.state.oldSalesmanName}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              style={{ opacity: ".5" }}
              label="原订单负责人电话"
            >
              <span>{this.state.oldSalesmanMobile}</span>
            </FormItem>
          </div>
          <div className="clearfix">
            <FormItem
              className="half-item"
              style={{ opacity: ".5" }}
              {...formItemLayout}
              label="实际财务操作人"
            >
              <span>{this.state.financeName}</span>
            </FormItem>
            <FormItem
              className="half-item"
              {...formItemLayout}
              style={{ opacity: ".5" }}
              label="实际财务操作人电话"
            >
              <span>{this.state.financeMobile}</span>
            </FormItem>
          </div>
          {/* 协单人员 */}
          <OrderCoor orderNo={this.props.orderNo} />
          <div>
            <span style={{ marginLeft: "50px", fontSize: "20px" }}>
              项目业务
            </span>
          </div>
          <div
            className="patent-table"
            style={{ marginBottom: 10 }}
          >
            <Spin spinning={this.state.loading}>
              <Table
                columns={this.state.columns}
                scroll={{ x: "max-content", y: 0 }}
                dataSource={this.state.dataSource}
                pagination={false}
                onRowClick={this.tableRowClick}
                bordered
                size="small"
              />
            </Spin>
          </div>
        </div>
      </Modal>
    )
  }
}

export default OrderInfor;
