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 { Button, Card, message, Row, Steps, Tooltip, Typography } from "antd";
import { Drawer } from "antd";
import { Space, 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 { handleGetExamineList, handleGetMonthAccountProinst } from "@/pages/examine/examineList/service";
import moment from "moment";
import { PageContainer } from "@ant-design/pro-layout";
import ReactHTMLTableToExcel from "react-html-table-to-excel";
import ProDescriptions from "@ant-design/pro-descriptions";
import {
  handleGetGetBUSINESSAPPROVALDetail,
  handleGetTableMonthlyReconciliation
} from "@/pages/reports/ShopExpenseDetail/service";
import { wrapTreeNode } from "@/utils/format";
import RevenueList from "@/pages/BussinessProject/components/RevenueList";
import './style.less'
import ProjectDetailDrawer from "@/pages/reports/component/ProjectDetailDrawer";
import { handleGetAPPROVALROUTEList } from "@/pages/Setting/serviceConfig/service";

const { Step } = Steps
const examineList: React.FC<{ currentUser: CurrentUser }> = (props) => {
  const { currentUser } = props

  const actionRef = useRef<ActionType>();
  const actionDetailRef = useRef<ActionType>();
  const formRef = useRef<FormInstance>();
  const formDetailRef = useRef<FormInstance>();
  const [reqDetailList, setReqDetailList] = useState<any>(); // 合计项数据源
  const [reqDetailListDetail, setReqDetailListDetail] = 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 [showDeatilDrawer, setShowDetailDrawer] = useState<boolean>(false)
  const [currentRow, setCurrentRow] = useState<any>()
  // 详情的加载效果
  const [detailLoading, setDetailLoading] = useState<boolean>(false)
  // 详情里面表格加载效果
  const [tableLoading, setTableLoading] = useState<boolean>(false)
  const [otherData, setOtherData] = useState<any>();// 显示表格上方内容
  // 流程进度的当前状态
  const [progressState, setProgressState] = useState<number>(0)
  // 流程进度的数组
  const [progressList, setProgressList] = useState<any>()
  // 进度流畅的详情信息
  const [progressDetail, setProgressDetail] = useState<any>()
  const [showDetail, setShowDetail] = useState<boolean>(false) // 是否显示详情
  const [detailCurrentRow, setDetailCurrentRow] = useState<any>()
  const [tableAllData, setTableAllData] = useState<any>()

  const columns: any = [
    {
      title: '业务名称',
      ellipsis: true,
      dataIndex: 'BusinessProcess_Name',
      hideInSearch: true,
      render: (_, record) => {
        return <a onClick={() => {
          console.log('record', record)
          setCurrentRow(record)
          handleGetProcessProgress(record?.BusinessApproval_ID)
          handleGetTableData(record?.BusinessProcess_ID, record?.Proinst_ID)
          setShowDetailDrawer(true)
        }}>{record?.BusinessProcess_Name}</a>
      }
    },
    {
      title: '服务区名称',
      width: 200,
      ellipsis: true,
      dataIndex: 'Serverpart_Name',
      hideInSearch: true
    },
    {
      title: '经办人',
      width: 140,
      dataIndex: 'Staff_Name',
      hideInSearch: true,
      ellipsis: true,
    },
    // {
    //   title: '统计时间',
    //   dataIndex: 'search_date',
    //   valueType: 'dateRange',
    //   hideInTable: true,
    //   hideInDescriptions: true,
    //   initialValue: [moment().format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')],
    //   search: {
    //     transform: (value) => {
    //       return {
    //         StartDate: value[0],
    //         EndDate: value[1],
    //       };
    //     },
    //   },
    //   fieldProps: {
    //     disabledDate: (current: any) => current && current > moment().endOf('day')
    //   }
    // },
    {
      title: '业务时间',
      dataIndex: '',
      width: 140,
      hideInSearch: true,
      render: (_, record) => {
        return record.BusinessProcess_StartDate ? `${moment(record.BusinessProcess_StartDate).format('YYYY-MM-DD')}` : ''
      }
    },
    {
      title: '业务状态',
      width: 150,
      dataIndex: 'BusinessProcess_State',
      valueType: 'select',
      request: async () => {
        const req: any = {
          SearchParameter: {
            APPROVALROUTE_VALID: 1,
            OPERATION_TYPES: 11
          },
          SortStr: 'APPROVALROUTE_STATE asc',
          PageIndex: 1,
          PageSize: 999999
        }
        const data = await handleGetAPPROVALROUTEList(req)
        console.log('data2222', data)
        if (data && data.length > 0) {
          const list: any = []
          data.forEach((item: any) => {
            list.push({ label: item.APPROVALROUTE_NAME, value: item.APPROVALROUTE_STATE })
          })
          list.push({ label: '已审结', value: 9000 })
          list.push({ label: '已驳回', value: 3000 })
          let str: string = ''
          list.forEach((item: any) => {
            if (item.value === 3000) {

            } else {
              if (str) {
                str += `,${item.value}`
              } else {
                str = item.value
              }
            }
          })
          return list
        }
        return []
      }
    },
    {
      title: '待审核人名称',
      width: 180,
      ellipsis: true,
      dataIndex: 'ApproveStaff_Name',
      hideInSearch: true,
      render: (_, record) => {
        return record?.BusinessProcess_State === 9000 ? '' : record?.ApproveStaff_Name
      }
    },
    {
      title: '备注说明',
      width: 250,
      ellipsis: true,
      dataIndex: 'BusinessProcess_Desc',
      hideInSearch: true
    },
    // {
    //   dataIndex: 'option',
    //   title: '操作',
    //   width: 120,
    //   valueType: 'option',
    //   align: 'center',
    //   fixed:'right',
    //   hideInSearch: true,
    //   render: (_,record)=>{
    //     return (
    //       <Space>
    //
    //       </Space>
    //     )
    //   }
    // }
  ]

  const detailColumns: any = [
    {
      title: '期限',
      dataIndex: '',
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>期数</div>,
          dataIndex: 'PeriodIndexStr',
          align: 'left',
          width: 150,
          hideInSearch: true,
          render: (_, record) => {
            return <span style={{ color: record?.PeriodIndexStr === '项目开始前' ? '#faad14' : '' }}>{record.PeriodIndexStr}</span>
          }
        },
        {
          title: <div style={{ textAlign: 'center' }}>期限</div>,
          dataIndex: 'PeriodDesc',
          align: 'left',
          width: 200,
          hideInSearch: true,
          render: (_, record) => {
            return record?.PeriodDesc !== '合计' ?
              <a style={{
                color: new Date(record.EndDate).getTime() < new Date().getTime() ? '#1890ff' : '#000000',
                cursor: new Date(record.EndDate).getTime() < new Date().getTime() ? 'pointer' : ''
              }} onClick={() => {
                console.log('record', record)
                if (new Date(record.EndDate).getTime() < new Date().getTime()) {
                  const obj: any = {
                    ...record,
                    ...tableAllData,
                    STARTDATE: record.StartDate
                  }
                  console.log('obj', obj)
                  setDetailCurrentRow(obj);
                  setShowDetail(true);
                }
              }}>
                {`${record?.StartDate}-${record?.EndDate}`}
              </a> :
              <span>{`${record?.PeriodDesc}`}</span>
          }
        },
      ]
    },
    {
      title: '租金信息',
      dataIndex: '',
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>保底/固定租金</div>,
          dataIndex: 'MinturnOver',
          valueType: 'digit',
          align: 'right',
          width: 170,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>提成比率</div>,
          dataIndex: 'GuaranteeRatio',
          hideInSearch: true,
          align: 'right',
          width: 120,
          render: (_, record) => {
            return record?.GuaranteeRatio ? `${record?.GuaranteeRatio}%` : ''
          }
        }
      ]
    },
    {
      title: '营业额',
      dataIndex: '',
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>现金</div>,
          dataIndex: 'CashAmount',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>微支付</div>,
          dataIndex: 'MobilePayAmount',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>小计</div>,
          dataIndex: 'RevenueAmount',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        }
      ]
    },
    {
      title: <div style={{ textAlign: 'center' }}>业主收款</div>,
      dataIndex: 'RoyaltyAmount',
      valueType: 'digit',
      width: 100,
      align: 'right',
      hideInSearch: true,
    },
    {
      title: '应收费用',
      dataIndex: '',
      hideInSearch: true,
      children: [
        {
          title: <div style={{ textAlign: 'center' }}>租金</div>,
          dataIndex: 'GuaranteeFee',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>物业费</div>,
          dataIndex: 'PropertyFee',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>房租</div>,
          dataIndex: 'HouseRent',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>罚款</div>,
          dataIndex: 'BreachPenalty',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>电费</div>,
          dataIndex: 'ElectricityCharge',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>水费</div>,
          dataIndex: 'WaterCharge',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>其他</div>,
          dataIndex: 'OtherFee',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
        {
          title: <div style={{ textAlign: 'center' }}>合计</div>,
          dataIndex: 'ReceivableAmount',
          valueType: 'digit',
          align: 'right',
          width: 100,
          hideInSearch: true,
        },
      ]
    },
    {
      title: <div style={{ textAlign: 'center' }}>退补款</div>,
      dataIndex: 'RefundSupplement',
      valueType: 'digit',
      align: 'right',
      width: 100,
      hideInSearch: true,
    }
  ]

  // 拿到流程进度的数据
  const handleGetProcessProgress = async (id: any) => {
    const req: any = {
      BUSINESSAPPROVALId: id || currentRow?.BUSINESSAPPROVAL_ID
    }
    const data = await handleGetGetBUSINESSAPPROVALDetail(req)
    console.log('data', data)
    setProgressDetail(data)
    setProgressState(data.BUSINESSAPPROVAL_STATE)
    const list = []
    if (data.approveList && data.approveList.length > 0) {
      const length: number = data.approveList.length
      data.approveList.forEach((item: any, index: number) => {
        if (index + 1 < length) {
          item.status = 'process'
        }
        if (item.APPLYAPPROVE_TYPE === 3000) {
          item.status = 'error'
        }
        list.push(item)
      })
      // const list: any = []
      // data.approveList.forEach((item: any)=>{
      //   list.push({title: item.APPLYAPPROVE_NAME,subTitle: item.APPLYAPPROVE_DATE, status: 'finish',description: item.APPLYAPPROVE_INFO})
      // })
    }
    list.push({
      status: 'wait',
      APPLYAPPROVE_NAME: data.BUSINESSAPPROVAL_NAME || '',
      APPLYAPPROVE_INFO: '',
      STAFF_NAME: '',
      APPLYAPPROVE_DATE: '',
    })
    console.log('list', list)
    setProgressList(list)
  }

  // 外面表格的请求数据的方法
  const handleGetTableData = async (id?: any, SHOPROYALTY_ID?: any) => {
    if (!id) {
      return
    }
    setTableLoading(true)
    const req = {
      BUSINESSPROJECT_ID: id,
      SHOPROYALTY_ID
    }
    const data = await handleGetTableMonthlyReconciliation(req)
    let res: any = {}
    let list: any = []
    let otherMessage: any = {}
    if (data.List && data.List.length > 0) {
      res = data.List[0]
      setTableAllData(res)
      if (data.List[0].ProjectPeriodList) {
        otherMessage = data.List[0].ProjectPeriodList.node
        const resObj: any = data.List[0].ProjectPeriodList
        if (resObj.children && resObj.children.length > 0) {
          list = wrapTreeNode(resObj.children)
        }
      }
    }

    list.unshift({
      PeriodIndexStr: '',
      PeriodDesc: '合计',
      MinturnOver: otherMessage?.MinturnOver,
      GuaranteeRatio: otherMessage?.GuaranteeRatio,
      CashAmount: otherMessage?.CashAmount,
      MobilePayAmount: otherMessage?.MobilePayAmount,
      RevenueAmount: otherMessage?.RevenueAmount,
      RoyaltyAmount: otherMessage?.RoyaltyAmount,
      GuaranteeFee: otherMessage?.GuaranteeFee,
      PropertyFee: otherMessage?.PropertyFee,
      HouseRent: otherMessage?.HouseRent,
      BreachPenalty: otherMessage?.BreachPenalty,
      ElectricityCharge: otherMessage?.ElectricityCharge,
      WaterCharge: otherMessage?.WaterCharge,
      OtherFee: otherMessage?.OtherFee,
      ReceivableAmount: otherMessage?.ReceivableAmount,
      RefundSupplement: otherMessage?.RefundSupplement,
    })

    console.log('list', list)
    setReqDetailListDetail(list)
    setOtherData({
      ...data.OtherData,
      Dates: `${moment(data.OtherData.PROJECT_STARTDATE).format('YYYY/MM/DD')}-${moment(data.OtherData.PROJECT_ENDDATE).format('YYYY/MM/DD')}`
    })
    // setOtherData({
    //   SPREGIONTYPE_NAME: res?.SpregionType_Name,
    //   SERVERPART_NAME: res?.ServerPart_Name,
    //   SERVERPARTSHOP_NAME: res?.ServerPartShop_Name,
    //   MERCHANTS_NAME: res?.Merchants_Name,
    //   Dates: res?.Dates,
    // })
    setTableLoading(false)
  }

  return (
    <div ref={(el) => {
      // 打印报表
      if (!reqDetailList || reqDetailList.length === 0) return;
      setPrintOut(el);
    }} >
      <div style={{ backgroundColor: '#fff', display: 'flex' }}>
        {/* <ProCard
          style={{width:!collapsible ? "300px" : "60px"}}
          className="pageTable-leftnav"
          bodyStyle={{padding: 0, paddingTop: 20, paddingLeft: 20,width:!collapsible ? "300px" : "60px"}}
          extra={<MenuFoldOutlined onClick={() => {
            setCollapsible(!collapsible)
          }}/>}
          colSpan={!collapsible ? "300px" : "60px"}
          title={!collapsible ? "请选择服务区" : ""}
          headerBordered
          collapsed={collapsible}
        >
          {treeView && treeView.length > 0 ? <Tree
            checkable
            treeData={[{
              label: '全部',
              value: 0,
              key: '0-0',
              children: treeView
            }]}
            fieldNames={{
              title: "label",
              key: "key"
            }}
            blockNode
            defaultExpandedKeys={['0-0']}
            onCheck={(checkedKeys: React.Key[] | any, info) => {
              const selectedIds = info.checkedNodes.filter(n => n?.type === 1)
              setSelectedId(selectedIds.map(n => n?.value)?.toString() || '')
              // actionRef?.current?.reload()
              // getData(selectedIds.map(n => n?.value)?.toString() || '')
            }}
            // switcherIcon={<PlusOutlined />}
          /> : ''}
        </ProCard> */}
        <div style={{
          width: '100%',
          paddingTop: 0,
          paddingBottom: 0,
          paddingRight: 0
        }}>
          <ProTable
            actionRef={actionRef}
            formRef={formRef}
            columns={columns}
            bordered
            headerTitle={'对账审批列表'}
            search={{ span: 6 }}
            request={async (params) => {
              // if (!selectedId){
              //   return
              // }
              const req: any = {
                SearchParameter: {
                  // BusinessProcess_Name: params.BusinessProcess_Name,
                  BusinessProcess_StateSearch: params.BusinessProcess_State || '',
                  Operation_Type: 11,
                  PendState: 2
                },
                keyWord: params.BusinessProcess_Name ? {
                  key: "BusinessProcess_Name",
                  value: params.BusinessProcess_Name
                } : '',
                SortStr: "BusinessProcess_StartDate desc",
                pageindex: 1,
                pagesize: 999999
              }
              const data = await handleGetMonthAccountProinst(req)
              console.log('data', data)
              if (data && data.length > 0) {
                data.forEach((item: any) => {
                  item.BusinessProcess_States = item.BusinessProcess_State
                })
                return { data, success: true }
              }
              return { data: [], success: true }
            }}
          />
        </div>
      </div>

      <Drawer
        width="80%"
        zIndex={20}
        visible={showDeatilDrawer} // 抽屉弹框是否显示状态
        onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
          setCurrentRow(undefined);
          setShowDetailDrawer(false);
          setOtherData(undefined)
          setProgressState(0)
          setProgressList([])
        }}
        destroyOnClose
        bodyStyle={{ backgroundColor: "#fff", padding: 0 }}
        closable={false}
      >
        <PageContainer
          loading={detailLoading}
          header={{
            title: currentRow?.BusinessProcess_Name,
            breadcrumb: {},
          }}
          content={
            <>
              <ProjectDetailDrawer id={currentRow?.BusinessProcess_ID} shopName={currentRow?.SERVERPARTSHOP_NAME ? currentRow?.SERVERPARTSHOP_NAME.split(',')[0] : ''} />
            </>
          }
        >
          {
            progressState !== 1000 ?
              <Card title="流程进度" bordered style={{ marginBottom: '12px' }}>
                <div className={'processBox'}>
                  <Steps
                    // type={'navigation'}
                    size="small"
                    current={progressList && progressList.length ? progressList.length : 0}
                    // progressDot
                    className="site-navigation-steps"
                  >
                    <Step status={'process'} title="发起申请" description={<div>
                      <Tooltip title={`${progressDetail?.STAFF_NAME || ''}：${progressDetail?.BUSINESSAPPROVAL_DESC}`}>
                        <p>{`${progressDetail?.BUSINESS_STARTDATE}`}</p>
                      </Tooltip>
                    </div>} />
                    {
                      progressList && progressList.length > 0 ?
                        progressList.map((item: any, index: number) => {
                          return <Step status={item.status} title={item.APPLYAPPROVE_NAME} description={item.APPLYAPPROVE_INFO ? <div>
                            <Tooltip title={`${item.STAFF_NAME || ''}：${item.APPLYAPPROVE_INFO}`}>
                              <p>{`${item.APPLYAPPROVE_DATE || ''}`}</p>
                            </Tooltip>
                          </div> : ''} />
                          // index+1===progressState && progressState!==6?'审批中':''}
                        }) : ''
                    }
                  </Steps>
                </div>
              </Card> : ''
          }

          <ProTable
            rowKey={(record) => {
              return `${record?.SHOPROYALTY_ID}-${record?.PeriodIndexStr}-${record?.PeriodDesc}`
            }}
            actionRef={actionDetailRef}
            formRef={formDetailRef}
            columns={detailColumns}
            bordered
            search={false}
            loading={tableLoading}
            request={async (params: any) => {
              handleGetTableData()
            }}
            scroll={{ x: 1800 }}
            headerTitle={`合作商户合同期结算明细表`} // 列表表头
            dataSource={reqDetailListDetail}
            pagination={false}
            tableExtraRender={() => {
              return <div style={{ paddingLeft: 24, background: '#fff' }} className={'showTableExtraRender'}>
                <ProDescriptions column={8} className="commity-sale-description" labelStyle={{ color: "#00000073" }}>
                  <ProDescriptions.Item span={1} label="片区">
                    <Tooltip title={otherData?.SPREGIONTYPE_NAME}>
                      {otherData?.SPREGIONTYPE_NAME}
                    </Tooltip>
                  </ProDescriptions.Item>
                  <ProDescriptions.Item span={1} label="服务区">
                    <Tooltip title={otherData?.SERVERPART_NAME}>
                      {otherData?.SERVERPART_NAME}
                    </Tooltip>
                  </ProDescriptions.Item>
                  <ProDescriptions.Item span={2} label="门店名称">
                    <Tooltip title={otherData?.SERVERPARTSHOP_NAME}>
                      {otherData?.SERVERPARTSHOP_NAME}
                    </Tooltip>
                  </ProDescriptions.Item>
                  <ProDescriptions.Item span={2} label="合作单位名称">
                    <Tooltip title={otherData?.MERCHANTS_NAME}>
                      {otherData?.MERCHANTS_NAME}
                    </Tooltip></ProDescriptions.Item>
                  <ProDescriptions.Item span={2} label="合同期">
                    <Tooltip title={otherData?.Dates}>
                      {otherData?.Dates}
                    </Tooltip></ProDescriptions.Item>
                </ProDescriptions>
              </div>
            }}
          >
          </ProTable>
        </PageContainer>
      </Drawer>

      {/* 查看项目详情 右侧弹出的抽屉 */}
      <Drawer
        width="80%"
        zIndex={21}
        className="project-drawer"
        visible={showDetail} // 抽屉弹框是否显示状态
        onClose={() => { // 关闭抽屉 则在清空选中行数据 并 设置抽屉状态为关闭
          setDetailCurrentRow(undefined);
          setShowDetail(false);
        }}
        bodyStyle={{ backgroundColor: "#f9f9f9", padding: 0 }}
        closable={false}
      >
        {/* 抽屉打开时 加载项目详情组件 */}
        {showDetail && <RevenueList BusinessProjectId={detailCurrentRow.BusinessProject_Id} propsBP={otherData} propsRC={tableAllData}
          ShopRoyaltyId={detailCurrentRow?.ShopRoyalty_Id ? detailCurrentRow?.ShopRoyalty_Id : 0}
          ShopIds={detailCurrentRow?.ServerPartShop_Id ? detailCurrentRow?.ServerPartShop_Id : ''}
          StartDate={moment(detailCurrentRow?.StartDate).format('YYYY-MM-DD')}
          EndDate={moment(detailCurrentRow?.EndDate).format('YYYY-MM-DD')}></RevenueList>}
      </Drawer>
    </div>
  )
}

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