import React, { useEffect, useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { Clue_APIgetClueList, getTopinfo } from '@/store/action/clue'
import { RootState } from '@/store'
import store from '@/store'
import { ClueItem } from '@/types/api/clue'
import { baseURL } from '@/utils/http'
import classNames from 'classnames'
import { Pagination } from 'antd'
import ImageLazy from '@/components/ImageLazy'

type LeftProps = {
  classN?: string
}
function Left(props: LeftProps) {
  const dispatch = useDispatch()
  const [topInfo, setTopInfo] = useState<any>()
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 20
  })
  const [isFound, setIsFound] = useState<boolean>(false)
  const getListFu = useCallback(
    (pageNum: number, pageSize: number) => {
      dispatch(
        Clue_APIgetClueList({
          pageNum: pageNum,
          pageSize: pageSize,
          ...(isFound ? { status: 2 } : {})
        })
      )
    },
    [dispatch, isFound]
  )

  const getTopinfoFu = useCallback(async () => {
    const res = await dispatch(getTopinfo() as any)
    console.log('res', JSON.parse(res.rtf))
    setTopInfo(JSON.parse(res.rtf))
  }, [dispatch])

  const { list: listAll, total } = useSelector((state: RootState) => state.Clue.tableInfo)

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

  // 状态：0：待确认 | 1：跟进中 | 2：已找到 | 3：未找到 | 4：作废
  useEffect(() => {
    getListFu(pagination.current, pagination.pageSize)
  }, [getListFu, pagination])

  // 预览视频
  const lookFileFu = useCallback((file: string) => {
    store.dispatch({
      type: 'layout/lookDom',
      payload: { src: file, type: 'video' }
    })
  }, [])

  return (
    <div className={classNames(styles.Left, props.classN)}>
      <div className='infoContainer'>
        <div className='topInfo'>
          <div className='topInfoItem'>
            <div className='title'>
              <img src={require('@/assets/img/buried.png')} alt='' />
              <div>安葬烈士</div>
            </div>
            <div className='num'>{topInfo?.[0].pcs}</div>
          </div>
          <div className='topInfoItem'>
            <div className='title'>
              <img src={require('@/assets/img/person.png')} alt='' />
              <div>有名烈士</div>
            </div>
            <div className='num'>{topInfo?.[1].pcs}</div>
          </div>
          <div className='topInfoItem'>
            <div className='title'>
              <img src={require('@/assets/img/person.png')} alt='' />
              <div>无名烈士</div>
            </div>
            <div className='num'>{topInfo?.[2].pcs}</div>
          </div>
          <div className='topInfoItem'>
            <div className='title'>
              <img src={require('@/assets/img/finding.png')} alt='' />
              <div>寻亲中</div>
            </div>
            <div className='num'>{topInfo?.[3].pcs}</div>
          </div>
          <div className='topInfoItem'>
            <div className='title'>
              <img src={require('@/assets/img/found.png')} alt='' />
              <div>已找到</div>
            </div>
            <div className='num'>{topInfo?.[4].pcs}</div>
          </div>
        </div>
        <div className='mainInfoBox'>
          <div className='tab'>
            <div
              className={isFound ? 'active' : ''}
              onClick={() => {
                setIsFound(true)
                setPagination({ current: 1, pageSize: 20 })
              }}
            >
              寻亲案例
            </div>
            <div
              className={!isFound ? 'active' : ''}
              onClick={() => {
                setIsFound(false)
                setPagination({ current: 1, pageSize: 20 })
              }}
            >
              线索更新
            </div>
          </div>
          <div className='mainInfoListBox'>
            <div className='slide'></div>
            <div className='mainInfoList'>
              {listAll?.map((item: ClueItem) => {
                return (
                  <div className='mainInfo' key={item.id}>
                    <div className='labelList'>
                      <div className='label'>{item.type}</div>
                      <div className='label'>{item.status}</div>
                    </div>
                    <div className='name'>烈士：{item.martyrName}</div>
                    <div className='address'>
                      {item.city + item.region + item.address}
                    </div>
                    {item.remark && <div className='content'>{item.remark}</div>}
                    {item.result && <div className='content'>{item.result}</div>}
                    {(item.img || item.video) && (
                      <div className='media'>
                        <>
                          {item.img?.map((item: any, index: number) => {
                            return (
                              <ImageLazy
                                width={'32%'}
                                height={'70px'}
                                src={item.thumb}
                                srcBig={item.filePath}
                                key={index}
                              />
                            )
                          })}
                          {item.video?.map((item: any, index: number) => {
                            return (
                              <video
                                onClick={e => {
                                  e.stopPropagation()
                                  lookFileFu(item.filePath)
                                }}
                                src={baseURL + item.thumb}
                                key={index}
                              />
                            )
                          })}
                        </>
                      </div>
                    )}
                    <div className='updateTime'>更新时间：{item.updateTime}</div>
                  </div>
                )
              })}
              <Pagination
                total={total}
                simple
                defaultPageSize={pagination.pageSize}
                defaultCurrent={pagination.current}
                current={pagination.current}
                onChange={(page, size) => {
                  setPagination({ current: page, pageSize: size })
                  getListFu(page, size)
                }}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoLeft = React.memo(Left)

export default MemoLeft