import React, { useCallback, useEffect, useMemo, useState } from 'react'
import styles from './index.module.scss'
import { Button } from 'antd'
import { useDispatch, useSelector } from 'react-redux'
import { Z5_APIdel, Z5_APIgetList } from '@/store/action/Z5role'
import { RootState } from '@/store'
import { MessageFu } from '@/utils/message'
import { TypeZ5table } from './type'
import MyPopconfirm from '@/components/MyPopconfirm'
import MyTable from '@/components/MyTable'
import { Z5tableC } from '@/utils/tableData'
import Z5edit from './Z5edit'
function Z5role() {
  const dispatch = useDispatch()

  // 顶部筛选
  const [fromData, setFromData] = useState({
    pageNum: 1,
    pageSize: 10,
    searchKey: ''
  })

  // 封装发送请求的函数
  const getList = useCallback(async () => {
    dispatch(Z5_APIgetList(fromData))
  }, [dispatch, fromData])

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

  // 从仓库中获取表格数据
  const tableInfo = useSelector((state: RootState) => state.Z5role.tableInfo)

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

  const tableLastBtn = useMemo(() => {
    return [
      {
        title: '操作',
        width: 200,
        render: (item: TypeZ5table) => {
          return item.id === 1 ? (
            '-'
          ) : (
            <>
              <Button size='small' type='text' onClick={() => setEditId(item.id)}>
                编辑
              </Button>
              {item.id === 13 ? null : (
                <MyPopconfirm txtK='删除' onConfirm={() => delTableFu(item.id)} />
              )}
            </>
          )
        }
      }
    ]
  }, [delTableFu])

  // 点击重置
  const resetSelectFu = useCallback(() => {
    setFromData({
      pageNum: 1,
      pageSize: 10,
      searchKey: ''
    })
  }, [])

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

  return (
    <div className={styles.Z5role}>
      <div className='pageTitle'>角色管理</div>
      <div className='Z5top'>
        <Button type='primary' onClick={() => setEditId(-1)}>
          新增
        </Button>
      </div>
      {/* 表格主体 */}
      <div className='tableBox'>
        <MyTable
          emptyText={true}
          yHeight={630}
          list={tableInfo.list}
          columnsTemp={Z5tableC}
          lastBtn={tableLastBtn}
          pageNum={fromData.pageNum}
          pageSize={fromData.pageSize}
          total={tableInfo.total}
          onChange={(pageNum, pageSize) => setFromData({ ...fromData, pageNum, pageSize })}
          widthSet={{ roleDesc: 800, sort: 100 }}
        />
      </div>

      {/* 新增和编辑 */}
      {editId ? (
        <Z5edit
          sId={editId}
          closeFu={() => setEditId(0)}
          addTableFu={resetSelectFu}
          editTableFu={getList}
        />
      ) : null}
    </div>
  )
}

const MemoZ5role = React.memo(Z5role)

export default MemoZ5role
