import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { Z3_APIgetList } from '@/store/action/Z3flowSet'
import { RootState } from '@/store'
import { Button, Input, Select } from 'antd'
import { selectObj } from '@/utils/select'
import MyTable from '@/components/MyTable'
import { Z3tableC } from '@/utils/tableData'
import Z3edit from './Z3edit'
import { getUserListAPI } from '@/store/action/Z6user'
import Z3linkSet from './Z3linkSet'
import { Z3formType, Z3tableType } from './type'

const Z3baseFormData: Z3formType = {
  enabled: null,
  name: '',
  type: null
}

function Z3flowSet() {
  const dispatch = useDispatch()

  // 获取用户列表

  useEffect(() => {
    dispatch(getUserListAPI({ pageNum: 1, pageSize: 99999 }))
  }, [dispatch])

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

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

  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(Z3_APIgetList(formDataRef.current))
  }, [dispatch])

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

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

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

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

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: Z3tableType) => {
          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.Z3flowSet}>
      <div className='pageTitle'>
        流程设置{editId ? '-编辑' : ''}
        {proId ? '-环节配置' : ''}
      </div>
      <div className='Z3top'>
        <div className='Z3topll'>
          流程设置：
          <Select
            allowClear={true}
            placeholder='全部'
            style={{ width: 200 }}
            value={formData.type}
            onChange={e => setFormData({ ...formData, type: e })}
            options={selectObj['流程类型']}
          />
          &emsp; 流程名称：
          <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='Z3toprr'>
          <Button type='primary' onClick={clickSearch}>
            查询
          </Button>
          &emsp;<Button onClick={resetSelectFu}>重置</Button>
        </div>
      </div>

      {/* 表格 */}
      <MyTable
        yHeight={680}
        list={tableList}
        columnsTemp={Z3tableC}
        lastBtn={tableLastBtn}
        pagingInfo={false}
        widthSet={{ remark: 700 }}
      />

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

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

const MemoZ3flowSet = React.memo(Z3flowSet)

export default MemoZ3flowSet
