import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { A2AListCamerasType } from '@/types'
import { Button, Table } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'

type Props = {
  checkSonBtnOk: (arr: A2AListCamerasType[], delIdxx: number[]) => void
  checkSonClose: () => void
  allList: A2AListCamerasType[]
  checkTableList: A2AListCamerasType[]
}

function CheckTable({ checkTableList, allList, checkSonBtnOk, checkSonClose }: Props) {
  // 选中的表格数据
  const [tableSelectList, setTableSelectList] = useState<A2AListCamerasType[]>([])

  // 本来是勾选的 取消勾选了 点击确定的时候需要删除
  const delArrRef = useRef<number[]>([])

  // 外层表格的所有 idxx 集合
  const checkIDxx = useMemo(() => {
    return allList.map(v => v.idxx)
  }, [allList])

  // 进入的时候回显 选中
  useEffect(() => {
    // 过滤
    // 回显 选中表格的完整数据
    const arr = checkTableList.filter(v => checkIDxx.includes(v.idxx))
    setTableSelectList(arr)

    // 保存进来的所有已经勾选的 idxx
    delArrRef.current = arr.map(v => v.idxx)
  }, [checkIDxx, checkTableList])

  const rowSelection = useMemo(() => {
    return {
      onChange: (selectedRowKeys: any, selectedRows: any) => {
        setTableSelectList(selectedRows)
      },
      // 回显选中
      selectedRowKeys: tableSelectList.map(v => v.idxx)
    }
  }, [tableSelectList])

  const btnOk = useCallback(() => {
    // delArrRef.current===》进来的时候所有勾选的idxx集合
    //--最后勾选的idxx集合
    const lastIdxx = tableSelectList.map(v => v.idxx)

    // 本来是勾选的，现在取消勾选了。取消勾选的idxx的集合
    const delIdxx = delArrRef.current.filter(v => !lastIdxx.includes(v))

    checkSonBtnOk(tableSelectList, delIdxx)
    MessageFu.success('编辑成功')
    checkSonClose()
  }, [checkSonBtnOk, checkSonClose, tableSelectList])

  const columns = useMemo(() => {
    return [
      {
        width: 100,
        title: '相机类型',
        render: (item: A2AListCamerasType) => (item.cameraType === 'KK' ? '看看' : '看见')
      },
      {
        title: 'SN码',
        render: (item: A2AListCamerasType) => item.cameraSn
      },
      {
        title: '备注',
        render: (item: A2AListCamerasType) =>
          item.remark ? (
            item.remark.length >= 50 ? (
              <span style={{ cursor: 'pointer' }} title={item.remark}>
                {item.remark.substring(0, 50) + '...'}
              </span>
            ) : (
              item.remark
            )
          ) : (
            '（空）'
          )
      }
    ]
  }, [])
  // XS202408230J  xs0001  777
  return (
    <div className={styles.CheckTable}>
      <Table
        scroll={{ y: 530 }}
        size='small'
        rowSelection={{
          type: 'checkbox',
          ...rowSelection
        }}
        dataSource={checkTableList}
        columns={columns}
        rowKey='idxx'
        pagination={false}
      />
      {/*  右下角的列表数量 */}
      <div className='tableNumBox'>
        共 <span>{checkTableList.length}</span> 条数据
      </div>

      <div className='checkBtn'>
        <MyPopconfirm txtK='取消' onConfirm={checkSonClose} />
        &emsp;
        <Button type='primary' onClick={btnOk}>
          确定
        </Button>
      </div>
    </div>
  )
}

const MemoCheckTable = React.memo(CheckTable)

export default MemoCheckTable
