import React, { useCallback, useEffect, useState } from 'react'
import styles from './index.module.scss'
import { Button, Modal } from 'antd'
import { A6FromDataType } from './type'
import { B2FromDataType } from '../B2exhiLog/type'
import { Loc_APIlist } from '@/store/action/A6record'
import MyTable from '@/components/MyTable'

type ListType = {
  id: string
  num: number
}

type Props = {
  type: '课程' | '展馆'
  apiObj: A6FromDataType | B2FromDataType
  closeFu: () => void
}

function LocStat({ type, apiObj, closeFu }: Props) {
  const [list, setList] = useState<ListType[]>([])

  const getListFu = useCallback(async () => {
    const obj = {
      ...apiObj,
      pageNum: 1,
      pageSize: 99999
    }

    const res = await Loc_APIlist(obj, type)

    if (res.code === 0) {
      const listTemp: ListType[] = []

      const resList: any[] = res.data
      resList.forEach((obj: any) => {
        for (const k in obj) {
          listTemp.push({
            id: k,
            num: obj[k]
          })
        }
      })
      setList(listTemp)
    }
  }, [apiObj, type])

  useEffect(() => {
    getListFu()
  }, [getListFu])

  return (
    <Modal
      wrapClassName={styles.LocStat}
      open={true}
      title='地区统计'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <MyTable
        list={list}
        columnsTemp={[
          ['txt', '地区', 'id'],
          ['txt', '预约记录', 'num']
        ]}
        lastBtn={[]}
        pagingInfo={false}
      />

      <div className='Locbtn'>
        <Button onClick={closeFu}>关闭</Button>
      </div>
    </Modal>
  )
}

const MemoLocStat = React.memo(LocStat)

export default MemoLocStat
