import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { useDispatch, useSelector } from 'react-redux'
import { D2_APIgetlist } from '@/store/action/D2approval'
import { RootState } from '@/store'
import MyTable from '@/components/MyTable'
import { D2tableC } from '@/utils/tableData'
import { D2listType } from './data'
import { Button } from 'antd'
import D2edit from './D2edit'
function D2approval() {
  const dispatch = useDispatch()

  const getListFu = useCallback(() => {
    dispatch(D2_APIgetlist())
  }, [dispatch])

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

  const tableList = useSelector((state: RootState) => state.D2approval.list)

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        render: (item: D2listType) => (
          <Button size='small' type='text' onClick={() => setEditId(item.id)}>
            编辑
          </Button>
        )
      }
    ]
  }, [])

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

  return (
    <div className={styles.D2approval}>
      <div className='pageTitle'>审批设置{editId ? ' - 编辑' : ''}</div>

      <MyTable
        yHeight={750}
        list={tableList}
        columnsTemp={D2tableC}
        lastBtn={tableLastBtn}
        pagingInfo={false}
        widthSet={{ remark: 800 }}
      />

      {/* 编辑页面 */}
      {editId ? <D2edit sId={editId} closeFu={() => setEditId(0)} upTableFu={getListFu} /> : null}
    </div>
  )
}

const MemoD2approval = React.memo(D2approval)

export default MemoD2approval
