import React, { Component } from "react";
import { Form, Upload, Modal, Button, Table, Col, message, Tag, Tooltip } from "antd";
import {
  splitUrl,
  getProcessStatus,
  getjiedian,
  getLiquidationStatus,
  getboutique,
  getCuikuan,
  getApprovedState,
  getProjectStatus
} from "@/tools.js";
import img from "./img.png"
import ResolutionDetail from "@/resolutionDetail";
import ImgList from "../../../../common/imgList";
import { getProjectName } from "../../../../tools";
import { salesList } from "@/dataDic.js";
import ProjectDetailsReadOnly from "../../../../common/projectDetailsReadOnly";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import OrderCoor from "./orderCoor"
import ContentUrl from "../contentUrl";
const FormItem = Form.Item;
class OrderDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      dataInfor: {},
      contentUrl: [],
      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>;
              }
            }
            if (!str) {
              return <span>未知</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) {
                let percent = Number(record.appropriationRatio * 100).toFixed(2);
                percent += "%";
                return <span>{percent}(拨款比例)</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 <span>{text}<span style={{ color: "red" }}>{record.patentTypeName}</span>{"-" + record.id}</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",
          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 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 (
              !!text && JSON.parse(text).map(item =>
                <div>{item}</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={{
                    width: 100,
                    overflow: "hidden",
                    whiteSpace: "nowrap",
                    textOverflow: "ellipsis",
                  }}
                >{text}</div>
              </Tooltip>
            )
          }
        }
      ],
      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({
      dataInfor: record,
      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() {
    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() {
    let domId = this.props.domId;
    domId = domId ? domId.substr(0, 4) : ''
    // console.log(typeof domId);

    const formItemLayout = {
      labelCol: { span: 8 },
      wrapperCol: { span: 14 }
    };
    const data = this.props.orderData;
    const propsList = this.props.contactList || [];
    return (
      <div className="clearfix">
        {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>
          <EnterpriseNameChange
            type='journal'
            style={{ marginLeft: 10 }}
            enterpriseId={this.props.orderUid} />
        </FormItem>
        <FormItem
          className="half-item"
          {...formItemLayout}
          label="销售类型"
        >
          <span>
            {(["私有客户-", "签单客户-"][data.userType] || " ") +
              (salesList[data.salesType] || "")}
            {
              data.other != null && data.other != "" &&
              <Tooltip title={data.other}>
                <span>
                  {"(" + data.other.toString().slice(0, 10) + (data.other.toString().length > 9 ? "...)" : ")")}
                </span>
              </Tooltip>
            }
          </span>

          {/* <span>{(["私有客户-", "签单客户-"][data.userType] || " ") +
            (salesList[data.salesType] || "")}</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="合同扫描件"
          >
            {this.props.orderData && data.contractPictureUrl ?
              <ImgList
                domId={this.props.domId ? this.props.domId : 'orderDetail1'}
                fileList={
                  data.contractPictureUrl ? splitUrl(data.contractPictureUrl, ",", globalConfig.avatarHost + "/upload") : []
                }
              /> :
              <div />
            }
            <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,*/}
            {/*    });*/}
            {/*  }}*/}
            {/*/>*/}
            <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
              <ImgList
                domId={this.props.domId ? this.props.domId + '1' : 'orderDetail2'}
                fileList={
                  data.agreementUrl ? splitUrl(data.agreementUrl, ",", globalConfig.avatarHost + "/upload") : []
                } />
            </div>
            <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>
        <ContentUrl
          processStatus={1}
          domId={"orderContent"}
          contentUrl={data.serviceContent ? splitUrl(data.serviceContent, ",", globalConfig.avatarHost + "/upload") : []}
          imgId={"orderImg1x"}
        //  getContentUrl = {this.getContentUrl}
        />
        <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>
        {domId == 'yuan' ? "" : <OrderCoor orderNo={this.props.orderNo} />}
        <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}
            style={{
              cursor: 'pointer',
            }}
            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>
        {this.state.visible &&
          <ProjectDetailsReadOnly
            infor={this.state.dataInfor}
            visible={this.state.visible}
            onCancel={this.nextCancel}
          />}
      </div>
    );
  }
}

export default OrderDetail;