import React, { useState, useEffect } from 'react'
import useRequest from '@ahooksjs/use-request/es'

import { Checkbox } from 'antd'
import { CheckboxValueType } from 'antd/lib/checkbox/Group'

import { MicroRoadshowService } from 'Material/MicroRoadshow.service'
import RoadshowContainer from './Roadshow.content'
import CheckboxMenu from 'Newest/components/CheckboxMenu'
import styles from '../css/Masonry.module.scss'

enum RoadshowCheckboxType {
  // Audio = 2,
  // Video = 1,
  RoadshowReplay = 1,
  QASeries = 2,
  SurveyFeedback = 3
}
const pageSize = 10

/* 多选框组*/
const checkBoxAllOptions = [
  // { value: RoadshowCheckboxType.Audio, label: '音频' },
  // { value: RoadshowCheckboxType.Video, label: '视频' }
  { value: RoadshowCheckboxType.RoadshowReplay, label: '路演回放' },
  { value: RoadshowCheckboxType.QASeries, label: '问答系列' },
  { value: RoadshowCheckboxType.SurveyFeedback, label: '调研反馈' }
]
/**微路演页 */
const RoadshowPage: React.FC = props => {
  const [hasMore, setHasMore] = useState<boolean>(true) // 是否到底了
  const [page, setPage] = useState<number>(1) // 当前页
  const [selectCheckbox, setSelectCheckbox] = useState<(string | number)[]>([]) // 搜索类型
  const [permissionIDs, setPermissionIDs] = useState<number[]>([]) // 行业ID

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [dataList, setDataList] = useState<any[]>([]) // 数据

  /* 获取数据*/
  const { loading: dataLoading, run: getRoadshowList } = useRequest(MicroRoadshowService.getRoadshowList, {
    manual: true,
    onSuccess: res => {
      setDataList(page === 1 ? res.data.Data?.List || [] : [...dataList, ...res.data.Data?.List])
      setHasMore(!res.data.Data?.Paging?.IsEnd || false)
    }
  })

  const { data: permssionData } = useRequest(MicroRoadshowService.getPermissionList, {
    formatResult: res => res.data.Data
  })

  /* 页面初次加载获取数据*/
  useEffect(() => {
    getRoadshowList({ PageSize: pageSize, CurrentIndex: page })
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const handleChangeCategory = (checkedValue: CheckboxValueType[]) => {
    setPermissionIDs(checkedValue as number[])
    setPage(1)
    getRoadshowList({
      PageSize: pageSize,
      CurrentIndex: 1,
      SearchType: selectCheckbox.join(','),
      ChartPermissionIds: checkedValue.join(',')
    })
  }

  /* 搜索类型多选选择*/
  const onChangeHandler = (key: (string | number)[]) => {
    setSelectCheckbox(key)
    setPage(1)
    getRoadshowList({
      PageSize: pageSize,
      CurrentIndex: 1,
      SearchType: key.join(','),
      ChartPermissionIds: permissionIDs.join(',')
    })
  }

  /* 下拉获取数据*/
  const handleLoadMoreData = () => {
    if (dataLoading || !hasMore) return
    setPage(page + 1)
    getRoadshowList({
      PageSize: pageSize,
      CurrentIndex: page + 1,
      SearchType: selectCheckbox.join(','),
      ChartPermissionIds: permissionIDs.join(',')
    })
  }

  return (
    <>
      <div className={styles['roadshow-checkbox-wrapper']}>
        <CheckboxMenu
          menuOption={checkBoxAllOptions}
          actKey={selectCheckbox}
          type="primary"
          onChange={onChangeHandler}
          className={styles['roadshow-checkbox']}
        />
        <div className="g-inline-block m-l-md">
          <Checkbox.Group value={permissionIDs} onChange={handleChangeCategory}>
            {permssionData?.List?.map(item => (
              <Checkbox key={item.ChartPermissionId} value={item.ChartPermissionId}>
                {item.PermissionName}
              </Checkbox>
            ))}
          </Checkbox.Group>
        </div>
      </div>
      <RoadshowContainer hasMore={hasMore} loading={dataLoading} dataList={dataList} loadMore={handleLoadMoreData} />
      {!hasMore && dataList.length > 10 && <div className={styles['content-none']}>已经到底了~</div>}
      {/* {!dataList.length && !dataLoading && <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />} */}
    </>
  )
}

export default RoadshowPage
