import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import { Button, Input, Select } from 'antd'
import MyTable from '@/components/MyTable'
import { getUserListAPI } from '@/store/action/Isystem/I7user'
import { I4baseFormData, I4tableType } from './data'
import { I4_APIgetList } from '@/store/action/Isystem/I4processSet'
import { selectObj } from '@/utils/dataChange'
import { I4tableC } from '@/utils/tableData'
import I4edit from './I4edit'
import I4linkSet from './I4linkSet'

function I4processSet() {
  const dispatch = useDispatch()

  // 获取用户列表
  useEffect(() => {
    dispatch(getUserListAPI({ pageNum: 1, pageSize: 99999 }))
  }, [dispatch])

  const { list: userList } = useSelector((state: RootState) => state.I7user.tableInfo)

  const [formData, setFormData] = useState(I4baseFormData)
  const formDataRef = useRef(I4baseFormData)

  useEffect(() => {
    formDataRef.current = formData
  }, [formData])

  // 点击搜索的 时间戳
  const [timeKey, setTimeKey] = useState(0)

  // 点击搜索
  const clickSearch = useCallback(() => {
    setFormData({ ...formData })
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [formData])

  // 封装发送请求的函数
  const getListFu = useCallback(() => {
    dispatch(I4_APIgetList(formDataRef.current))
  }, [dispatch])

  // 从仓库中获取数据
  const { tableList } = useSelector((state: RootState) => state.I4processSet)

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

  // 输入框的改变
  const txtChangeFu = useCallback(
    (txt: string, key: 'name') => {
      setFormData({
        ...formData,
        [key]: txt
      })
    },
    [formData]
  )

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFormData(I4baseFormData)
    setTimeout(() => {
      setTimeKey(Date.now())
    }, 50)
  }, [])

  // 环节配置 打开 关闭
  const [proId, setProId] = useState(0)
  const titleRef = useRef('')

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: I4tableType) => {
          return (
            <>
              <Button
                size='small'
                type='text'
                onClick={() => {
                  titleRef.current = item.name
                  setProId(item.id)
                }}
              >
                环节配置
              </Button>
              <Button size='small' type='text' onClick={() => setEditId(item.id)}>
                编辑
              </Button>
            </>
          )
        }
      }
    ]
  }, [])

  // 点击编辑
  const [editId, setEditId] = useState(0)

  return (
    <div className={styles.I4processSet}>
      <div className='pageTitle'>
        流程设置{editId ? '-编辑' : ''}
        {proId ? '-环节配置' : ''}
      </div>
      <div className='I4top'>
        <div className='I4topll'>
          流程名称：
          <Input
            placeholder='请输入流程名称'
            style={{ width: 200 }}
            maxLength={30}
            value={formData.name}
            onChange={e => txtChangeFu(e.target.value, 'name')}
          />
          &emsp;启用状态：
          <Select
            allowClear={true}
            placeholder='全部'
            style={{ width: 200 }}
            value={formData.enabled}
            onChange={e => setFormData({ ...formData, enabled: e })}
            options={selectObj['启用状态']}
          />
        </div>
        <div className='I4toprr'>
          <Button type='primary' onClick={clickSearch}>
            查询
          </Button>
          &emsp;<Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      {/* 表格 */}
      <div className='tableBox'>
        <MyTable
          yHeight={632}
          list={tableList}
          columnsTemp={I4tableC}
          lastBtn={tableLastBtn}
          pagingInfo={false}
          widthSet={{ remark: 700 }}
        />
      </div>

      {/* 编辑 */}
      {editId ? <I4edit sId={editId} closeFu={() => setEditId(0)} succFu={getListFu} /> : null}

      {/* 环节配置 */}
      {proId ? (
        <I4linkSet
          title={titleRef.current}
          sId={proId}
          closeFu={() => setProId(0)}
          userList={userList}
        />
      ) : null}
    </div>
  )
}

const MemoI4processSet = React.memo(I4processSet)

export default MemoI4processSet
