import React, { useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { FileUpInfoType } from '../data'
import { useInfo } from '../InfoContext'
import { useParams } from 'react-router-dom'
import { GoodsType } from '../SonGoodsList/data'
import { Button } from 'antd'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { SonClueListTableC } from '@/utils/tableData'
import AddClues from '../AddClues'

type Props = {
  // 上传附件的信息
  fileUpInfo: FileUpInfoType
}

function SonClueList({ fileUpInfo }: Props) {
  const { info, snaps, setSnapsFu } = useInfo()

  const { key } = useParams<any>()
  // key:1 新增 2编辑 3审批 4查看

  const isLook = useMemo(() => {
    return ['3', '4'].includes(key)
  }, [key])

  const [openInfo, setOpenInfo] = useState({} as GoodsType)

  const sonLook = useRef(false)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: GoodsType) => (
          <>
            {isLook ? (
              <Button
                size='small'
                type='text'
                onClick={() => {
                  sonLook.current = true
                  setOpenInfo(item)
                }}
              >
                查看
              </Button>
            ) : (
              <>
                <Button
                  size='small'
                  type='text'
                  onClick={() => {
                    sonLook.current = false
                    setOpenInfo(item)
                  }}
                >
                  编辑
                </Button>
                <MyPopconfirm
                  txtK='删除'
                  onConfirm={() => {
                    setSnapsFu(snaps.filter(v => v.id !== item.id))
                  }}
                />
              </>
            )}
          </>
        )
      }
    ]
  }, [isLook, setSnapsFu, snaps])

  return (
    <div className={styles.SonClueList}>
      <div className='EdTit'>
        <div>线索清单</div>
        {isLook ? (
          <div></div>
        ) : (
          <div>
            <Button
              type='primary'
              onClick={() => {
                sonLook.current = false
                setOpenInfo({ id: -1 } as GoodsType)
              }}
            >
              新增
            </Button>
          </div>
        )}
      </div>

      <div className='SonClueListTable'>
        <MyTable
          classKey='SonClueListTable'
          list={snaps}
          columnsTemp={SonClueListTableC}
          lastBtn={tableLastBtn}
          pagingInfo={false}
        />
      </div>

      {openInfo.id ? (
        <AddClues
          isLook={sonLook.current}
          fileUpInfo={fileUpInfo}
          info={openInfo}
          closeFu={() => setOpenInfo({} as GoodsType)}
          moduleId={info.id}
          succFu={(val: '新增' | '编辑', info: GoodsType) => {
            if (val === '新增') setSnapsFu([info, ...snaps])
            else
              setSnapsFu(
                snaps.map(v => {
                  if (v.id === info.id) return info
                  else return v
                })
              )
          }}
        />
      ) : null}
    </div>
  )
}

const MemoSonClueList = React.memo(SonClueList)

export default MemoSonClueList
