import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import { UserTableListType } from '@/types'
import { Z3_APIgetProDel, Z3_APIgetProList } from '@/store/action/Z3flowSet'
import Z3addPro from './Z3addPro'
import { Z3proListType } from '../type'
import { Z3tableC2 } from '@/utils/tableData'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import Z3lookPro from './Z3lookPro'

type Props = {
  sId: number
  closeFu: () => void
  userList: UserTableListType[]
  title: string
}

function Z3linkSet({ sId, closeFu, userList, title }: Props) {
  const [table, setTable] = useState<Z3proListType[]>([])

  const getListFu = useCallback(async () => {
    const res = await Z3_APIgetProList(sId)
    if (res.code === 0) {
      const data: Z3proListType[] = res.data

      setTable(
        data.map((v, i) => ({
          ...v,
          sort: v.isUse === 0 ? '/' : v.sort,
          type: v.isUse === 0 ? '/' : v.type
        }))
      )
    }
  }, [sId])

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

  // 点击删除
  const delTableFu = useCallback(
    async (id: number) => {
      const res: any = await Z3_APIgetProDel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: Z3proListType, _: any, index: number) => {
          return item.isUse === 0 ? (
            '/'
          ) : (
            <>
              <Button size='small' type='text' onClick={() => setLookId(item.id)}>
                查看办理人
              </Button>
              <Button size='small' type='text' onClick={() => setProId(item.id)}>
                编辑
              </Button>
              <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
            </>
          )
        }
      }
    ]
  }, [delTableFu])

  // 环节的新增和编辑
  const [proId, setProId] = useState(0)

  // 查看办理人
  const [lookId, setLookId] = useState(0)

  return (
    <div className={styles.Z3linkSet}>
      <div className='Z3aTit'>
        <h2>{title}</h2>&emsp;
        <Button type='primary' onClick={() => setProId(-1)}>
          新增
        </Button>
        &emsp;
        <Button onClick={closeFu}>返回</Button>
      </div>

      {/* 表格 */}
      <MyTable
        classKey='Z3linkSet'
        yHeight={700}
        list={table}
        columnsTemp={Z3tableC2}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />

      {proId ? (
        <Z3addPro
          flowId={sId}
          sId={proId}
          closeFu={() => setProId(0)}
          succFu={getListFu}
          userList={userList}
        />
      ) : null}

      {lookId ? <Z3lookPro sId={lookId} closeFu={() => setLookId(0)} /> : null}
    </div>
  )
}

const MemoZ3linkSet = React.memo(Z3linkSet)

export default MemoZ3linkSet
