import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import MyTable from '@/components/MyTable'
import MyPopconfirm from '@/components/MyPopconfirm'
import { MessageFu } from '@/utils/message'
import { UserTableListType } from '../../I7user/data'
import { I4proListType } from '../data'
import { I4_APIgetProDel, I4_APIgetProList } from '@/store/action/Isystem/I4processSet'
import { I4tableC2 } from '@/utils/tableData'
import I4addPro from './I4addPro'
import I4lookPro from './I4lookPro'

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

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

  const getListFu = useCallback(async () => {
    const res = await I4_APIgetProList(sId)
    if (res.code === 0) {
      const data: I4proListType[] = 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 I4_APIgetProDel(id)
      if (res.code === 0) {
        MessageFu.success('删除成功!')
        getListFu()
      }
    },
    [getListFu]
  )

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: I4proListType, _: 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.I4linkSet}>
      <div className='I4aTit'>
        <h3>{title} - 环节配置</h3>
        <div>
          <Button type='primary' onClick={() => setProId(-1)}>
            新增
          </Button>
          &emsp;
          <Button onClick={closeFu}>返回</Button>
        </div>
      </div>

      {/* 表格 */}
      <MyTable
        classKey='I4linkSet'
        yHeight={660}
        list={table}
        columnsTemp={I4tableC2}
        lastBtn={tableLastBtn}
        pagingInfo={false}
      />

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

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

const MemoI4linkSet = React.memo(I4linkSet)

export default MemoI4linkSet
