import React, { Component } from "react";
import { Form, Upload, Modal, Button, Table, Col, message, Tag } from "antd";
import {
  splitUrl,
  getProcessStatus,
  getjiedian,
  getLiquidationStatus,
  getboutique,
  getCuikuan,
  getApprovedState,
  getProjectStatus
} from "@/tools.js";
import img from "./img.png"
import ResolutionDetail from "@/resolutionDetail";

const FormItem = Form.Item;
class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      newContactsLists: [
        {
          title: "项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          render: (text, record) => {
            return <span>{text + "-" + record.tid}</span>;
          }
        },
        {
          title: "项目分类",
          dataIndex: "projectType",
          key: "projectType",
          render: text => {
            let arr = this.props.dataSourceX || [];
            let str = "";
            for (let i = 0; i < arr.length; i++) {
              if (this.props.dataSourceX[i].sort == text) {
                str = this.props.dataSourceX[i].cname;
                return <span>{str}</span>;
              }
            }
          }
        },
        {
          title: "催款科目",
          dataIndex: "dunTypeName",
          key: "dunTypeName",
          render: (text, record) => {
            if(record.customizeName) {
              return text + record.customizeName;
            }
            return <span>{text}</span>;
          }
        },
        {
          title: "时间",
          dataIndex: "waitDay",
          key: "waitDay",
          render: (text, record) => {
            if (record.dunTypeName) {
              if (record.customizeTimes) {
                return record.customizeTimes;
              }
              return <span>{text}</span>;
            }
          }
        },
        {
          title: "金额(万元)",
          dataIndex: "money",
          key: "money",
          render: (text, record) => {
            if (record.dunTypeName) {
              if (record.appropriationRatio && !record.money) {
                return <span>{record.appropriationRatio}(拨款比例)</span>;
              } else if (record.appropriationRatio && record.money) {
                return (
                  <span>
                    {text}(比例:{record.appropriationRatio})
                  </span>
                );
              } else {
                return <span>{text}</span>;
              }
            }
          }
        },
        {
          title: "服务年限",
          dataIndex: "startDate",
          key: "startDate",
          render: (text, record) => {
            if (record.dunTypeName) {
              return <span>{text}</span>;
            }
          }
        },
        {
          title: "催款状态",
          dataIndex: "status",
          key: "status",
          render: text => {
            return <span>{text == 1 ? "已启动" : "未启动"}</span>;
          }
        }
      ],
      ContactsLists: [
        {
          title: "催款科目",
          dataIndex: "dunSubject",
          key: "dunSubject",
          render: text => {
            return getjiedian(text);
          }
        },
        {
          title: "金额(万元)",
          dataIndex: "money",
          key: "money"
        },
        {
          title: "催款状态",
          dataIndex: "dunStatus",
          key: "dunStatus",
          render: text => {
            return getCuikuan(text);
          }
        }
      ],
      resVisible: false,
      columnsX: [
        {
          title: "业务项目名称",
          dataIndex: "commodityName",
          key: "commodityName",
          render: (text, record) => {
            return text + "-" + record.id
          }
        },
        {
          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",
          render: text => {
            return this.props.processState === 2 ? "***" : text;
          }
        },
        {
          title: "负责人",
          dataIndex: "contacts",
          key: "contacts"
        },
        {
          title: "负责人电话",
          dataIndex: "contactsMobile",
          key: "contactsMobile"
        },
        {
          title: "项目状态",
          dataIndex: "projectStatus",
          key: "projectStatus",
          render: text => {
            return getProjectStatus(text);
          }
        },
        {
          title: "主要项目",
          dataIndex: "main",
          key: "main",
          render: text => {
            return text ? "是" : "否";
          }
        },
        {
          title: "项目说明",
          dataIndex: "taskComment",
          key: "taskComment",
          render: text => {
            return text && text.length > 8 ? text.substr(0, 8) + "…" : text;
          }
        }
      ],
      rotateDeg: 0
    };
    this.tableRowClickX = this.tableRowClickX.bind(this);
    this.nextCancel = this.nextCancel.bind(this);
    this.rotate = this.rotate.bind(this);
    this.downImg = this.downImg.bind(this);
    this.upImg = this.upImg.bind(this);
    this.downImgs = this.downImgs.bind(this);
    this.upImgs = this.upImgs.bind(this);
    this.showRes = this.showRes.bind(this);
    this.resCancel = this.resCancel.bind(this);
  }

  rotate() {
    let rotateDeg = this.state.rotateDeg + 90;
    this.setState({
      rotateDeg
    });
  }

  //项目详情关闭
  nextCancel() {
    this.setState({
      visible: false
    });
  }

  //点击打卡项目详情
  tableRowClickX(record) {
    this.setState({
      jid: record.id, //项目ID
      kid: record.commodityId, //商品ID
      commodityName: record.commodityName, //金额
      commodityPrice: record.commodityPrice, //金额
      commodityQuantity: record.commodityQuantity, //数量
      taskComment: record.taskComment, //备注
      main: record.main.toString(), //是否为主要
      visible: true,
      addState: 0
    });
  }
  downImg() {
    console.log(this.props.pictureUrl);
    const data = this.props.orderData;
    let num = 0;
    for (
      let i = 0;
      i <
      splitUrl(
        data.contractPictureUrl,
        ",",
        globalConfig.avatarHost + "/upload"
      ).length;
      i++
    ) {
      if (
        splitUrl(
          data.contractPictureUrl,
          ",",
          globalConfig.avatarHost + "/upload"
        )[i].url == this.state.previewImage
      ) {
        num = i;
      }
    }
    if (
      num ==
      splitUrl(
        data.contractPictureUrl,
        ",",
        globalConfig.avatarHost + "/upload"
      ).length -
        1
    ) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = splitUrl(
      data.contractPictureUrl,
      ",",
      globalConfig.avatarHost + "/upload"
    )[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  upImg() {
    const data = this.props.orderData;
    let num = 0;
    for (
      let i = 0;
      i <
      splitUrl(
        data.contractPictureUrl,
        ",",
        globalConfig.avatarHost + "/upload"
      ).length;
      i++
    ) {
      if (
        splitUrl(
          data.contractPictureUrl,
          ",",
          globalConfig.avatarHost + "/upload"
        )[i].url == this.state.previewImage
      ) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = splitUrl(
      data.contractPictureUrl,
      ",",
      globalConfig.avatarHost + "/upload"
    )[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  downImgs() {
    const data = this.props.orderData;
    let num = 0;
    for (
      let i = 0;
      i <
      splitUrl(
        data.rep,
        ",",
        globalConfig.avatarHost + "/upload"
      ).length;
      i++
    ) {
      if (
        splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")[i]
          .url == this.state.previewImage
      ) {
        num = i;
      }
    }
    if (
      num ==
      splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")
        .length -
        1
    ) {
      return message.warning("已经是最后一张了哦");
    }
    this.state.previewImage = splitUrl(
      data.agreementUrl,
      ",",
      globalConfig.avatarHost + "/upload"
    )[num + 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  upImgs() {
    const data = this.props.orderData;
    let num = 0;
    for (
      let i = 0;
      i <
      splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")
        .length;
      i++
    ) {
      if (
        splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload")[i]
          .url == this.state.previewImage
      ) {
        num = i;
      }
    }
    if (num == 0) {
      return message.warning("已经是第一张了哦");
    }
    this.state.previewImage = splitUrl(
      data.agreementUrl,
      ",",
      globalConfig.avatarHost + "/upload"
    )[num - 1].url;
    this.setState({
      previewImage: this.state.previewImage,
      rotateDeg: 0
    });
  }
  // 拆分详细
  showRes(record) {
    this.setState({
      resVisible: true,
      resRecord: record
    })
  }
  resCancel() {
    this.setState({
      resVisible: false
    })
  }

  render() {
    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 }
    };
    const data = this.props.orderData;
    const propsList = this.props.contactList || [];
    return (
      <div
        className="clearfix"
        ref={(e) => {
          this.refs = e;
        }}
      >
        {this.state.resVisible ? (
          <ResolutionDetail
            cancel={this.resCancel}
            detail={this.state.resRecord}
            visible={this.state.resVisible}
            id={this.state.resRecord.orderNo}
          />
        ) : (
          ""
        )}
        <FormItem className="half-item" {...formItemLayout} label="订单编号">
          <span>{data.orderNo}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="合同编号">
          <span>{data.contractNo}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="客户名称">
          <span>{data.userName}</span>
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="合同签订时间"
        >
          <span>{data.signDate}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="流程状态">
          <span>{getProcessStatus(data.processStatus)}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="结算状态">
          <span>{getLiquidationStatus(data.liquidationStatus)}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="企业联系人">
          {/* <span>{data.contacts}</span> */}
          <span>{this.props.isCaiWu ? "***" : data.contacts}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="联系人电话">
          {/* <span>{data.contactMobile}</span> */}
          <span>{this.props.isCaiWu ? "***" : data.contactMobile}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="企业法人">
          <span>{this.props.isCaiWu ? "***" : data.legalPerson}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="法人电话">
          {/* <span>{data.legalPersonTel}</span> */}
          <span>{this.props.isCaiWu ? "***" : data.legalPersonTel}</span>
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="签单金额(万元)"
        >
          <span>
            {this.props.processState === 2 ? "***" : data.totalAmount}
          </span>
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="首付金额(万元)"
        >
          <span>
            {this.props.processState === 2 ? "***" : data.firstAmount}
          </span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="特批立项">
          <span>{getApprovedState(data.approval)}</span>
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="已收款项(万元)"
        >
          <span>
            {this.props.processState === 2 ? "***" : data.settlementAmount}
          </span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="订单部门">
          <span>{data.depName}</span>
        </FormItem>
        <FormItem className="half-item" {...formItemLayout} label="是否外包">
          {data.outsource == 0 ? "否" : "是"}
        </FormItem>
        <div className="clearfix">
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 16 }}
            label="订单留言"
          >
            <p style={{ width: 500, wordWrap: "break-word" }}>
              {data.orderRemarks}
            </p>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            label="合同扫描件"
          >
            <Upload
              className="demandDetailShow-upload"
              listType="picture-card"
              fileList={
                data.contractPictureUrl
                  ? splitUrl(
                      data.contractPictureUrl,
                      ",",
                      globalConfig.avatarHost + "/upload"
                    )
                  : []
              }
              onPreview={(file) => {
                this.setState({
                  previewImage: file.url || file.thumbUrl,
                  previewVisible: true,
                });
              }}
            />
            <Modal
              maskClosable={false}
              footer={null}
              width={"50%"}
              visible={this.state.previewVisible}
              onCancel={() => {
                this.state.rotateDeg = 0;
                this.setState({
                  previewVisible: false,
                  rotateDeg: this.state.rotateDeg,
                });
              }}
            >
              <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.props.getOrderLog(data.orderNo);
              }}
            >
              查看订单日志
            </Button>
          </FormItem>
          <FormItem
            labelCol={{ span: 4 }}
            wrapperCol={{ span: 18 }}
            label="补充协议"
          >
            <Upload
              className="demandDetailShow-upload"
              listType="picture-card"
              fileList={
                data.agreementUrl
                  ? splitUrl(
                      data.agreementUrl,
                      ",",
                      globalConfig.avatarHost + "/upload"
                    )
                  : []
              }
              onPreview={(file) => {
                this.setState({
                  previewImage: file.url || file.thumbUrl,
                  previewVisibles: true,
                });
              }}
            />
            <Modal
              maskClosable={false}
              footer={null}
              width={"50%"}
              visible={this.state.previewVisibles}
              onCancel={() => {
                this.state.rotateDeg = 0;
                this.setState({
                  previewVisibles: false,
                  rotateDeg: this.state.rotateDeg,
                });
              }}
            >
              <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.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 className="clearfix">
          <FormItem
            className="half-item"
            {...formItemLayout}
            label="订单负责人"
          >
            <span>{data.salesmanName}</span>
          </FormItem>
          <FormItem
            className="half-item"
            {...formItemLayout}
            label="订单负责人电话"
          >
            <span>{data.salesmanMobile}</span>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            className="half-item"
            {...formItemLayout}
            label="当前财务负责人"
          >
            <span>{data.nowFinance}</span>
          </FormItem>
          <FormItem
            className="half-item"
            {...formItemLayout}
            label="当前财务负责人电话"
          >
            <span>{data.nowFinanceMobile}</span>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            className="half-item"
            {...formItemLayout}
            style={{ opacity: ".5" }}
            label="原订单负责人"
          >
            <span>{data.oldSalesmanName}</span>
          </FormItem>
          <FormItem
            className="half-item"
            {...formItemLayout}
            style={{ opacity: ".5" }}
            label="原订单负责人电话"
          >
            <span>{data.oldSalesmanMobile}</span>
          </FormItem>
        </div>
        <div className="clearfix">
          <FormItem
            className="half-item"
            style={{ opacity: ".5" }}
            {...formItemLayout}
            label="实际财务操作人"
          >
            <span>{data.financeName}</span>
          </FormItem>
          <FormItem
            className="half-item"
            {...formItemLayout}
            style={{ opacity: ".5" }}
            label="实际财务操作人电话"
          >
            <span>{data.financeMobile}</span>
          </FormItem>
        </div>
        <div>
          <span style={{ marginLeft: "50px", fontSize: "20px" }}>项目业务</span>
        </div>
        <div className="patent-table">
          <Table
            columns={this.state.columnsX}
            pagination={false}
            dataSource={this.props.dataSourceX}
            onRowClick={this.tableRowClickX}
            bordered
            size="small"
          />
        </div>
        <div>
          <span style={{ marginLeft: "50px", fontSize: "20px" }}>催款节点</span>
          <span
            style={{
              display: propsList.length ? "none" : "inline-block",
              marginLeft: 10,
              color: "red",
            }}
          >
            金额总计(万元): {this.props.totalCui}
          </span>
        </div>
        <div className="clearfix">
          <Form layout="horizontal" id="demand-form">
            <Table
              pagination={false}
              bordered
              size="small"
              // columns={this.state.ContactsLists}
              columns={
                propsList.length
                  ? this.state.ContactsLists
                  : this.state.newContactsLists
              }
              dataSource={
                propsList.length
                  ? this.props.contactList
                  : this.props.contactListNew
              }
            />
            <Col span={24} offset={9} style={{ marginTop: "15px" }}></Col>
          </Form>
        </div>
        <Modal
          maskClosable={false}
          visible={this.state.visible}
          onOk={this.nextCancel}
          onCancel={this.nextCancel}
          width="800px"
          title={"项目任务详情"}
          footer=""
          className="admin-desc-content"
        >
          <Form layout="horizontal" id="demand-form">
            <div className="clearfix">
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="项目名称"
              >
                <span>{this.state.commodityName}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="项目数量"
              >
                <span>{this.state.commodityQuantity}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="金额(万元)"
              >
                <span>{this.state.commodityPrice}</span>
              </FormItem>
              <FormItem
                className="half-item"
                {...formItemLayout}
                label="主要项目"
              >
                <span>{getboutique(this.state.main)}</span>
              </FormItem>
              <div className="clearfix">
                <FormItem
                  labelCol={{ span: 4 }}
                  wrapperCol={{ span: 16 }}
                  label="服务说明"
                >
                  <span>{this.state.taskComment}</span>
                </FormItem>
              </div>
            </div>
          </Form>
        </Modal>
      </div>
    );
  }
}

export default OrderDetail;