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 { Avatar, Button, Menu, message, Space, Spin, Tree } from "antd";
import useRequest from "@ahooksjs/use-request";
import { getServerpartTree, handleCallLogs, handleGetCashierStatus } 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 SubMenu from "antd/lib/menu/SubMenu";
import { handleGetDailyRevenueReport } from "@/pages/reports/audit/curDailyReport/service";
import moment from "moment";
import * as numeral from "numeral";
import ProDescriptions from "@ant-design/pro-descriptions";
import PageTitleBox from "@/components/PageTitleBox";
import LeftSelectTree from "../../settlementAccount/component/leftSelectTree";
import { exportXlsxFromProColumnsExcelJS } from "@/utils/exportExcelFun";


const curDailyReport: React.FC<{ currentUser: CurrentUser }> = (props) => {
  const { currentUser } = 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 { loading: treeLoading, data: treeViews } = useRequest(async () => {
    const data = await getServerpartTree(currentUser?.ProvinceCode, currentUser?.CityAuthority, true, true, true)
    setTreeView(data)
    return data
  })
  // 树相关的属性和方法
  const [selectedId, setSelectedId] = useState<string>()
  // 导出的加载效果
  const [showLoading, setShowLoading] = useState<boolean>(false)
  // 是否显示打印的表格
  const [showExportTable, setShowExportTable] = useState<boolean>(false)
  const [currenMenu, setCurrenMenu] = useState<any>(); // 当前选中左侧菜单的服务区节点
  // 因为要查全部 所以不能用是否选择服务区去判断 得把第一次请求return出去
  const [isFirst, setIsFirst] = useState<boolean>(true)
  // 拿到现在查到数据的服务区名称
  const [currentServerpartName, setCurrentServerpartName] = useState<string>('')

  const [isAll, setIsAll] = useState<boolean>(false)
  const columns: any = [
    {
      title: '门店信息',
      dataIndex: 'shopBaseInfo',
      hideInSearch: true,
      children: [
        {
          title: '序号',
          width: 120,
          dataIndex: 'index',
          valueType: 'index',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '门店',
          width: 180,
          dataIndex: 'ServerPartShop_Name',
          ellipsis: true,
          align: 'center',
          render: (_, record) => {
            return record?.ServerPartShop_Name || record?.ServerPart_Name || record?.SpregionType_Name
          }
        }
      ]
    },
    {
      title: '东(南)区',
      dataIndex: 'RevenueA',
      hideInSearch: true,
      children: [
        {
          title: '收银状态',
          width: 140,
          align: 'center',
          ellipsis: true,
          dataIndex: 'RevenueA.ConnectState',
          // hideInTable: isAll,
          render: (_, record) => {
            return record?.ServerPartShop_Id ? handleGetCashierStatus(record?.RevenueA.TradeDate, 10) ?
              <span style={{ color: '#00bfff' }}>{'收银状态正常'}</span> :
              <span style={{ color: '#c71585' }}>{'网络未连接'}</span> : '-'
          }
          // render:(_,record)=>{
          //   return record?.ServerPartShop_Id? new Date(moment(record?.RevenueA.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime()>new Date().getTime() || new Date(moment(record?.RevenueA.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime() + 5*60*1000 > new Date().getTime()?
          //     <span style={{color:'#00bfff'}}>{'收银状态正常'}</span>:<span style={{color:'#c71585'}}>{'网络未连接'}</span>:'-'
          // }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单数量</div>,
          width: 100,
          align: 'right',
          valueType: 'digit',
          ellipsis: true,
          dataIndex: 'RevenueA.TicketCount',
          render: (_, record) => {
            return `${record?.RevenueA.TicketCount ? record?.RevenueA.TicketCount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单均价</div>,
          width: 100,
          align: 'right',
          valueType: 'digit',
          dataIndex: 'RevenueA.AvgTicketAmount',
          render: (_, record) => {
            return `${record?.RevenueA.AvgTicketAmount ? record?.RevenueA.AvgTicketAmount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>今日营收</div>,
          width: 100,
          align: 'right',
          valueType: 'digit',
          dataIndex: 'RevenueA.TotalAmount',
          render: (_, record) => {
            return `${record?.RevenueA.TotalAmount ? numeral(record?.RevenueA.TotalAmount).format('0,0.00') : '-'}`
          }
        },
      ]
    },
    {
      title: '西(北)区',
      dataIndex: 'RevenueB',
      align: 'center',
      hideInSearch: true,
      children: [
        {
          title: '收银状态',
          align: 'center',
          width: 140,
          dataIndex: 'RevenueB.ConnectState',
          // hideInTable: isAll,
          render: (_, record) => {
            return record?.ServerPartShop_Id ? handleGetCashierStatus(record?.RevenueB.TradeDate, 10) ?
              <span style={{ color: '#00bfff' }}>{'收银状态正常'}</span> :
              <span style={{ color: '#c71585' }}>{'网络未连接'}</span> : '-'
          }
          // render:(_,record)=>{
          //   return record?.ServerPartShop_Id? new Date(moment(record?.RevenueB.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime()>new Date().getTime() || new Date(moment(record?.RevenueB.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime() + 5*60*1000 > new Date().getTime()?
          //     <span style={{color:'#00bfff'}}>{'收银状态正常'}</span>:<span style={{color:'#c71585'}}>{'网络未连接'}</span>:'-'
          // }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单数量</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: 'RevenueB.TicketCount',
          render: (_, record) => {
            return `${record?.RevenueB.TicketCount ? record?.RevenueB.TicketCount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单均价</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: 'RevenueB.AvgTicketAmount',
          render: (_, record) => {
            return `${record?.RevenueB.AvgTicketAmount ? record?.RevenueB.AvgTicketAmount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>今日营收</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: 'RevenueB.TotalAmount',
          render: (_, record) => {
            return `${record?.RevenueB.TotalAmount ? numeral(record?.RevenueB.TotalAmount).format('0,0.00') : '-'}`
          }
        },
      ]
    },
    {
      title: '合计',
      dataIndex: 'TotalRevenue',
      align: 'center',
      hideInSearch: true,
      children: [
        {
          title: '收银状态',
          align: 'center',
          width: 140,
          dataIndex: 'TotalRevenue.ConnectState',
          // hideInTable: !isAll,
          render: (_, record) => {
            return record?.ServerPartShop_Id ? handleGetCashierStatus(record?.TotalRevenue.TradeDate, 10) ?
              <span style={{ color: '#00bfff' }}>{'收银状态正常'}</span> :
              <span style={{ color: '#c71585' }}>{'网络未连接'}</span> : '-'
          }
          // render:(_,record)=>{
          //   return record?.ServerPartShop_Id? new Date(moment(record?.TotalRevenue.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime()>new Date().getTime() || new Date(moment(record?.TotalRevenue.TradeDate).format('YYYY-MM-DD HH:mm:ss')).getTime() + 5*60*1000 > new Date().getTime()?
          //     <span style={{color:'#00bfff'}}>{'收银状态正常'}</span>:<span style={{color:'#c71585'}}>{'网络未连接'}</span>:'-'
          // }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单数量</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: '',
          render: (_, record) => {
            return `${record?.TotalRevenue.TicketCount ? record?.TotalRevenue.TicketCount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>客单均价</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: '',
          render: (_, record) => {
            return `${record?.TotalRevenue.AvgTicketAmount ? record?.TotalRevenue.AvgTicketAmount : '-'}`
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>今日营收</div>,
          align: 'right',
          valueType: 'digit',
          width: 100,
          dataIndex: '',
          render: (_, record) => {
            return `${record?.TotalRevenue.TotalAmount ? numeral(record?.TotalRevenue.TotalAmount).format('0,0.00') : '-'}`
          }
        },
      ]
    }

  ]

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

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

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

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

    setShowLoading(false)

    downloadBtnRef.current.handleDownload();
    setShowExportTable(false)
    tempTable.remove() // 防止重复打印一个内容
  }
  // 查询的条件
  const [searchParams, setSearchParams] = useState<any>()

  const getMenuDom = (data: any[], callback: (item: any) => void) => {
    return (data.map((element: any) => {
      // 绑定嵌套树的子节点
      if (element.children && element.children.length > 0) {
        return (
          <SubMenu title={<span>{element.label}</span>}
            icon={element.ico ? <Avatar src={element.ico} size={16} style={{ marginRight: 4 }} shape="square" /> : null}
            key={`${element.key || element.value}`}
            onTitleClick={(item) => {
              // 选中一级菜单
              if (!currenMenu || item.key !== `${currenMenu?.key}`) {
                callback.call(callback, item)
              }
              item.domEvent.stopPropagation();
            }}
          >
            {element.children && element.children.length > 0 && getMenuDom(element.children, callback)}
          </SubMenu>
        )
      }
      return (<Menu.Item icon={element.ico ? <Avatar src={element.ico} size={16} shape="square" /> : null}
        key={`${element.key || element.value}`}>{element.desc && element.desc !== '0/0' ? <><span>{element.label}</span>
          <span style={{ position: 'absolute', right: '10', top: '9px', lineHeight: '20px', padding: '2px 3px' }}>
            [<span style={{ color: 'red' }}>{element.desc.split('/')[0]}</span>/<span style={{ color: '#1890ff' }}>{element.desc.split('/')[1]}</span>]</span></> : element.label}</Menu.Item>)
    }))
  }

  const loadSelectedId = (item?: any) => {
    // 选中的子菜单key
    const [type, value] = item.key.split('-')
    if (type === '1') {
      setCurrenMenu(value)
      // actionRef?.current?.reload()
    } else {
      setCurrenMenu('')
    }
  }

  return (
    <div ref={(el) => {
      // 打印报表
      if (!reqDetailList || reqDetailList.length === 0) return;
      setPrintOut(el);
    }} >

      {
        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'} style={{ position: 'fixed', zIndex: -1, top: 0, left: 0 }}>
        {
          showExportTable && reqDetailList && reqDetailList.length > 0 ?
            <ProTable
              columns={columns}
              dataSource={reqDetailList}
              pagination={false}
              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={(info: any) => {
          const all = info.checkedNodes.filter(n => n?.key === '0-0')
          if (all && all.length > 0) {
            // setIsAll(true)
            setSelectedId(undefined)
          } else {
            // setIsAll(false)
            const selectedIds = info.checkedNodes.filter(n => n?.type === 1)
            setSelectedId(selectedIds.map(n => n?.value)?.toString() || '')
          }
        }} />

        <div style={{
          width: !collapsible ? 'calc(100% - 300px)' : 'calc(100% - 60px)',
          paddingTop: 0,
          paddingBottom: 0,
          paddingRight: 0
        }}>
          <ProTable
            actionRef={actionRef}
            formRef={formRef}
            columns={columns}
            rowKey={(record) => {
              return `${record?.SpregionType_Id}-${record?.ServerPart_Id}-${record?.ServerPartShop_Id}`
            }}
            bordered
            // headerTitle={`${currentServerpartName ||''}营收实时汇总表`}
            headerTitle={<PageTitleBox props={props} />}
            search={{ span: 6 }}
            scroll={{ x: 1400 }}
            request={async (params) => {
              setCurrentServerpartName('')
              if (isFirst) {
                setIsFirst(false)
                return
              }
              if (selectedId) {
                setIsAll(false)
              } else {
                setIsAll(true)
              }

              handleCallLogs()
              const req = {
                provinceCode: currentUser?.ProvinceCode || '734100',
                ServerpartIds: selectedId || ''
              }
              // setSearchParams(params)
              const data = await handleGetDailyRevenueReport(req)
              console.log('data', data)
              if (data && data.length > 0) {
                setReqDetailList(data)
                if (selectedId) {
                  setCurrentServerpartName(data[0].children[0].ServerPart_Name)
                }
                return { data, success: true }
              }
              return { data: [], success: true }
            }}
            toolbar={{
              actions: [
                // <span style={{ visibility: 'hidden' }}>
                //   <ReactHTMLTableToExcel
                //     buttonText={'导出excel'}
                //     ref={downloadBtnRef}
                //     table="table-to-xls-curDailyReport"
                //     filename={`当日营收报表${moment().format('YYYY-MM-DD')}`}
                //     sheet="sheet1"
                //   />
                // </span>,
                <Button
                  key="new"
                  type="primary"
                  onClick={(e) => {
                    if (reqDetailList && reqDetailList.length > 0) {
                      exportXlsxFromProColumnsExcelJS(columns,
                        reqDetailList,
                        `当日营收报表${moment().format('YYYY-MM-DD')}`,
                        {
                          footerMaker: currentUser?.Name,
                          footerMakerTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                          footerStatsTime: `${moment().format('YYYY-MM-DD')}`
                        }
                      )
                      // setShowLoading(true)
                      // setTimeout(() => {
                      //   setShowExportTable(true)
                      //   setTimeout(() => {
                      //     exportTable(e)
                      //   }, 100)
                      // }, 100)
                    } else {
                      message.error('暂无数据可导出！')
                    }
                  }}
                >
                  导出excel
                </Button>
              ]
            }}
            tableExtraRender={() => {
              if (reqDetailList && reqDetailList.length > 0) {
                let Current_SellAmountSum: number = 0
                reqDetailList.forEach((item: any) => {
                  Current_SellAmountSum += item.TotalRevenue.TotalAmount
                })
                return <div style={{ paddingLeft: 30, paddingBottom: 0 }}>
                  <ProDescriptions column={2} className="commity-sale-description" labelStyle={{ color: "#00000073" }}>
                    <ProDescriptions.Item label="今日营收合计" valueType="money" contentStyle={{ color: 'orangered' }}>{Current_SellAmountSum || '0.00'}</ProDescriptions.Item>
                    <ProDescriptions.Item label="统计时间">{`${ moment().format('YYYY/MM/DD 0:00:00') }至${ moment().format('YYYY/MM/DD HH:mm:ss') }`}</ProDescriptions.Item>
                  </ProDescriptions>
                </div>
              }
            }}
          />
        </div>
      </div>
    </div>
  )
}

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