import React, { useEffect, useCallback, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { Clue_APIgetClueList } 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 getListFu = useCallback(
    (pageNum: number, pageSize: number) => {
      dispatch(
        Clue_APIgetClueList({
          pageNum: pageNum,
          pageSize: pageSize
        })
      )
    },
    [dispatch]
  )

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

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

  const fingingList = useMemo(() => {
    return listAll.filter((item: ClueItem) => item.status === '跟进中')
  }, [listAll])
  const foundList = useMemo(() => {
    return listAll.filter((item: ClueItem) => item.status === '已找到')
  }, [listAll])
  const clueList = useMemo(() => {
    return listAll.filter(
      (item: ClueItem) => item.status !== '待确定' && item.status !== '作废'
    )
  }, [listAll])
  const [curClueList, setCurClueList] = useState<ClueItem[]>()

  useEffect(() => {
    if (foundList.length && !curClueList) {
      setCurClueList(foundList)
    }
  }, [curClueList, foundList])

  // 预览视频
  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='finding'>
            <div className='title'>
              <img src={require('@/assets/img/finding.png')} alt='' />
              <div>寻亲中</div>
            </div>
            <div className='num'>{fingingList.length}</div>
          </div>
          <div className='found'>
            <div className='title'>
              <img src={require('@/assets/img/found.png')} alt='' />
              <div>已找到</div>
            </div>
            <div className='num'>{foundList.length}</div>
          </div>
        </div>
        <div className='mainInfoBox'>
          <div className='tab'>
            <div
              className={curClueList === foundList ? 'active' : ''}
              onClick={() => setCurClueList(foundList)}
            >
              寻亲案例
            </div>
            <div
              className={curClueList === clueList ? 'active' : ''}
              onClick={() => setCurClueList(clueList)}
            >
              线索更新
            </div>
          </div>
          <div className='mainInfoListBox'>
            <div className='slide'></div>
            <div className='mainInfoList'>
              {curClueList?.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.province + 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={20}
                defaultCurrent={1}
                current={1}
                onChange={(page, size) => getListFu(page, size)}
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

const MemoLeft = React.memo(Left)

export default MemoLeft
