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'

type ListTimeType = {
  time: string
  num: number
}

type ListType = {
  id: string
  numAll: number
  timeArr: ListTimeType[]
}

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 resObj: any = res.data || {}
      // const resObj: any = {
      //   '广东省-珠海市': { am: 1, pm: 1 }
      // }

      for (const k1 in resObj) {
        let objOne: any = {}
        objOne.id = k1
        let numAll = 0
        let arr1: any = []
        for (const k2 in resObj[k1]) {
          numAll += resObj[k1][k2]
          arr1.push({ time: k2, num: resObj[k1][k2] })
        }
        objOne.timeArr = arr1
        objOne.numAll = numAll
        listTemp.push(objOne)
      }
      // console.log('-----', listTemp)

      setList(listTemp)
    }
  }, [apiObj, type])

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

  return (
    <Modal
      wrapClassName={styles.LocStat}
      open={true}
      title='地区统计'
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      <div className='LocList'>
        {list && list.length ? (
          list.map(item => (
            <div key={item.id} className='LocRow'>
              <div className='LocRow1'>
                <div className='LocRow1Wei'>地区：</div>
                <div>{item.id}</div>&emsp;
                <div className='LocRow1Wei'>总人数：</div>
                <div>{item.numAll}</div>
              </div>
              <div className='LocRow1'>
                <div className='LocRow1Wei'>时段人数：</div>
                {item.timeArr.map(item2 => (
                  <div key={item2.time}>
                    （
                    <span>
                      {item2.time === 'am'
                        ? '上午'
                        : item2.time === 'pm'
                        ? '下午'
                        : item2.time}
                    </span>
                    ：{item2.num}）
                  </div>
                ))}
              </div>
            </div>
          ))
        ) : (
          <div className='LocNull'>暂无数据</div>
        )}
      </div>
      <div className='Locbtn'>
        <Button onClick={closeFu}>关闭</Button>
      </div>
    </Modal>
  )
}

const MemoLocStat = React.memo(LocStat)

export default MemoLocStat
