import React from "react";
import $ from "jquery/src/ajax";
import moment from "moment";
import {
  Button,
  Form,
  Input,
  Spin,
  Table,
  Select,
  message,
  Tabs,
  DatePicker,
  Modal,
  Tooltip,
  Tag,
} from "antd";
import { ChooseList } from "../../order/orderNew/chooseList";
import { ShowModal, getAccountName, getSecondaryAccountName, getClockState } from "../../../tools"
import { accountType, accountStatus } from "@/dataDic";
import ShowModalDiv from "@/showModal.jsx";
import OrderDetail from '../../order/orderNew/changeComponent/orderDetail';
import './index.less';

const FormItem = Form.Item;
const { RangePicker } = DatePicker;
const { TabPane } = Tabs;

const AccountTotal = React.createClass({

  getInitialState() {
    return {
      searchValues: {
        targetType: 1
      }, // 列表筛选条件
      loading: false, //加载动画
      changeList: undefined, // 更改后的表格显示数据
      dataSource: [], // 列表数据
      departmentArr: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "合同/客户",
          dataIndex: "contractNo",
          key: "contractNo",
          render: (text, record) => {
            return (
              this.state.searchValues["targetType"] == 1 ?
                <span>
                  <span style={{ color: record.bidType == 1 && 'red' }}>{text}</span>
                  {" / " + record.buyerName}
                </span>
                : <span>{record.depName}</span>
            );
          },
        },
        {
          title: "公出/实际/超出（时）",
          dataIndex: "maxDuration",
          key: "maxDuration",
          render: (text, record) => {
            return (
              <div className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.getListC(record.contractNo)
                  this.setState({
                    visibleC: true
                  })
                  // this.tableRowClick(record)
                }}
              >
                {text + " / " + record.actualDuration + " / " + record.exceedDuration}
              </div>
            );
          },
        },
        {
          title: "合同总额/已收款（万元）",
          dataIndex: "totalAmount",
          key: "totalAmount",
          render: (text, record) => {
            return (
              <div
                className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.xiangqing(record.orderNo)
                  this.xiangmu(record.orderNo)
                  this.jiedian(record.orderNo)
                  this.jiedianNew(record.orderNo)
                  this.setState({
                    visibleD: true,
                    orderNo: record.orderNo,
                  })
                }}
              >
                {text + " / " + record.settlementAmount}
              </div>
            );
          },
        },
        {
          title: "报销总额（元）",
          dataIndex: "expenseAmount",
          key: "expenseAmount",
          render: (text, record) => {
            return (
              <div
                className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.tableRowClick(record)
                }}
              >
                {text}
              </div>
            );
          },
        },
        {
          title: "已付成本（万元）",
          dataIndex: "paymentAmount",
          key: "paymentAmount",
          render: (text, record) => {
            return (
              <div
                className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.tableRowClick(record)
                }}
              >
                {text}
              </div>
            );
          },
        },
        {
          title: "报销人数/天数/报销次数",
          dataIndex: "peopleCount",
          key: "peopleCount",
          render: (text, record) => {
            return (
              <div
                className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.tableRowClick(record)
                }}
              >
                {text + " / " + record.days + " / " + record.expenseCount}
              </div>
            );
          },
        },
        {
          title: "报销未审核/驳回次数",
          dataIndex: "notExamine",
          key: "notExamine",
          render: (text, record) => {
            return (
              <div
                className='receiveCount'
                onClick={(e) => {
                  e.stopPropagation();
                  this.tableRowClick(record)
                }}
              >
                {text + " / " + record.rejectCount}
              </div>
            );
          },
        },
      ],
      visible: false,
      columnsA: [
        {
          title: "类型",
          dataIndex: "type",
          key: "type",
          render: (text, record) => {
            return (
              <span>
                {(text == 0 && !record.typeOther)
                  ? getAccountName(record.sonType, record.sonTypeOther)
                  : getSecondaryAccountName(text, record.typeOther)}
              </span>
            );
          },
        },
        {
          title: "报销时间",
          dataIndex: "releaseStart",
          key: "releaseStart",
          render: (text, record) => {
            return (
              <div>
                <div style={{ textAlign: "center" }}>{text}</div>
                <div style={{ textAlign: "center" }}>至</div>
                <div style={{ textAlign: "center" }}>{record.releaseEnd}</div>
              </div>
            );
          },
        },
        {
          title: "工时",
          dataIndex: "duration",
          key: "duration",
        },
        {
          title: "报销金额（元）",
          dataIndex: "amount",
          key: "amount",
          width: 70,
        },
        {
          title: "实报金额（元）",
          dataIndex: "realAmount",
          key: "realAmount",
          width: 70,
        },
        {
          title: "天数",
          dataIndex: "days",
          key: "days",
        },
        {
          title: "报销编号",
          dataIndex: "checkNo",
          key: "checkNo",
        },
        {
          title: "报销合同",
          dataIndex: "contractNo",
          key: "contractNo",
        },
        {
          title: "客户",
          dataIndex: "buyerName",
          key: "buyerName",
        },
        {
          title: "报销人",
          dataIndex: "aname",
          key: "aname",
        },

        {
          title: "财务负责人",
          dataIndex: "financeName",
          key: "financeName",
        },
        {
          title: "报销公司/支付公司",
          dataIndex: "payDepName",
          key: "payDepName",
          render: (text, record) => {
            return (
              <div>
                <div>{record.applyDepName || ""}</div>
                <div>{text || ""}</div>
              </div>
            );
          },
        },
        {
          title: "发起时间",
          dataIndex: "createTimeStr",
          key: "createTimeStr",
        },
        {
          title: "状态",
          dataIndex: "status",
          key: "status",
          render: (text, record) => {
            return (
              <span style={{ color: accountStatus[text].color }}>
                {accountStatus[text].label}
              </span>
            );
          },
        },
      ],
      dataSourceA: [],
      columnsC: [
        {
          title: "编号",
          dataIndex: "key",
          key: "key",
          width: 45,
          fixed: "left",
        },
        {
          title: "客户名称",
          dataIndex: "userName",
          key: "userName",
          width: 150,
          fixed: "left",
          render: (text, record) => {
            return (
              <div>
                <div>{text}</div>
                <div style={{ color: ["red", "green"][record.signBills] }}>
                  {["未签单", "已签单"][record.signBills]}
                  {record.signBills == 1 && `（${record.signTime}）`}
                </div>
              </div >
            );
          },
        },
        {
          title: "公出地点",
          dataIndex: "districtName",
          key: "districtName",
          width: 120,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "跟单人",
          dataIndex: "sname",
          key: "sname",
          width: 90,
          render: (text, record) => {
            return (
              <Tooltip title={text}>
                <div>{text}</div>
              </Tooltip>
            );
          },
        },
        {
          title: "公出人员",
          dataIndex: "aname",
          key: "aname",
          width: 190,
          render: (text, record) => {
            return (
              <Tooltip title={text}>
                <div>
                  <p style={{ color: "red" }}>[ 打卡人：{text} ]</p>
                  {record.assist !== 0 && <p style={{ color: "#8552A1" }} >[ 协单人：{record.assistAidName}]</p>}
                  {!!record.assistantName && <p style={{ color: "#228fbd" }} >[ 协单助手：{record.assistantName}]</p>}
                </div>
              </Tooltip>
            );
          },
        },
        {
          title: "申请时间",
          dataIndex: "createTimes",
          key: "createTimes",
          width: 80,
        },
        {
          title: "公出时间",
          dataIndex: "releaseStarts",
          key: "releaseStarts",
          width: 130,
          render: (text, record) => (
            <div>
              <div>{text}</div>
              <div style={{ paddingLeft: "44px" }}>至</div>
              <div>{record.releaseEnds}</div>
            </div>
          ),
        },
        {
          title: "公出时长(时)",
          dataIndex: "duration",
          key: "duration",
          width: 50,
        },
        {
          title: "打卡时间",
          dataIndex: "clockInTimes",
          key: "clockInTimes",
          width: 80,
          render: (text, record) => (
            <span>
              <div style={{ width: 70 }}>{text}</div>
              {record.alone == 2 && record.assist == 1
                ? <Tag color="#58a3ff">无需打卡</Tag>
                : <Tag color={["#F21212", "#34DE38", "#ffd400"][record.clockIn]}>{["未打卡", "已打卡", "异常打卡"][record.clockIn]}</Tag>}
            </span>
          )
        },
        {
          title: "标签",
          dataIndex: "status",
          key: "status",
          width: 200,
          render: (text, record) => (
            <div>
              <div style={{ display: "flex", flexDirection: "row" }}>
                <Tag
                  color={["#45b97c", "#69541b", "#f47920", "#8552a1", "#228fbd"][record.type]}
                >
                  {
                    record.type === 0
                      ? "业务公出" : record.type === 1
                        ? "技术公出" : record.type === 2
                          ? "行政公出" : record.type === 3
                            ? "技术协单" : record.type === 4
                              ? "协单助手" : ""
                  }
                </Tag>
                <Tag color={getClockState(text).color}>
                  {getClockState(text).title}
                </Tag>
                {record.updateStatus == 1 && <Tag color="#1E90FF">改</Tag>}
              </div>
              {record.type === 1 && <div style={{ marginTop: 5 }}>{record.contractNo}</div>}
              {record.type === 1 && <div>{record.totalAmout + "(万元)"}</div>}
            </div>
          ),
        },
        {
          title: "公出目标",
          dataIndex: "remarks",
          key: "remarks",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "公出计划",
          dataIndex: "plan",
          key: "plan",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "预计效果",
          dataIndex: "expectedEffect",
          key: "expectedEffect",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "本次公出目标总结",
          dataIndex: "supplement",
          key: "supplement",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "下一次公出计划",
          dataIndex: "nextPlan",
          key: "nextPlan",
          width: 280,
          render: (text) => {
            return (
              <div>{text}</div>
            );
          },
        },
        {
          title: "审核/指导",
          dataIndex: "auditInfo",
          key: "auditInfo",
          width: 200,
          render: (text, record) => {
            return <div style={{ wordBreak: "break-all" }} >
              {record.auditTimes && `审核时间：${record.auditTimes}`}
              {text}
            </div >;
          },
        },
      ],
      dataSourceC: [],
      paginationC: {
        defaultCurrent: 1,
        defaultPageSize: 9999,
        showQuickJumper: true,
        pageSize: 9999,
        onChange: function (page) {
          this.getListC(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      visibleC: false,
      visibleD: false,
    };
  },

  componentWillMount() {
    this.departmentList();
    this.loadData();
  },

  // 列表接口
  loadData(pageNo) {
    const { searchValues, pagination } = this.state;
    this.setState({
      loading: true,
    });
    let datas = Object.assign(searchValues, {
      // pageNo: pageNo || 1,
      // pageSize: pagination.pageSize,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseCounts/getCounts",
      data: datas,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data) {
            pagination.current = data.data.pageNo;
            pagination.total = data.data.totalCount;
            if (data.data && data.data && !data.data.length) {
              pagination.current = 0;
              pagination.total = 0;
            }
            this.setState({
              dataSource: data.data,
              pagination: this.state.pagination,
              pageNo: data.data.pageNo,
              totalAmount: data.data.totalAmount,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  // 公出信息
  getListC(contractNo) {
    const { paginationC, } = this.state;
    this.setState({
      loading: true,
    });

    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/release/publicReleaseAndCount",
      data: {
        pageNo: 1,
        pageSize: paginationC.pageSize,
        statusType: 1,
        contractNo,
      },
      success: function (data) {
        setTimeout(() => {
          this.setState({
            loading: false,
          });
        }, 300);
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            paginationC.current = data.data.pageNo;
            paginationC.total = data.data.totalCount;
            if (data.data && data.data.list && !data.data.list.length) {
              paginationC.current = 0;
              paginationC.total = 0;
            }
          }
          this.setState({
            dataSourceC: data.data.list,
            paginationC: this.state.paginationC,
            pageNoC: data.data.pageNo,
            peopleCount: data.data.peopleCount,
            count: data.data.count,
            durationCount: data.data.durationCount,
          });
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {

      }.bind(this)
    );
  },

  addRowColor(record) {
    if (record.assist === 1 || record.assist === 2 || record.assist === 3) {
      return 'light'
    } else {
      return 'dark'
    }
  },

  departmentList() {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id
            });
          });
        }
        this.setState({
          departmentArr: theArr
        });
      }.bind(this)
    }).always(
      function () {

      }.bind(this)
    );
  },
  // 搜索
  search() {
    this.loadData();
  },
  // 重置
  reset() {
    this.setState({
      searchValues: {
        targetType: 1
      },
    }, () => {
      this.loadData();
    })
  },

  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach((item) => {
      arr.forEach((val) => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr,
    });
  },

  export() {
    this.setState({
      exportExecLoading: true
    })
    let loading = message.loading('加载中...');
    let data = this.state.searchValues;
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseCounts/getCounts/Export",
      data,
      success: function (data) {
        if (data.error.length === 0) {
          this.download(data.data);
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(function () {
      loading();
      this.setState({
        exportExecLoading: false
      })
    }.bind(this));
  },
  // 下载
  download(fileName) {
    window.location.href = globalConfig.context + "/open/download?fileName=" + fileName
  },
  // 清理缓存
  getCountsClear() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseCounts/getCountsClear",
      data: {},
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          message.success("清除成功！")
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },

  tableRowClick(e) {
    this.setState({
      visible: true,
      contractNo: e.contractNo,
    }, () => {
      this.getListA()
    })
  },

  getListA() {
    this.setState({
      loading: true,
    });
    let data = {
      pageNo: 1,
      pageSize: 9999,
      contractNo: this.state.contractNo,
    };
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/expenseAccount/detailsList",
      data: data,
      success: function (data) {
        ShowModal(this);
        this.setState({
          loading: false,
        });
        if (data.error && data.error.length === 0) {
          if (data.data.list) {
            this.setState({
              dataSourceA: data.data.list,
              totalAmountA: data.data.totalAmount,
            });
          }
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //订单详情
  xiangqing(orderNos) {
    this.setState({
      orderData: {}
    }, () => {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/newOrder/getOrderNewDetail",
        data: {
          orderNo: orderNos
        },
        success: function (data) {
          if (data.error.length || data.data.list == "") {
            if (data.error && data.error.length) {
              message.warning(data.error[0].message);
            }
          } else {
            let thisdata = data.data;
            this.setState({
              orderUid: thisdata.uid,
              userName: thisdata.userName,
              primaryOrderNo: thisdata.primaryOrder,
              additionalOrder: thisdata.additionalOrder,
              contractNo: thisdata.contractNo,
              // arrears: thisdata.arrears,
              orderData: thisdata,
              isAddition: thisdata.additionalOrder ? true : false,
              deleteSign: thisdata.deleteSign,
            });
          }
        }.bind(this)
      });
    });
  },
  //项目列表
  xiangmu(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/getOrderTask",
      data: {
        orderNo: orderNos
      },
      success: function (data) {
        let theArr = [];

        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            thisdata.key = i;
            thisdata.sort = thisdata.cSort;
            theArr.push(thisdata);
          }
        }
        this.setState({
          dataSourceX: theArr
        });
      }.bind(this)
    });
  },
  //节点列表
  jiedian(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/newOrder/selectOrderDun",
      data: {
        orderNo: orderNos
      },
      success: function (data) {
        let theArr = [];
        let thisData = [];
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            thisData = data.data[i];
            theArr.push({
              key: i,
              dunSubject: thisData.dunSubject
                ? thisData.dunSubject.toString()
                : "", //催款科目
              id: thisData.id, //节点Id
              money: thisData.money, //催款金额
              dunStatus: thisData.dunStatus //催款状态
            });
          }
          this.setState({
            contactList: theArr
          });
        }
      }.bind(this)
    });
  },
  jiedianNew(orderNos) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url:
        globalConfig.context + "/api/admin/newOrderDun/selectListNewOrderDun",
      data: {
        orderNo: orderNos
      },
      success: function (data) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        } else {
          let theArr = [];
          let thisData = [];
          let arr = data.data || [];
          let totalCui = 0;
          for (let i = 0; i < arr.length; i++) {
            thisData = arr[i];
            totalCui += +thisData.money;
            theArr.push({
              key: i,
              dunSubject: thisData.dunSubject
                ? thisData.dunSubject.toString()
                : "", //催款科目
              id: thisData.id, //节点Id
              money: thisData.money, //催款金额
              // orderNo: record ? record.orderNo : this.props.datauser.orderNo,
              commodityName: thisData.commodityName,
              projectType: thisData.projectType,
              dunTypeName: thisData.dunTypeName,
              status: thisData.status,
              waitDay: thisData.waitDay,
              effectiveCount: thisData.effectiveCount,
              startDate: thisData.startDate,
              dunType: thisData.dunType,
              appropriationRatio: thisData.appropriationRatio,
              customizeName: thisData.customizeName,
              customizeTimes: thisData.customizeTimes,
              tid: thisData.tid,
            });
          }
          if (!totalCui) {
            totalCui = 0;
          }
          totalCui = (Math.round(totalCui * 1000000) / 1000000).toFixed(6);
          this.setState({
            contactListNew: theArr,
            totalCui
          });
        }
      }.bind(this)
    }).always(
      function () {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  getOrderLog(orderNo) {
    this.setState({
      rizhivisible: true
    });
    this.rizhi(orderNo);
  },
  rizhi(orderNo) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: "/api/admin/newOrder/selectOrderLog",
      data: {
        orderNo: orderNo
      },
      success: function (data) {
        let theArr = [];
        let thisData = data.data;
        if (!thisData.length) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thisData = {};
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            theArr.push({
              processName: thisdata.processName,
              adminName: thisdata.adminName,
              createDate: thisdata.createDate,
              remarks: thisdata.remarks
            });
          }
        }
        this.setState({
          dataSourcerizhi: theArr
        });
      }.bind(this)
    });
  },

  render() {
    const { searchValues, } = this.state
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>报销总计</span>
        </div>
        <Tabs defaultActiveKey="2" className="test">
          <TabPane tab="搜索" key="2">
            <div className="user-search" style={{ marginLeft: 10 }}>
              <Select placeholder="" style={{ width: 140 }}
                value={searchValues["targetType"]}
                onChange={(e) => {
                  searchValues["targetType"] = e;
                  const _this = this;
                  this.setState({
                    searchValues: searchValues,
                  }, () => {
                    _this.search()
                  });
                }}
              >
                <Select.Option value={0} >部门</Select.Option>
                <Select.Option value={1} >订单</Select.Option>
              </Select>
              {
                searchValues["targetType"] == 1 &&
                <Input
                  placeholder="合同编号"
                  value={searchValues["contactNo"]
                    ? searchValues["contactNo"]
                    : ""}
                  onChange={(e) => {
                    searchValues["contactNo"] = e.target.value;
                    this.setState({
                      searchValues: searchValues,
                    });
                  }}
                />
              }
              <Input
                placeholder="客户名称"
                value={searchValues["buyerName"]
                  ? searchValues["buyerName"]
                  : ""}
                onChange={(e) => {
                  searchValues["buyerName"] = e.target.value;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              />
              <Select
                placeholder="所属部门"
                style={{ width: 200, marginRight: 10 }}
                value={searchValues["depId"]
                  ? searchValues["depId"]
                  : undefined}
                onChange={e => {
                  searchValues["depId"] = e;
                  this.setState({
                    searchValues: searchValues,
                  });
                }}
              >
                {this.state.departmentArr.map(function (item) {
                  return <Select.Option key={item.id}>{item.name}</Select.Option>;
                })}
              </Select>
              <span>报销时间：</span>
              <RangePicker
                style={{ width: 300 }}
                value={[
                  searchValues.startTime ? moment(searchValues.startTime) : null,
                  searchValues.endTime ? moment(searchValues.endTime) : null,
                ]}
                onChange={(data, dataString) => {
                  this.setState({
                    searchValues: Object.assign(searchValues, {
                      startTime: dataString[0],
                      endTime: dataString[1],
                    }),
                  });
                }}
              />
              <Button
                type="primary"
                onClick={this.search}
                style={{ margin: "0 10px" }}
              >搜索</Button>
              <Button onClick={this.reset}>重置</Button>
              <Button
                type="primary"
                onClick={this.getCountsClear}
                style={{ marginLeft: 10 }}
              >清理缓存</Button>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="1">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
          <TabPane tab="导出" key="3">
            <div style={{ float: "left" }}>
              <Button
                type="primary"
                loading={this.state.exportPendingLoading}
                onClick={this.export}
                style={{ margin: 10 }}
              >
                导出excel
              </Button>
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              bordered
              columns={
                this.state.changeList == undefined
                  ? this.state.columns
                  : this.state.changeList
              }
              dataSource={this.state.dataSource}
              pagination={false}
              size="small"
            />
          </Spin>
        </div>
        <Modal
          visible={this.state.visible}
          maskClosable={false}
          footer={false}
          width={1400}
          onCancel={() => { this.setState({ visible: false }) }}
        >
          <Spin spinning={this.state.loading}>
            <Table
              columns={this.state.columnsA}
              dataSource={this.state.dataSourceA}
              bordered
              size="middle"
              pagination={false}
            />
          </Spin>
        </Modal>
        {
          this.state.visibleD &&
          <Modal
            title="订单详情"
            visible={this.state.visibleD}
            maskClosable={false}
            footer={false}
            width={1200}
            onCancel={() => { this.setState({ visibleD: false }) }}
          >
            <OrderDetail
              orderData={this.state.orderData}
              orderUid={this.state.orderUid}
              getOrderLog={this.getOrderLog}
              dataSourceX={this.state.dataSourceX}
              contactList={this.state.contactList}
              orderNo={this.state.orderNo}
              totalCui={this.state.totalCui}
              contactListNew={this.state.contactListNew}
            />
          </Modal>
        }
        <Modal
          title="公出详情"
          visible={this.state.visibleC}
          maskClosable={false}
          footer={false}
          width={1400}
          onCancel={() => { this.setState({ visibleC: false }) }}
        >
          <Spin spinning={this.state.loading}>
            <Table
              scroll={{ x: "120%" }}
              columns={this.state.columnsC}
              dataSource={this.state.dataSourceC}
              bordered
              size="middle"
              pagination={false}
              rowClassName={this.addRowColor}
            />
          </Spin>
        </Modal>
      </div>
    );
  },
});

export default AccountTotal;