/*
 * @Author: cclu 1106109051@qq.com
 * @Date: 2024-07-09 09:27:10
 * @LastEditors: cclu 1106109051@qq.com
 * @LastEditTime: 2025-03-31 14:50:08
 * @FilePath: \cloud-platform\src\pages\newDataAnalysis\vehicleOwner\index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { connect } from "umi";
import type { CurrentUser } from "umi";
import type { ConnectState } from "@/models/connect";
import React, { useRef, useState } from "react";
import ProCard from "@ant-design/pro-card";
import { MenuFoldOutlined } from "@ant-design/icons";
import type { FormInstance } from "antd";
import { Drawer, Tooltip } from "antd";
import { Button, message, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import { getServerpartTree } from "@/services/options";
import type { ActionType } from "@ant-design/pro-table";
import ProTable from "@ant-design/pro-table";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
import LeftSelectTree from "@/pages/reports/settlementAccount/component/leftSelectTree";
import { handleGetBayonetOwnerAHTreeList } from "../service";
import moment from 'moment/moment'
import numeral from 'numeral'
import pageData from './data'
import AreaVehicle from "../areaVehicle";
import './style.less'
import session from "@/utils/session";
import PageTitleBox from "@/components/PageTitleBox";
import AiDrawer from "@/components/AiDrawer";
import { handleChangeKeyTo, handleSetPublicLog } from "@/utils/format";


const vehicleOwner: React.FC<{ currentUser: CurrentUser }> = (props) => {
  const { currentUser, route } = props
  const downloadBtnRef = useRef<any>()
  const actionRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();
  const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
  const [printOut, setPrintOut] = useState<any>(); // 打印数据的内容
  const [collapsible, setCollapsible] = useState<boolean>(false)
  const [treeView, setTreeView] = useState<any>()
  const [printIndex, setPrintIndex] = useState<number>(new Date().getTime())
  const [expandedRowKeys, setExpandedRowKeys] = useState<any>(['null-null-undefined-undefined-undefined-undefined-null'])
  // 表格单行columns的展开行
  const [columnsLoading, setColumnsLoading] = useState<boolean>(false)
  // 树相关的属性和方法
  const [selectedId, setSelectedId] = useState<string>()
  // 导出的加载效果
  const [showLoading, setShowLoading] = useState<boolean>(false)
  // 是否显示打印的表格
  const [showExportTable, setShowExportTable] = useState<boolean>(false)
  // 表格的加载
  const [tableLoading, setTableLoading] = useState<boolean>(false)
  // 表格的加载文字
  const [loadingText, setLoadingText] = useState<string>()
  // 拿到点击行的数据
  const [currentRow, setCurrentRow] = useState<any>()
  // 显示详情抽屉
  const [showDetail, setShowDetail] = useState<boolean>(false)
  // 查询的条件
  const [searchParams, setSearchParams] = useState<any>()
  // 表格数据
  const [tableData, setTableData] = useState<any>()
  // 判断打印数据是否已经准备好了
  const [isExportOk, setIsExportOk] = useState<boolean>(true)
  // ai的抽屉
  const [showAiDrawer, setShowAiDrawer] = useState<boolean>(false)

  const paramsSort: any = {
    dataType: "统计类型",
    serverPartId: "服务区内码",
    statisticsStartMonth: "开始日期",
    statisticsEndMonth: "结束日期",
    rankNum: "省份或城市top",
    isSync: "是否异步执行"
  }

  // 拿到headerTitle
  const { loading: headerTitleLoading, data: tableHeaderTitle } = useRequest(async () => {
    const menu = session.get('menu')
    if (menu && menu.length > 0) {
      let obj: any = {}
      menu.forEach((item: any) => {
        if (item.path === route.path) {
          obj = item
        }
      })
      console.log('obj', obj);
      return obj.name || ''
    }
    return ''
  })


  // 修改columns注意要适配 exportColumns 从合计开始 列要跟那边统一
  const columns: any = [
    {
      title: '统计时间',
      dataIndex: 'search_date',
      aiDataIndex: 'statisticsStartDate|statisticsEndDate',
      valueType: 'dateRange',
      hideInTable: true,
      hideInDescriptions: true,
      hideInSearch: false,
      initialValue: [moment().subtract(1, 'month'), moment().subtract(1, 'month')],
      search: {
        transform: (value: any) => {
          return {
            statisticsStartDate: value[0],
            statisticsEndDate: value[1],
          };
        },
      },
      fieldProps: {
        disabledDate: (current: any) => current && !(current > moment().startOf('year') && current < moment().endOf('day').add(-1, 'day')),
        format: 'YYYY-MM',
        picker: "month",
      }
    },
    {
      title: <div style={{ textAlign: 'center' }}>{'中心/服务区'}</div>,
      dataIndex: 'ServerPartName',
      aiDataIndex: 'ServerPartName',
      aiTitle: "中心/服务区",
      hideInDescriptions: true,
      hideInSearch: true,
      fixed: 'left',
      width: 200,
      render: (_, record) => {
        return record?.ServerPartLevel === 0 ? <a onClick={() => {
          setCurrentRow({
            ...record,
            startTime: searchParams?.statisticsStartDate,
            endTime: searchParams?.statisticsEndDate
          })
          console.log('record', {
            ...record,
            startTime: searchParams?.statisticsStartDate,
            endTime: searchParams?.statisticsEndDate
          });

          setShowDetail(true)
        }}>{record?.ProvinceName || record?.ServerPartName || record?.SPRegionTypeNAME || ''}</a> :
          <span>{record?.ProvinceName || record?.ServerPartName || record?.SPRegionTypeNAME || ''}</span>
      }
    },
    {
      title: <div style={{ textAlign: 'center' }}>{'排行'}</div>,
      dataIndex: 'rankNum',
      aiDataIndex: 'rankNum',
      aiTitle: "排行",
      hideInDescriptions: true,
      hideInTable: true,
      valueType: 'select',
      valueEnum: {
        "5": 5,
        "10": 10,
        '': '全部'
      },
      initialValue: "5",
    },
    {
      title: <div style={{ textAlign: 'center' }}>合计</div>,
      dataIndex: 'allSum',
      aiDataIndex: 'allSum',
      aiTitle: "合计",
      hideInDescriptions: true,
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>总量</div>,
          dataIndex: 'TotalCount',
          aiDataIndex: 'TotalCount',
          aiTitle: "总量",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
          // sorter: (a, b) => a.TotalCount - b.TotalCount,
          // defaultSortOrder: 'descend'
        },
        {
          title: <div style={{ textAlign: 'center' }}>总量占比</div>,
          dataIndex: 'TotalCountRatio',
          aiDataIndex: 'TotalCountRatio',
          aiTitle: "总量占比",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
          render: (_, record) => {
            return record?.TotalCountRatio ? `${record?.TotalCountRatio}%` : ''
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>小型车</div>,
          dataIndex: 'LightDutyTotalCount',
          aiDataIndex: 'LightDutyTotalCount',
          aiTitle: "小型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>中型车</div>,
          dataIndex: 'MidSizeTotalCount',
          aiDataIndex: 'MidSizeTotalCount',
          aiTitle: "中型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>大型车</div>,
          dataIndex: 'LargeTotalCount',
          aiDataIndex: 'LargeTotalCount',
          aiTitle: "大型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        }
      ]
    },
    {
      title: <div style={{ textAlign: 'center' }}>东南区</div>,
      aiTitle: "东南区",
      hideInDescriptions: true,
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>小型车</div>,
          dataIndex: 'EastLightDutyCount',
          aiDataIndex: 'EastLightDutyCount',
          aiTitle: "小型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>中型车</div>,
          dataIndex: 'EastMidSizeCount',
          aiDataIndex: 'EastMidSizeCount',
          aiTitle: "中型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>大型车</div>,
          dataIndex: 'EastLargeCount',
          aiDataIndex: 'EastLargeCount',
          aiTitle: "大型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        }
      ]
    },
    {
      title: <div style={{ textAlign: 'center' }}>西北区</div>,
      aiTitle: "西北区",
      hideInDescriptions: true,
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>小型车</div>,
          dataIndex: 'WestLightDutyCount',
          aiDataIndex: 'WestLightDutyCount',
          aiTitle: "小型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>中型车</div>,
          dataIndex: 'WestMidSizeCount',
          aiDataIndex: 'WestMidSizeCount',
          aiTitle: "中型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>大型车</div>,
          dataIndex: 'WestLargeCount',
          aiDataIndex: 'WestLargeCount',
          aiTitle: "大型车",
          hideInDescriptions: true,
          valueType: 'digit',
          align: 'right',
          width: 140,
          hideInSearch: true,
        }
      ]
    },
  ]
  // 选择了多个片区 
  const [isMoreArea, setIsMoreArea] = useState<boolean>(false)
  // 寻找展开的行 加上加载效果
  const addLoadingRow = (name: string) => {
    const main = document.getElementsByClassName(`vehicleOwnerTable`)[0]
    const pageLoading = document.getElementsByClassName(`pageLoading`)[0]

    const row = main.getElementsByClassName(`${name}`)[0]
    console.log('row', row);

    const loadingBox = document.createElement('tr');
    const span = document.createElement('span');
    const Spin = pageLoading.cloneNode(true);  // 深克隆DOM节点
    span.innerText = '加载中...';
    Spin.setAttribute('class', 'rowLoadingSpin');
    span.setAttribute('class', 'span');

    loadingBox.appendChild(Spin);
    loadingBox.appendChild(span);
    loadingBox.setAttribute('class', 'vehicleOwnerLoadingBox');
    row?.parentNode.insertBefore(loadingBox, row.nextSibling)
  }
  // 寻找展开的行 去除加载效果
  const removeLoadingRow = (name: string) => {
    const main = document.getElementsByClassName(`vehicleOwnerTable`)[0]
    const pageLoading = document.getElementsByClassName(`vehicleOwnerLoadingBox`)[0]
    pageLoading.remove() // 防止重复打印一个内容
  }

  const exportColumns: any = [
    {
      title: <div style={{ textAlign: 'center' }}>管理中心</div>,
      dataIndex: 'SPRegionTypeNAME',
      hideInDescriptions: true,
      hideInSearch: true,
    },
    {
      title: <div style={{ textAlign: 'center' }}>服务区</div>,
      dataIndex: 'ServerPartName',
      hideInDescriptions: true,
      hideInSearch: true,
    },
    {
      title: <div style={{ textAlign: 'center' }}>归属省份</div>,
      dataIndex: 'ProvinceName',
      hideInDescriptions: true,
      hideInSearch: true,
    },
    columns[3],
    columns[4],
    columns[5]
  ]

  const exportTable = (e) => {
    e.stopPropagation();                                            // 防止Collapse组件收起
    const main = document.getElementsByClassName(`saleReportHideBox${printIndex}`)[0]
    const thead = main.querySelector('thead').cloneNode(true);  // 深克隆DOM节点
    const tbody = main.querySelector('tbody').cloneNode(true);  // 深克隆DOM节点
    const tfoot = main.querySelector('tfoot').cloneNode(true);  // 深克隆DOM节点
    const container = document.querySelector('#hiddenBox');

    const titleBox = document.createElement('div');

    const title = document.createElement('div');
    title.innerText = `中心车辆归属地统计表`
    title.setAttribute('style', 'width:100%;text-align:center;font-size:20px;font-weight: 600;');

    const timeText = document.createElement('div');
    timeText.setAttribute('style', 'text-align:right;font-size:16px;font-weight: 400;width:100%')
    timeText.innerText = `统计时间：${moment(searchParams?.statisticsStartDate).format('YYYY年MM月')}${moment(searchParams?.statisticsStartDate).format('YYYY年MM月') === moment(searchParams?.statisticsEndDate).format('YYYY年MM月') ? ''
      : `至${moment(searchParams?.statisticsEndDate).format('YYYY年MM月')}`}`

    const footerBox = document.createElement('div');
    const person = document.createElement('span');
    const time = document.createElement('span');
    person.innerText = `制单人：${currentUser?.Name}`
    time.innerText = `制单日期：${moment().format('YYYY年MM月DD日 HH:mm:ss')}`
    person.setAttribute('style', 'text-align:left;font-size:16px;font-weight: 400;width:50%')
    time.setAttribute('style', 'text-align:right;font-size:16px;font-weight: 400;width:50%')
    footerBox.appendChild(person);
    footerBox.appendChild(time);

    titleBox.appendChild(title)
    titleBox.appendChild(timeText)
    // titleBox.appendChild(footerBox)

    const tempTable = document.createElement('table');
    tempTable.appendChild(titleBox);
    tempTable.appendChild(thead);
    tempTable.appendChild(tbody);
    tempTable.appendChild(tfoot);

    tempTable.setAttribute('id', 'table-to-xls-vehicleOwner');                    // 给table添加id，值与按钮上的table字段对应

    container.appendChild(tempTable);                                // 把创建的节点添加到页面容器中

    setShowLoading(false)

    downloadBtnRef.current.handleDownload();
    setShowExportTable(false)
    tempTable.remove() // 防止重复打印一个内容
  }

  const otherFun = (e: any) => {
    console.log('e', e);
    // 判断选择了几个片区的地方
    let area: number = 0
    if (e.checkedNodes && e.checkedNodes.length > 0) {
      e.checkedNodes.forEach((item: any) => {
        if (item.type === 0) {
          area += 1
        }
      })
    }
    if (area > 1) {
      setIsMoreArea(true)
    } else {
      setIsMoreArea(false)
    }
  }

  // 点击ai分析执行的方法 
  const handleGetAIAnalysis = async () => {
    if (!selectedId) {
      message.error('请先选择服务区！')
      return
    }
    if (!(tableData && tableData.length > 0)) {
      actionRef.current?.reload()
    }

    setShowAiDrawer(true)
  }


  return (
    <div ref={(el) => {
      // 打印报表
      if (!reqDetailList || reqDetailList.length === 0) return;
      setPrintOut(el);
    }} >
      <Spin style={{ display: 'none' }} className={'pageLoading'} />
      {
        showLoading ?
          <div
            style={{
              width: '100%',
              height: '100%',
              background: 'rgba(0,0,0,0.1)',
              position: 'fixed',
              zIndex: 5,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center'
            }}
          >
            <div style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              padding: '15px 20px 10px',
              background: '#fff',
              borderRadius: '8px',
              width: '200px'
            }}>
              <Spin />
              <span style={{ marginLeft: '5px' }}>数据导出中...</span>
            </div>
          </div> : ''
      }

      <div className={`saleReportHideBox${printIndex}`} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
        {
          showExportTable && reqDetailList && reqDetailList.length > 0 ?
            <ProTable
              columns={exportColumns}
              dataSource={reqDetailList}
              pagination={false}
              summary={() => {
                return <tr>
                  <td colSpan={7}>{`制单人：${currentUser?.Name}`}</td>
                  <td colSpan={7} align={'right'}>{`制单日期：${moment().format('YYYY年MM月DD日 HH:mm:ss')}`}</td>
                </tr>
              }}
              expandable={{
                defaultExpandAllRows: true
              }}
            /> : ''
        }
      </div>
      <div id='hiddenBox' style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }} />

      <div style={{ backgroundColor: '#fff', display: 'flex' }}>
        <LeftSelectTree setSelectedId={setSelectedId} setCollapsible={setCollapsible} collapsible={collapsible} otherFun={otherFun} />
        <div style={{
          width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
          paddingTop: 0,
          paddingBottom: 0,
          paddingRight: 0
        }}>
          <ProTable
            actionRef={actionRef}
            formRef={formRef}
            columns={columns}
            bordered
            expandable={{
              expandRowByClick: true
            }}
            className={'vehicleOwnerTable'}
            rowKey={(record) => {
              return `${record?.SPRegionTypeId}-${record?.ServerPartId}-${record?.ServerPartName}-${record?.ProvinceName}`
            }}
            rowClassName={(record) => {
              return `${record?.SPRegionTypeId}-${record?.ServerPartId}-${record?.ServerPartName}-${record?.ProvinceName}`
            }}
            scroll={{ x: 'max-content', y: 'calc(100vh - 400px)' }}
            loading={tableLoading ? {
              spinning: tableLoading,
              tip: loadingText || '加载中...'
            } : false}
            headerTitle={<PageTitleBox props={props} showAI={true} AIFun={handleGetAIAnalysis} />}
            search={{ span: 6 }}
            dataSource={tableData}
            request={async (params) => {
              if (!selectedId) {
                return
              }
              let startTime1: number = new Date().getTime()
              let allStartTime: number = new Date().getTime()
              console.log('exportColumns', exportColumns);
              console.log('isMoreArea', isMoreArea);
              setIsExportOk(false)
              setTableLoading(true)
              setLoadingText('加载表格数据中,请稍后...')
              console.log('params', params);
              setSearchParams(params)
              const req: any = {
                dataType: 0,
                serverPartId: selectedId,
                statisticsStartMonth: params?.statisticsStartDate ? moment(params?.statisticsStartDate).format('YYYYMM') : '',
                statisticsEndMonth: params?.statisticsEndDate ? moment(params?.statisticsEndDate).format('YYYYMM') : '',
                rankNum: params?.rankNum || ''
              }
              setExpandedRowKeys(['null-null-undefined-undefined-undefined-undefined-null'])
              // 接口数据
              const data = await handleGetBayonetOwnerAHTreeList(req)
              let endTime1: number = new Date().getTime()
              // 准备导出excel数据
              let startTime2: number = new Date().getTime()
              const exportReq: any = {
                dataType: 0,
                serverPartId: selectedId,
                statisticsStartMonth: params?.statisticsStartDate ? moment(params?.statisticsStartDate).format('YYYYMM') : '',
                statisticsEndMonth: params?.statisticsEndDate ? moment(params?.statisticsEndDate).format('YYYYMM') : '',
                rankNum: params?.rankNum || '',
                isSync: false
              }
              let endTime2: number = 0
              handleGetBayonetOwnerAHTreeList(exportReq).then(res => {
                if (res && res.length > 0) {
                  const exportData = JSON.parse(JSON.stringify(res))
                  console.log('res', res);
                  exportData.forEach((item: any) => {
                    item.ServerPartName = ' '
                    item.ProvinceName = ' '
                    if (item.children && item.children.length > 0) {
                      item.children.forEach((subItem: any) => {
                        subItem.SPRegionTypeNAME = ' '
                        subItem.ProvinceName = ' '
                        subItem.TotalCountRatio = numeral((subItem.TotalCount / item.TotalCount) * 100).format('0.00')
                        if (subItem.children && subItem.children.length > 0) {
                          subItem.children.forEach((thirdItem: any) => {
                            thirdItem.SPRegionTypeNAME = ' '
                            thirdItem.ServerPartName = ' '
                            thirdItem.TotalCountRatio = numeral((thirdItem.TotalCount / subItem.TotalCount) * 100).format('0.00')
                          })
                        }
                      })
                    }
                  })
                  console.log('exportData', exportData);
                  setReqDetailList(exportData)
                  setIsExportOk(true)
                } else {
                  setReqDetailList([])
                  setIsExportOk(true)
                }

                endTime2 = new Date().getTime()
              })

              let allEndTime: number = new Date().getTime()
              // JSON数据
              // const data: any = pageData
              console.log('data', data);
              setLoadingText('处理数据中,请稍后...')






              // 导出数据
              console.log('datadatadatadatadatadata', data);
              const exportDataList: any = []
              if (data && data.length > 0) {
                console.log('111');

                data.forEach((item: any) => {
                  if (item.children && item.children.length > 0) {
                    item.children.forEach((subItem: any) => {
                      subItem.TotalCountRatio = numeral((subItem.TotalCount / item.TotalCount) * 100).format('0.00')
                      if (subItem.children && subItem.children.length > 0) {
                        subItem.children.forEach((thirdItem: any) => {
                          thirdItem.TotalCountRatio = numeral((thirdItem.TotalCount / subItem.TotalCount) * 100).format('0.00')
                        })
                      } else {
                        subItem.children = []
                      }
                    })
                  }
                })

                console.log('222');
                if (isMoreArea) {
                  let TotalCountSum: number = 0
                  let LightDutyTotalCountSum: number = 0
                  let MidSizeTotalCountSum: number = 0
                  let LargeTotalCountSum: number = 0
                  let EastLightDutyCountSum: number = 0
                  let EastMidSizeCountSum: number = 0
                  let EastLargeCountSum: number = 0
                  let WestLightDutyCountSum: number = 0
                  let WestMidSizeCountSum: number = 0
                  let WestLargeCountSum: number = 0
                  data.forEach((item: any) => {
                    TotalCountSum += item.TotalCount
                    LightDutyTotalCountSum += item.LightDutyTotalCount
                    MidSizeTotalCountSum += item.MidSizeTotalCount
                    LargeTotalCountSum += item.LargeTotalCount
                    EastLightDutyCountSum += item.EastLightDutyCount
                    EastMidSizeCountSum += item.EastMidSizeCount
                    EastLargeCountSum += item.EastLargeCount
                    WestLightDutyCountSum += item.WestLightDutyCount
                    WestMidSizeCountSum += item.WestMidSizeCount
                    WestLargeCountSum += item.WestLargeCount
                  })
                  data.forEach((item: any) => {
                    item.TotalCountRatio = numeral((item.TotalCount / TotalCountSum) * 100).format('0.00')
                  })
                  data.unshift({
                    ServerPartName: '合计',
                    TotalCountRatio: 100,
                    TotalCount: TotalCountSum,
                    LightDutyTotalCount: LightDutyTotalCountSum,
                    MidSizeTotalCount: MidSizeTotalCountSum,
                    LargeTotalCount: LargeTotalCountSum,
                    EastLightDutyCount: EastLightDutyCountSum,
                    EastMidSizeCount: EastMidSizeCountSum,
                    EastLargeCount: EastLargeCountSum,
                    WestLightDutyCount: WestLightDutyCountSum,
                    WestMidSizeCount: WestMidSizeCountSum,
                    WestLargeCount: WestLargeCountSum,
                  })
                }
                console.log('2131data', data);

                setTableLoading(false)
                setLoadingText('')
                setTableData(data)

                const logReq: any = await handleChangeKeyTo(req, paramsSort)
                const logReq2: any = await handleChangeKeyTo(exportReq, paramsSort)
                handleSetPublicLog({
                  desc: [
                    {
                      url: '/CommercialApi/BigData/GetBayonetOwnerAHTreeList', params: logReq, time: (endTime1 - startTime1) / 1000,
                    },
                    {
                      url: '/CommercialApi/BigData/GetBayonetOwnerAHTreeList', params: logReq2, time: (endTime2 - startTime2) / 1000,
                    }
                  ],
                  startTime: allStartTime,
                  endTime: allEndTime,
                  buttonType: 1
                })

                return { data, success: true }
              }
              setTableLoading(false)
              setLoadingText('')
              setReqDetailList([])
              setTableData([])
              return { data: [], success: true }
            }}
            toolbar={{
              actions: [
                <span style={{ visibility: 'hidden' }}>
                  <ReactHTMLTableToExcel
                    buttonText={'导出excel'}
                    ref={downloadBtnRef}
                    table="table-to-xls-vehicleOwner"
                    filename={`中心车辆归属地统计${moment(searchParams?.statisticsStartDate).format('YYYY/MM')}${moment(searchParams?.statisticsStartDate).format('YYYY年MM月') === moment(searchParams?.statisticsEndDate).format('YYYY年MM月') ? '' : `-${moment(searchParams?.statisticsEndDate).format('YYYY/MM')}`}`}
                    sheet="sheet1"
                  />
                </span>,
                <Button
                  key="new"
                  type="primary"
                  loading={!isExportOk}
                  onClick={(e) => {
                    if (reqDetailList && reqDetailList.length > 0) {
                      setShowLoading(true)
                      setTimeout(() => {
                        setShowExportTable(true)
                        setTimeout(() => {
                          exportTable(e)
                        }, 100)
                      }, 100)
                    } else {
                      message.error('暂无数据可导出！')
                    }
                  }}
                >
                  导出excel
                </Button>
              ]
            }}
            expandable={{
              expandedRowKeys,
              onExpand: async (record, event) => {
                console.log('record', record)
                console.log('event', event)
                if (record) {
                  if (expandedRowKeys && expandedRowKeys.length > 0) {
                    const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
                    list.push(`${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`)
                    setExpandedRowKeys(list)
                  } else {
                    const list: any = []
                    list.push(`${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`)
                    setExpandedRowKeys(list)
                  }
                } else {
                  const list: any = JSON.parse(JSON.stringify(expandedRowKeys))
                  const newList: any = list.filter((item) => item !== `${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`)
                  console.log('newList', newList)
                  setExpandedRowKeys(newList)
                }

                if (columnsLoading) {
                  return
                }

                let isHave: boolean = true
                if (event.children && event.children.length > 0) {
                  isHave = false
                }
                if (record && event.ServerPartId && isHave) {
                  setColumnsLoading(true)
                  console.log('`${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`', `${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`);
                  addLoadingRow(`${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`)
                  const req: any = {
                    dataType: 0,
                    serverPartId: event?.ServerPartId,
                    statisticsStartMonth: searchParams?.statisticsStartDate ? moment(searchParams?.statisticsStartDate).format('YYYYMM') : '',
                    statisticsEndMonth: searchParams?.statisticsEndDate ? moment(searchParams?.statisticsEndDate).format('YYYYMM') : '',
                    rankNum: searchParams?.rankNum || '',
                    isSync: false
                  }
                  // 接口数据
                  const data = await handleGetBayonetOwnerAHTreeList(req)
                  console.log('data222', data);
                  // 要的结果
                  let res: any = []
                  if (data && data.length > 0) {
                    data.forEach((item: any) => {
                      if (item.children && item.children.length > 0) {
                        item.children.forEach((subItem: any) => {
                          if (subItem.children && subItem.children.length > 0) {
                            res = subItem.children
                            res.forEach((resItem: any) => {
                              resItem.TotalCountRatio = numeral((resItem.TotalCount / subItem.TotalCount) * 100).format('0.00')
                            })
                          }
                        })
                      }
                    })
                  }

                  if (tableData && tableData.length > 0) {
                    const tableList: any = JSON.parse(JSON.stringify(tableData))
                    tableList.forEach((item: any) => {
                      if (item.SPRegionTypeId === event.SPRegionTypeId) {
                        if (item.children && item.children.length > 0) {
                          item.children.forEach((subItem: any) => {
                            if (subItem.ServerPartId === event.ServerPartId) {
                              subItem.children = res
                            }
                          })
                        }
                      }
                    })
                    setTableData(tableList)
                  }
                  removeLoadingRow(`${event?.SPRegionTypeId}-${event?.ServerPartId}-${event?.ServerPartName}-${event?.ProvinceName}`)
                  setColumnsLoading(false)
                }
              }
            }}
          />
        </div>
      </div>


      <Drawer
        width="80%"
        visible={showDetail}
        onClose={() => {
          setCurrentRow(undefined)
          setShowDetail(false)
        }}
        destroyOnClose
        title={`${currentRow?.ServerPartName || ''}车辆归属地统计表`}
        closable={false}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 16 }}
        className={'vehicleDrawer'}
      >
        <AreaVehicle currentDetail={currentRow} currentUser={currentUser} />
      </Drawer>

      <AiDrawer showDrawer={showAiDrawer} setShowDrawer={setShowAiDrawer} selectedId={selectedId}
        haveSearch={true} tableColumns={columns} searchParams={searchParams} props={props} tableData={reqDetailList} />


    </div>
  )
}

export default connect(({ user }: ConnectState) => ({
  currentUser: user.currentUser
}))(vehicleOwner);