import React, { Component } from "react";
import { Form, Input, Button, message, Modal, Spin, Table, Radio, Select, AutoComplete } from "antd";
import {
  ShowModal, splitUrl, getAccountName, getSecondaryAccountName,
  getVehicleName, getTypeName, commonAdd, dealBigMoney
} from "../../../tools"
import ImgList from "../../../common/imgList";
import ReactToPrint from "react-to-print";
import Print from 'react-print-html';
import moment from "moment";
import $ from "jquery/src/ajax";
import './accountReview.less';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class AccountDetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      editA: "",
      isTable: true,
      sloading: false,
      loading: false,
      visible: "",
      data: {},
      logvisible: false,
      logdataSour: [],
      logcolumns: [
        {
          title: "审核人",
          dataIndex: "auditorName",
          key: "auditorName"
        },
        {
          title: "操作",
          dataIndex: "status",
          key: "status",
          width: 120,
          render: (text, record) => {
            return (
              <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][text] }}>
                {["【发起】", "【通过】", "【完成】", "【驳回】", "【撤销】", "【修改】"][text]}
                {this.state.processStatus == record.processStatus && !record.id &&
                  <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
              </span>
            );
          },
        },
        {
          title: "操作时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
          width: 88,
        },
        {
          title: "备注",
          dataIndex: "remarks",
          key: "remarks",
          render: (text, record) => {
            return (
              <div style={{ minWidth: 250 }}>{text}</div>
            )
          }
        }
      ],
      columns: [
        {
          title: "序号",
          dataIndex: "a",
          key: "a",
          width: 40,
          render: (text, record, index) => {
            return (
              <div>{index + 1}</div>
            )
          }
        },
        {
          title: "费用时间",
          dataIndex: "agreeTime",
          key: "agreeTime",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{record.types == 1
                ? (moment(record.releaseStart).format("YYYY-MM-DD HH:mm") + " 至 " + moment(record.releaseEnd).format("YYYY-MM-DD HH:mm")) : !!text
                  ? text : record.startTime}</div>
            )
          }
        },
        {
          title: "时长",
          dataIndex: "duration",
          key: "duration",
          width: 40,
          render: (text, record) => {
            return (
              <div>{record.types == 1 ? text : ""}</div>
            )
          }
        },
        {
          title: "出差地址",
          dataIndex: "districtName",
          key: "districtName",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "出差企业",
          dataIndex: "userNames",
          key: "userNames",
          width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "合同编号",
          dataIndex: "contractNo",
          key: "contractNo",
          width: "8%",
          render: (text, record) => {
            return (
              <div
                style={{ minHeight: "15px", cursor: record.types == 1 && "pointer" }}
                onClick={() => {
                  this.setState({
                    editA: "contractNo",
                    editTit: "修改合同编号",
                    upId: record.erid,
                    // upUserNames: record.userNames,
                  })
                }}
              >{text}</div>
            )
          }
        },
        {
          title: "类型",
          dataIndex: "types",
          key: "types",
          width: "6%",
          render: (text, record) => {
            return (
              <div style={{ color: record.publicReleaseType != null && "red", cursor: text == 0 && "pointer" }}
                onClick={() => {
                  text == 0 &&
                    this.setState({
                      editA: "typesOther",
                      editTit: "修改其他类型说明",
                      upId: record.erid,
                      upTypesOther: record.typesOther,
                    })
                }}
              >
                {getAccountName(text, record.typesOther)}
              </div>
            )
          }
        },
        {
          title: "详细",
          dataIndex: "cost",
          key: "cost",
          width: "8%",
          render: (text, record) => {
            return (
              <div
                style={{ cursor: !text && !record.vehicle && record.type != 1 && "pointer" }}
                onClick={() => {
                  !text && !record.vehicle && record.type != 1 &&
                    this.setState({
                      editA: "detTypeOther",
                      editTit: "修改其他详细说明",
                      upId: record.id,
                      detTypeOther: record.typeOther,
                    })
                }}
              >{!!text ? text : (!!record.vehicle && record.type == 1 ? (
                getVehicleName(record.vehicle, record.vehicleOther) +
                "(" + record.startDistrict + " - " + record.endDistrict + ")"
              ) : getTypeName(record.type, record.typeOther))}</div>
            )
          }
        },
        {
          title: "费用",
          dataIndex: "amount",
          key: "amount",
          width: "5%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "实报",
          dataIndex: "realAmount",
          key: "realAmount",
          width: "5%",
          render: (text, record) => {
            return (
              <div style={{ color: "red", cursor: !record.noEdit && this.props.isOperate && "pointer" }}
                onClick={() => {
                  !record.noEdit && this.props.isOperate &&
                    this.setState({
                      editA: "amount",
                      editTit: "修改金额",
                      upAmount: text,
                      upId: record.id,
                    })
                }}
              >{text}</div>
            )
          }
        },
        {
          title: "出差事由",
          dataIndex: "plan",
          key: "plan",
          // width: "10%",
          render: (text, record) => {
            return (
              <div>{text}</div>
            )
          }
        },
        {
          title: "报销订单/部门",
          dataIndex: "orderNo",
          key: "orderNo",
          // width: "10%",
          render: (text, record) => {
            return (
              <div>
                <div>{text}</div>
                <div>{record.applyDepName}</div>
              </div>
            )
          }
        },
        // {
        //   title: "报销事由",
        //   dataIndex: "remarks",
        //   key: "remarks",
        //   // width: "10%",
        //   render: (text, record) => {
        //     return (
        //       <div>{text}</div>
        //     )
        //   }
        // },
      ]
    };
  }

  componentDidMount() {
    const { id } = this.props
    !!id && this.getDetails(id)
  }

  // 报销信息详情
  getDetails(id) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/mainExpense",
      data: { id, },
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error.length === 0) {
          let allData = data.data;
          let allList = [];
          for (var i = 0; i < allData.sonList.length; i++) {
            let dlist = allData.sonList[i].detList
            for (var j = 0; j < dlist.length; j++) {
              let obj = dlist[j]
              allData.sonList[0].detList[0].applyDepName = allData.applyDepName; // 部门
              allData.sonList[0].detList[0].remarks = allData.remarks; // 报销事由
              dlist[0].contractNo = allData.sonList[i].contractNo; // 合同编号
              dlist[0].orderNo = allData.sonList[i].orderNo; // 订单号
              dlist[0].releaseStart = allData.sonList[i].releaseStart;
              dlist[0].releaseEnd = allData.sonList[i].releaseEnd; // 公出时间
              dlist[0].duration = allData.sonList[i].duration;  // 费用时间
              dlist[0].districtName = allData.sonList[i].districtName; // 出差地址
              dlist[0].userNames = allData.sonList[i].userNames; // 出差企业
              dlist[0].plan = allData.sonList[i].plan; // 出差事由
              dlist[0].publicReleaseType = allData.sonList[i].publicReleaseType; // 公出关联
              dlist[0].types = allData.sonList[i].type; // 报销类型
              dlist[0].erid = allData.sonList[i].id; // 二级报销id
              dlist[0].typesOther = allData.sonList[i].typeOther;
              if (allData.sonList[i].type == 2) { // 非业务报销
                obj.type = allData.sonList[i].secondaryType;
                obj.typeOther = allData.sonList[i].secondaryTypeOther;
              } else if (allData.sonList[i].type == 3 || allData.sonList[i].type == 0) { // 第三方付款 其他
                obj.cost = "费用"
              } else if (allData.sonList[i].type == 4) { // 申请借支
                obj.cost = "借支费用"
              } else if (allData.sonList[i].type == 4) { // 申请抵扣
                obj.cost = "抵扣费用"
              }

              allList.push(obj)
            }
            allData.sonList[i].settlementAmount != 0 &&
              allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "抵扣", amount: allData.sonList[i].settlementAmount, realAmount: " " })
            allList.push({ noEdit: true, id: allData.sonList[i].id, cost: "小计", amount: allData.sonList[i].amount, realAmount: allData.sonList[i].realAmount })
          }
          allList.push({ noEdit: true, id: allData.id, cost: "合计", amount: allData.amount, realAmount: allData.realAmount })
          this.setState({
            data: data.data,
            newList: allList,
          })
          // this.setState({
          //   data: data.data,
          //   imgs: data.data.attachmentUrl
          //     ? splitUrl(data.data.attachmentUrl, ",", globalConfig.avatarHost + "/upload")
          //     : [],
          // })
          // this.getAccountList(id)
          this.getLogData(id)
        } else {
          message.warning(data.error[0].message)
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  }

  // 报销费用详情
  // getAccountList(eaid) {
  //   const { data } = this.state
  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + "/api/admin/expenseAccount/details/list",
  //     data: { eaid, },
  //     success: function (datas) {
  //       if (datas.error.length === 0) {
  //         let sum = 0
  //         for (var i = 0; i < datas.data.length; i++) {
  //           sum = commonAdd(sum, datas.data[i].amount)
  //         }
  //         let leftList = JSON.parse(JSON.stringify(datas.data)) || []
  //         let jsonArray = []
  //         if (data.type != 4 && data.type != 5 && data.debitTotalAmount) {
  //           leftList.push({ "other": "预借支", "amount": data.debitTotalAmount },)
  //         }
  //         if (data.type != 4 && data.type != 5) {
  //           leftList.push(
  //             { "other": "总金额", "amount": sum },
  //             { "other": "实报金额", "amount": (sum > data.debitTotalAmount) ? commonAdd(sum, -data.debitTotalAmount) : 0 })
  //         }
  //         if (data.type == 1) {
  //           // 差旅费
  //           jsonArray = [
  //             { "head": `支付公司：${data.payDepName}` },
  //             { "head": `事由：${data.remarks}` },
  //             { "head": `公出企业：${data.userNames}` },
  //             { "head": `公出地点：${data.districtName}` },
  //             { "head": `时间：${moment(data.releaseStartStr).format('YYYY-MM-DD HH:mm') + " 至 " + moment(data.releaseEndStr).format('YYYY-MM-DD HH:mm')}` },
  //             { "head": `公出时长：${data.duration}` },
  //           ]
  //         } else if (data.type == 3) {
  //           // 第三方付款
  //           jsonArray = [
  //             { "head": `支付公司：${data.payDepName}` },
  //             { "head": `事由：${data.remarks}` },
  //           ]
  //         } else {
  //           // 通用
  //           jsonArray = [
  //             { "head": `事由：${data.remarks}` },
  //           ]
  //         }
  //         let newArray = []
  //         if (jsonArray.length >= leftList.length) {
  //           for (var i = 0; i < leftList.length; i++) {
  //             jsonArray[i] = Object.assign(jsonArray[i], leftList[i])
  //           }
  //           newArray = jsonArray
  //         } else {
  //           for (var i = 0; i < jsonArray.length; i++) {
  //             leftList[i] = Object.assign(jsonArray[i], leftList[i])
  //           }
  //           newArray = leftList
  //         }
  //         newArray.push({}, {})
  //         this.setState({
  //           list: datas.data || [],
  //           newList: newArray,
  //           total: sum,
  //         })
  //       } else {
  //         message.warning(datas.error[0].message);
  //       }
  //     }.bind(this),
  //   }).always(
  //     function () {
  //       this.setState({
  //         loading: false,
  //       });
  //     }.bind(this)
  //   );
  // }

  isHere(list = []) {
    for (var i = 0; i < list.length; i++) {
      if (!list[i].id) {
        this.setState({
          processStatus: list[i].processStatus
        })
        return
      }
    }
  }

  // 日志
  getLogData(eaid) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/log/list",
      data: { eaid },
      success: function (data) {
        if (data.error.length === 0) {
          this.setState({
            logdataSour: data.data || []
          });
          this.isHere(data.data || [])
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    }).always(
      function () {

      }.bind(this)
    );
  }

  // 审核
  toExamine(num) {
    const { checkData, reason } = this.state
    if (!reason) {
      message.warning("请填写审核说明~");
      return;
    }
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/examine",
      data: {
        id: checkData.id,
        reason,
        status: num,//1同意 3驳回
      },
    }).done(
      function (data) {
        if (!data.error.length) {
          message.success("审核成功！");
          this.setState({
            visible: "",
            reason: "",
            showDetails: false,
            checkData: {},
          });
          this.getDetails(this.state.data.id)
          this.getLogData(this.state.data.id)
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  distinct(arr, key) {
    let hash = {};
    let result = [];
    for (let i = arr.length - 1; i >= 0; i--) {
      let value = arr[i][key];
      if (!hash[value]) {
        hash[value] = true;
        result.unshift(arr[i]);
      }
    }
    return result;
  }

  // 修改
  updateRealAmount() {
    const { editA } = this.state
    this.setState({
      upLoading: true,
    })
    if (editA == "typesOther" && !this.state.upTypesOther) {
      message.warn("其他类型说明不能为空！");
      return
    }
    if (editA == "remarks" && !this.state.upRemarks) {
      message.warn("报销事由不能为空！");
      return
    }
    if (editA == "contractNo" && !this.state.upOrderNo) {
      message.warn("请选择合同编号！");
      return
    }
    if (editA == "detTypeOther" && !this.state.detTypeOther) {
      message.warn("其他类型说明不能为空！");
      return
    }
    let obj1 = {
      id: this.state.upId,
      amount: this.state.upAmount,
    }
    let obj2 = {
      id: this.state.upId,
      remarks: this.state.upRemarks,
    }
    let obj3 = {
      id: this.state.upId,
      typeOther: this.state.upTypesOther,
    }
    let obj4 = {
      id: this.state.upId,
      orderNo: this.state.upOrderNo,
    }
    let obj5 = {
      id: this.state.upId,
      typeOther: this.state.detTypeOther,
    }
    $.ajax({
      method: "POST",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + editA == "amount"
        ? "/api/admin/expenseAccount/updateRealAmount" : editA == "detTypeOther"
          ? "/api/admin/expenseAccount/updateDetailsTypeOther" : "/api/admin/expenseAccount/updateTypeOther",
      data: editA == "amount"
        ? obj1 : editA == "remarks"
          ? obj2 : editA == "typesOther"
            ? obj3 : editA == "contractNo"
              ? obj4 : editA == "detTypeOther" && obj5,
    }).done(
      function (data) {
        this.setState({
          upLoading: false,
        })
        if (!data.error.length) {
          message.success("修改成功！");
          this.setState({
            editA: "",
            upId: "",
            upUserNames: "",
            upUserId: "",
            upList: [],
          });
          this.getDetails(this.state.data.id)
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }
  // 查询合同编号
  selectOrderByUid() {
    this.setState({
      sloading: true
    })
    $.ajax({
      method: "GET",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/release/selectOrderByUid",
      data: {
        uid: this.state.upUserId,
      },
    }).done(
      function (data) {
        this.setState({
          sloading: false
        })
        if (!data.error.length) {
          this.setState({
            upList: data.data
          })
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  }

  // 查询企业
  httpChange(e) {
    this.setState({
      upUserNames: e,
    });
    if (e.length >= 1) {
      this.supervisor(e);
    }
  }
  // 
  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/getUserByNames",
      data: {
        name: e,
        type: 1,
        pageNo: 1,
        pageSize: 10,
      },
      success: function (data) {
        let thedata = data.data;
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        }
        this.setState({
          customerArr: thedata.list,
        });
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  }

  selectAuto(value) {
    const { customerArr } = this.state
    this.setState({
      upUserId: customerArr.find((item) => item.name == value).id,
    });
  }

  render() {
    const { TextArea } = Input
    const { data, visible, newList, logdataSour, columns, customerArr = [] } = this.state
    const { onCancel } = this.props
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 18 },
    };
    const radioStyle = {
      display: 'block',
      height: '30px',
      lineHeight: '30px',
    };
    const options = customerArr.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    return (
      <Modal
        maskClosable={false}
        visible={true}
        onOk={false}
        onCancel={onCancel}
        width={1400}
        title={<span style={{ fontWeight: "bold" }}>报销详情
          <Button
            type="primary"
            style={{ marginLeft: 30 }}
            onClick={() => { this.setState({ isTable: !this.state.isTable }) }}
          >{this.state.isTable ? "切换列表显示" : "切换表格显示"}</Button>
        </span>}
        footer=""
      >
        <Spin spinning={this.state.loading}>
          <div className="m_body"
            ref={ref => {
              this.printTemp = ref;
            }}
          >
            {this.state.isTable
              ? <div className="m_table">
                <div className="m_title">报销明细表</div>
                <div className="m_head">
                  <div>报销编号：{data.checkNo}</div>
                  <div>申请部门：{data.applyDepName}</div>
                  <div>报销人：{data.aname}</div>
                  <div>报销日期：{moment(data.createTimeStr).format('YYYY年MM月DD日')}</div>
                  <div
                    style={{ cursor: "pointer" }}
                    onClick={() => {
                      this.setState({
                        editA: "remarks",
                        editTit: "修改报销事由",
                        upId: data.id,
                        upRemarks: data.remarks,
                      })
                    }}
                  >报销事由：{data.remarks}</div>
                  <div>收款方式：{!data.name ? "" : (data.bank + " " + data.accounts + " " + data.name)}</div>
                </div>
                <Table
                  columns={columns}
                  dataSource={newList}
                  bordered
                  size="middle"
                  pagination={false}
                />
                <div className="m_head">
                  <div style={{ width: "100%", marginTop: 8 }}>审核日志：
                    {
                      this.state.logdataSour.map(item =>
                        item.showStatus == 0 && <span key={item.id}>【{item.auditorName}&nbsp;&nbsp;{item.createTimeStr}&nbsp;&nbsp;{item.remarks}】&nbsp;&nbsp;</span>
                      )
                    }
                  </div>
                </div>
              </div>
              : <Form layout="horizontal" id="demand-form">
                <Spin spinning={this.state.loading}>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销编号"
                    >
                      <span>{data.checkNo}</span>
                    </FormItem>
                  </div>
                  {/* <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="总金额"
                    >
                      <span>{data.totalAmount}</span>
                    </FormItem>
                  </div> */}
                  {/* <div className="clearfix">
                    <FormItem

                      {...formItemLayout}
                      label="报销至订单"
                    >
                      <div>
                        <div>{data.buyerName}</div>
                        <div>{data.contractNo}</div>
                      </div>
                    </FormItem>
                  </div> */}
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销时间"
                    >
                      <span>{data.createTimeStr}</span>
                    </FormItem>
                  </div>
                  {data.type == 1 &&
                    <div>
                      <div style={{ fontSize: 13, fontWeight: "bold" }}>公出信息</div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出企业"
                        >
                          <span>{data.userNames}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出地点"
                        >
                          <span>{data.districtName}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="时间"
                        >
                          <span>{data.releaseStartStr} 至 {data.releaseEndStr}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem

                          {...formItemLayout}
                          label="公出时长"
                        >
                          <span>{data.duration}小时</span>
                        </FormItem>
                      </div>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>报销详细</div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销人"
                    >
                      <span>{data.aname}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="报销公司"
                    >
                      <span>{data.applyDepName}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      {...formItemLayout}
                      label="支付公司"
                    >
                      <span>{data.payDepName}</span>
                    </FormItem>
                  </div>
                  <div className="clearfix">
                    <FormItem
                      labelCol={{ span: 5 }}
                      wrapperCol={{ span: 18 }}
                      label="报销事由"
                    >
                      <p style={{ maxWidth: 500, wordWrap: "break-word" }}>
                        {data.remarks}
                      </p>
                    </FormItem>
                  </div>
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>报销费用详细</div>
                  {
                    data.sonList.map(it =>
                      <div key={it.id} style={{ borderBottom: "1px solid #000" }}>
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="报销金额"
                          >
                            <span style={{ fontWeight: "bold" }}>{it.amount}（元）</span>
                          </FormItem>
                        </div>
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="报销类型"
                          >
                            <span style={{ fontWeight: "bold" }}>
                              {getAccountName(it.type, it.typeOther)}
                              {it.type == 2 && (" - " + getSecondaryAccountName(it.secondaryType, it.secondaryTypeOther))}
                            </span>
                          </FormItem>
                        </div>
                        {
                          !!it.publicReleaseType &&
                          <div className="clearfix">
                            <FormItem
                              {...formItemLayout}
                              label="报销来源"
                            >
                              <span style={{ fontWeight: "bold" }}>
                                {["业务公出", "技术公出", "行政公出", "技术协单", "技术助手"][it.publicReleaseType]}
                              </span>
                            </FormItem>
                          </div>
                        }
                        {
                          !!it.contractNo ?
                            <div className="clearfix">
                              <FormItem
                                {...formItemLayout}
                                label="报销至订单"
                              >
                                <span style={{ fontWeight: "bold" }}>{it.contractNo}</span>
                              </FormItem>
                            </div>
                            : <FormItem
                              {...formItemLayout}
                              label=" "
                            ><span style={{ fontWeight: "bold" }}>报销至部门</span></FormItem>
                        }
                        {/* 差旅费显示 */}
                        {it.type == 1 &&
                          it.detList.map(item =>
                            item.type == 1
                              ? <div>
                                <div className="clearfix" >
                                  <FormItem
                                    {...formItemLayout}
                                    label="交通费"
                                  >
                                    <span>
                                      {getVehicleName(item.vehicle, item.vehicleOther)}
                                      （{item.startDistrict + " - " + item.endDistrict}）
                                      {item.amount}（元）
                                    </span>
                                  </FormItem>
                                </div>
                              </div>
                              : <div className="clearfix" >
                                <FormItem
                                  {...formItemLayout}
                                  label={getTypeName(item.type)}
                                >
                                  <span>{item.amount}（元）</span>
                                </FormItem>
                              </div>
                          )
                        }

                        {/* 通用 */}
                        {(it.type == 0 || it.type == 2 || it.type == 4 || it.type == 5) &&
                          it.detList.map(item =>
                            <div className="clearfix" >
                              {!!item.agreeTimeStr &&
                                <FormItem
                                  {...formItemLayout}
                                  label={it.type == 5 ? "支付时间:" : "需付款时间:"}
                                >
                                  <span>{item.agreeTimeStr.slice(0, 10)}</span>
                                </FormItem>}
                              <FormItem
                                {...formItemLayout}
                                label={it.type == 4
                                  ? "预借支金额:" : it.type == 5
                                    ? "抵扣金额:" : "金额:"}
                              >
                                <span>{item.amount}（元）</span>
                              </FormItem>
                            </div>
                          )
                        }
                        {/* 第三方付款 */}
                        {it.type == 3 &&
                          it.detList.map(item =>
                            <div className="clearfix" >
                              {!!item.agreeTimeStr &&
                                <FormItem
                                  {...formItemLayout}
                                  label="需付款时间"
                                >
                                  <span>{item.agreeTimeStr.slice(0, 10)}</span>
                                </FormItem>
                              }
                              <FormItem
                                {...formItemLayout}
                                label="付款方式"
                              >
                                <span>{["公对公转账"][item.payType]}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="发票类型"
                              >
                                <span>{["普票", "专票"][item.invoiceType]}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="发票号"
                              >
                                <span>{item.invoiceNo}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="付款单位"
                              >
                                <span>{item.payerName}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="开户银行"
                              >
                                <span>{item.openBank}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="银行账户"
                              >
                                <span>{item.bankAccounts}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="开户行地址"
                              >
                                <span>{item.openBankAddress}</span>
                              </FormItem>
                              <FormItem
                                {...formItemLayout}
                                label="金额（元）"
                              >
                                <span>{item.amount}</span>
                              </FormItem>
                            </div>
                          )
                        }
                        {
                          it.settlementAmount != 0 && it.type != 4 && it.type != 5 &&
                          <div className="clearfix">
                            <FormItem
                              {...formItemLayout}
                              label="抵扣金额"
                            >
                              <span>{it.settlementAmount}（元）</span>
                            </FormItem>
                          </div>
                        }
                        <div className="clearfix">
                          <FormItem
                            {...formItemLayout}
                            label="附件"
                          >
                            <div style={{ paddingTop: '10px', paddingBottom: '10px' }}>
                              {!!it.attachmentUrl ? <ImgList domId={it.id} fileList={splitUrl(it.attachmentUrl, ",", globalConfig.avatarHost + "/upload")} ItemWidth={'96px'} /> : <div />}
                            </div>
                          </FormItem>
                        </div>
                      </div>
                    )
                  }

                  {data.type != 4 && data.debitTotalAmount &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="预借支"
                      >
                        <span style={{ color: "red" }}>{data.debitTotalAmount}（元）</span>
                      </FormItem>
                    </div>}
                  {data.type != 4 && data.type != 5 &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="本次报销金额"
                      >
                        <span style={{ color: "red", fontWeight: "bold" }}>{data.amount}（元）</span>
                      </FormItem>
                    </div>}
                  {data.type != 4 && data.type != 5 &&
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="实报金额"
                      >
                        <span style={{ color: "red", fontWeight: "bold" }}>{data.realAmount}（元）</span>
                      </FormItem>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>收款详情</div>
                  {data.type != 3 && data.type != 5 &&
                    <div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款人"
                        >
                          <span>{!!data.name && data.name}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款银行"
                        >
                          <span>{!!data.bank && data.bank}</span>
                        </FormItem>
                      </div>
                      <div className="clearfix">
                        <FormItem
                          {...formItemLayout}
                          label="收款账户"
                        >
                          <span>{!!data.accounts && data.accounts}</span>
                        </FormItem>
                      </div>
                    </div>}
                  <div style={{ fontSize: 13, fontWeight: "bold" }}>审核意见</div>
                  <ul
                    style={{
                      // width: "560px",
                      overflow: "hidden",
                      paddingLeft: "90px",
                      position: "relative",
                    }}
                  >
                    {logdataSour.map((item, index) => {
                      return (
                        <li
                          key={index}
                          style={{
                            width: "100%",
                            height: "auto",
                            wordBreak: "break-all",
                            marginBottom: "10px",
                          }}
                        >
                          <span>{item.auditorName}：</span>
                          <span style={{ color: ["#1D4FEA", "#34DE38", "#108EE9", "red", "#808080", "#1D4FEA"][item.status] }}>
                            {["【发起】，", "【通过】，", "【完成】，", "【驳回】，", "【撤销】，", "【修改】，"][item.status]}
                            {this.state.processStatus == item.processStatus && !item.id && data.status != 0 &&
                              <span style={{ color: "#FFA500" }}>&nbsp;审核中...</span>}
                          </span>
                          <span>{item.remarks}</span>
                          <span>&nbsp;&nbsp;&nbsp;{item.createTimeStr}</span>
                        </li>
                      );
                    })}
                  </ul>

                  <div className="clearfix" style={{ marginTop: 20 }}>
                    <Button
                      type="primary"
                      style={{
                        float: "right",
                      }}
                      onClick={() => {
                        this.setState({
                          logvisible: true
                        })
                        this.getLogData(data.id)
                      }}
                    >
                      查看日志
                    </Button>
                  </div>

                  {false && this.props.isOperate && data.examine == 1 &&
                    <div className="clearfix"
                      style={{ width: 500, margin: "20px auto" }}>
                      <TextArea
                        rows={4}
                        value={this.state.reason}
                        onChange={(e) => {
                          this.setState({
                            reason: e.target.value,
                          })
                        }}
                        placeholder="请填写审核内容"
                      />
                      <div
                        style={{
                          width: 250,
                          display: "flex",
                          justifyContent: "space-between",
                          margin: "20px auto 0"
                        }}
                      >
                        <Button type="primary"
                          style={{ margin: 4 }}
                          onClick={(e) => {
                            this.setState({
                              checkData: data
                            }, () => {
                              this.toExamine(1)
                            })
                          }}
                        >同意</Button>
                        <Button type="danger"
                          style={{ margin: 4 }}
                          onClick={(e) => {
                            this.setState({
                              checkData: data
                            }, () => {
                              this.toExamine(3)
                            })
                          }}
                        >驳回</Button>
                      </div>
                    </div>
                  }
                </Spin>
              </Form>
            }
          </div>
        </Spin>

        <Button
          type="primary"
          style={{
            float: "right",
            marginTop: 10,
            position: "absolute",
            top: 0,
            right: 50,
          }}
          onClick={() => {
            Print(this.printTemp)
          }}
        >
          打印
        </Button>

        {/* <ReactToPrint
          trigger={() => (
            <Button
              type="primary"
              style={{
                float: "right",
                marginTop: 10,
                position: "absolute",
                top: 0,
                right: 50,
              }}
            >
              打印
            </Button>
          )}
          content={() => this.refs.all}
          bodyClass="print-body"
        /> */}

        {
          //审核弹窗
          this.state.visible != "" &&
          <Modal
            width="400px"
            maskClosable={false}
            title="审核"
            confirmLoading={this.state.loading}
            visible={this.state.visible != ""}
            onOk={() => { this.toExamine(visible == "adopt" ? 1 : visible == "reject" && 3) }}
            okText={this.state.visible == "adopt" ? "通过" : this.state.visible == "reject" && "驳回"}
            onCancel={() => {
              this.setState({
                visible: '',
                reason: "",
                checkData: {},
              })
            }}
          >
            <TextArea
              rows={4}
              value={this.state.reason}
              onChange={(e) => {
                this.setState({
                  reason: e.target.value,
                })
              }}
              placeholder="请填写审核内容"
            />
          </Modal>
        }

        {
          // 审核日志
          this.state.logvisible &&
          <Modal
            visible={this.state.logvisible}
            className="admin-desc-content"
            width="800px"
            maskClosable={false}
            title="审核日志"
            footer={null}
            onCancel={() => {
              this.setState({
                logvisible: false,
              })
            }}
          >
            <div className="patent-table">
              <Spin spinning={this.state.loading}>
                <Table
                  columns={this.state.logcolumns}
                  dataSource={this.state.logdataSour}
                  pagination={false}
                  bordered
                  size="small"
                />
              </Spin>
            </div>
          </Modal>
        }
        {
          // 修改
          this.state.editA != "" &&
          <Modal
            visible={this.state.editA != ""}
            maskClosable={false}
            title={this.state.editTit}
            cancelText="取消"
            width={300}
            okText="确认"
            onOk={() => { this.updateRealAmount() }}
            onCancel={() => { this.setState({ editA: "" }) }}
          >
            {
              this.state.editA == "amount" &&
              <Input
                placeholder='请输入'
                type='number'
                value={this.state.upAmount}
                onChange={e => {
                  this.setState({
                    upAmount: e.target.value
                  })
                }}
              />
            }
            {
              this.state.editA == "remarks" &&
              <TextArea
                rows={4}
                value={this.state.upRemarks}
                onChange={(e) => {
                  this.setState({
                    upRemarks: e.target.value,
                  })
                }}
                placeholder="报销事由"
              />
            }
            {
              this.state.editA == "typesOther" &&
              <Input
                placeholder='请填写类型说明'
                value={this.state.upTypesOther}
                onChange={e => {
                  this.setState({
                    upTypesOther: e.target.value
                  })
                }}
              />
            }
            {
              this.state.editA == "contractNo" &&
              <div>
                <div style={{ marginBottom: 20 }}>
                  <AutoComplete
                    className="certain-category-search"
                    dropdownClassName="certain-category-search-dropdown"
                    dropdownMatchSelectWidth={false}
                    style={{ width: 180 }}
                    dataSource={options}
                    placeholder="企业名称"
                    value={this.state.upUserNames}
                    onChange={this.httpChange.bind(this)}
                    filterOption={true}
                    onSelect={this.selectAuto.bind(this)}
                  >
                    <Input />
                  </AutoComplete>
                  <Button
                    disabled={!this.state.upUserId}
                    style={{ marginLeft: 10 }}
                    type="primary"
                    onClick={() => {
                      this.selectOrderByUid()
                    }}>搜索</Button>
                </div>

                <div>
                  <Spin spinning={this.state.sloading}>
                    {
                      !!this.state.upList && this.state.upList.length == 0 &&
                      <div style={{ color: "red", margin: "20px auto", textAlign: "center" }}>该企业暂无订单</div>
                    }
                    <RadioGroup
                      onChange={(e) => {
                        this.setState({
                          upOrderNo: e.target.value
                        })
                      }} value={this.state.upOrderNo}>
                      {
                        !!this.state.upList && this.state.upList.map(item =>
                          <Radio key={item.contractNo} style={radioStyle} value={item.orderNo}>编号：{item.contractNo}</Radio>
                        )
                      }
                    </RadioGroup>
                  </Spin>
                </div>
              </div>
            }
            {
              this.state.editA == "detTypeOther" &&
              <Input
                placeholder='请填写详细说明'
                value={this.state.detTypeOther}
                onChange={e => {
                  this.setState({
                    detTypeOther: e.target.value
                  })
                }}
              />
            }
          </Modal>
        }

      </Modal>
    );
  }
}

export default AccountDetails;
